程序员经验分享-hwhale

手把手教你如何Vue项目打包dist文件并Tomcat发布【超级详细】

2023-05-16

???作者：bug菌

博客：CSDN、掘金等

??公众号：猿圈奇妙屋

??特别声明：原创不易，转载请附上原文出处链接和本文声明，谢谢配合。

??版权声明：文章里可能部分文字或者图片来源于互联网或者百度百科，如有侵权请联系‘’bug菌处理。

一、项目背景??：

前端项目：vue3 + vite + ts

二、 前言??：

想必大家都知道，vue项目npm run build会直接生成一个dist文件(文件夹)，对吧，那么对于生成的dist文件夹，这怎么发布到服务器啊？就很懵。

今天呢，bug菌我就带着大家来揭开这层谜团，手把手教大家如何将vue打包生成的dist文件夹并发布到服务器能被正常访问。

三、教程??：

第一步：build打包

直接在你的控制台执行 npm run build 命令。配合webpack(打包工具)可以实现快速打包，为部署提供了非常大的便利命令。直接将项目打包成一个可运行的dist文件。

如下就是已经打包成功了的项目结构截图，可以看到dist文件夹位于项目根目录下。

第二步：tomcat安装

服务器环境：centos7.6

tomcat版本：8.5.5

具体安装步骤此处简写。我就拿tomcat8.5版本为例作为演示吧~~

1、tomcat安装包下载；Tomcat官网：Apache Tomcat? - Welcome!官网下载也快的。

2、上传至服务器。通过rz 命令，然后将你下载好的tomcat安装包选上。

3、tomcat解压。解压.tar.gz文件 命令如下：

tar -zxvf apache-tomcat-8.5.5.tar.gz

4、启动tomcat。

进到tomcat解压后的bin目录，然后启动命令如下：

startup.sh

5、浏览器访问tomcat首页。

http://ip:8080

访问路径成功看到tomcat界面就证明安装成功了。

例如：http://10.10.10.10:8080（服务端口默认是8080，后续也可以自定义；但是要注意防火墙，特殊端口要加白名单。）

第三步：dist文件发布

1、上传dist文件夹

此处先本地dist压缩成dist.zip。然后通过rz 命令将dist.zip上传到tomcat8.5.55/webapps下。

2、创建根目录

创建一个新文件夹，命名自己定，后续访问前端项目，这个文件名就会成为url访问的根目录。比如我就创建一个名为review-web。

3、解压dist.zip

将dist.zip中的所有文件解压到review-web文件夹里头。解压命令如下：

unzip dist.zip

第四步：修改tomcat默认根路径

4、配置访问项目的根路径[关键步骤]

这一步直观重要，我先给大家省略这一步，直接跳到第5步骤(具体操作请看第5步骤)。接下来我就来演示一下，为什么这一步至关重要。

未修改默认Tomcat的默认访问根目录时:

大家看到了一件什么事，静态资源静态404，奇了个怪，文件明明都解压到了 review-web文件夹中啊，怎么会消失，我去 服务器检查一下，打开review-web文件夹 查看， 结果，

文件不都在么，怎么回事啊？？？再仔细观察，review-web这一层目录竟然不存在，这也就是404的缘故了。看到这里，你们知道究竟是咋回事么？而且检查发现，看到assets竟然跟review-web同级？离谱！狗看了都摇头。

到这里，肯定屏幕前的你也一脸疑惑，为啥会这样呢…不过，我今天前来，就是来为你揭开这层面纱的。

其实这一切的背后，都是因为 Tomcat 在默认安装后，Tomcat 的主目录为webapps/root目录，所以无论你添加什么文件夹，都是无效的，启动后会自动忽略，具体想深入了解的，可以去看看tomcat的webapps介绍，你就都会理解啦。

那肯定不行啊，我项目就不部署了啊？不急，肯定会有解决办法的，虽然一台tomcat可能会配置多个项目也说不定，所以有的小伙伴那种投机取巧的办法是行不通滴(把dist文件夹中的文件都丢root目录中不就好了，早就被我看穿了你的小心思，哈哈哈哈哈)。

想听听我是怎么解决这个问题的么？很好办，**你先点赞，我再教你？**如何，做个交易吧咱。

好啦，看在我这么热心肠的份上，我就索性告诉你们了吧。

第一步：打开tomcat目录下的conf；在conf文件夹下面找到server.xml 打开。

vim server.xml

第二步：然后一直拉到最底部。在 …最后一行上添加一行如下指定目录。

具体添加如下：

<Context path="" docBase="/root/tomcat8.5.55/webapps/review-web" debug="0" reloadable="true"/>

说明：docBase为你webapps里头的dist文件夹，我是将改名为review-web了，所以路径是到写review-web即可，你改名为啥就写啥。

实际截图如下：

第五步：tomcat重启

5、重启服务

先停止tomcat服务。切到bin目录下，直接执行如下命令

shutdown.sh

再启动tomcat服务。

startup.sh

6、浏览器访问项目

直接在浏览器中输入http://ip:port/xxx 即可，如果成功跳转页面(前端项目页面这你肯定是知道的吧)，则表示服务器部署前端项目就已大功告成。比如我的：http://10.10.10.10:9011/review-web/#/Login，即可访问到我的Vue项目。

如下是我实际开发中项目login首页截图：

好啦，以上就是这期文章的所有内容，如果对以上内容有任何疑问，还请评论区留言告诉我，bug菌会第一时间为你排忧解难。

四、文末??：

如果你还想要学习更多，小伙伴们大可关注bug菌专门为你们创建的专栏《vue.js实战教学》都是我一手打下的江山，持续更新中，希望能帮助到更多小伙伴们。

我是bug菌，一名想走??出大山改变命运的程序猿。接下来的路还很长，都等待着我们去突破、去挑战。来吧，小伙伴们，我们一起加油！未来皆可期，fighting！

最后送大家两句话，与诸君共勉！

做你想做的人，没有时间限制，只要愿意，什么时候都可以start，

??你能从现在开始改变，也可以一成不变，这件事，没有规矩可言，你可以活出最精彩的自己。

??如果文章对您有所帮助，就请留下您的赞吧！(#.#)；

??如果喜欢bug菌分享的文章，就请给bug菌点个关注吧！(′‵)づ╭～；

??如果对文章有任何疑问，还请文末留言或者加群吧【QQ交流群:708072830】；

??鉴于个人经验有限，所有观点及技术研点，如有异议，请直接回复参与讨论(请勿发表攻击言论，谢谢）；

??版权声明：原创不易，转载请附上原文出处链接和本文声明，版权所有，盗版必究！！！谢谢。

先自我介绍一下，小编13年上师交大毕业，曾经在小公司待过，去过华为OPPO等大厂，18年进入阿里，直到现在。深知大多数初中级java工程师，想要升技能，往往是需要自己摸索成长或是报班学习，但对于培训机构动则近万元的学费，着实压力不小。自己不成体系的自学效率很低又漫长，而且容易碰到天花板技术停止不前。因此我收集了一份《java开发全套学习资料》送给大家，初衷也很简单，就是希望帮助到想自学又不知道该从何学起的朋友，同时减轻大家的负担。添加下方名片，即可获取全套学习资料哦

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

vue

dist

tomcat

手把手教你如何

项目打包

手把手教你如何Vue项目打包dist文件并Tomcat发布【超级详细】 的相关文章

  • 如何在 Intellij IDEA 中为 Apache Tomcat 指定自定义 JRE 路径？

    问题是如何指定自定义JRE路径为Apache tomcat in Intellij IDEA 当从以下位置启动应用程序时IDEA 看来 只需配置它的路径 路径jvm dll in Apache Tomcat监视器没有帮助 还有其他想法或方法

  • Postman - 所需的 MultipartFile 参数不存在 - Spring，Java [重复]

    这个问题在这里已经有答案了 Edit 这个问题不同于 jQuery Ajax 文件上传 所需的 MultipartFile 参数 文件 不存在 https stackoverflow com q 29488852 2279082不同之处在于

  • Tomcat 8 中的多部分文件最大大小配置[重复]

    这个问题在这里已经有答案了 我的应用程序服务器是 Tomcat 我需要将文件 大尺寸 上传到我的应用程序 车身尺寸为POSTrequests 确实很长 大约 15 MB 或更多 我可以设置任何类型的配置或代码来解决这个问题吗 请记住 这是m

  • 是否值得清理 Filter 中的 ThreadLocals 来解决线程池相关问题？

    简而言之 tomcat 使用线程池 因此线程被重用 一些图书馆使用ThreadLocal变量 但不要清理它们 使用 remove 所以实际上它们将 脏 线程返回到池中 Tomcat 具有在关闭时检测这些事情并清理线程局部变量的新功能 但这意

  • 如何正确配置Tomcat SSLHostConfig？

    我正在按照本教程在 tomcat 中启用 ssl https medium com raupach how to install lets encrypt with tomcat 3db8a469e3d2 https medium com

  • Maven 多模块项目结构问题

    自从过去几周构建我的 Maven 多模块项目以来 这是我的一次有趣的经历 当我决定使用 Maven 进行构建生命周期管理时 我有几个原因希望选择 Maven A 大多数开发团队都是分开的 这样每个团队都可以在项目中的单独模块上工作 例如团队

  • tomcat 8 无法在自由端口上启动

    PROBLEM 通过 Windows 服务停止 gt 启动 tomcat 8 失败 因为 tomcat 关闭不知何故以 不可见 状态继续侦听端口 8080 并且 tomcat 无法启动 因为它无法绑定到端口 8080 背景 我们的一个构建脚

  • Eclipse 与 IntelliJ 热部署

    我的应用程序配置 Tomcat 8 Spring Spring MVC Hibernate 在 Eclipse 中 我创建了 Tomcat 服务器 并将我的应用程序添加到资源中 JSP JS CSS 和 JAVA 类热部署的工作原理就是这样

  • 使用 Elastic Beanstalk 进行 Logback

    我在使用 Elastic Beanstalk 记录应用程序日志时遇到问题 我正在 AWS Elastic Beanstalk 上的 Tomcat 8 5 with Corretto 11 running on 64bit Amazon Li

  • Tomcat 6找不到mysql驱动

    这里有一个类似的问题 但关于类路径 ClassNotFoundException com mysql jdbc Driver https stackoverflow com questions 1585811 classnotfoundex

  • Java HttpSession 属性存储在哪里？

    对象是否被序列化并发送给用户并在每个连接上返回 存储在 cookie 中 或者它们存储在服务器堆中并且cookie只是一个非常小的标识符 有关此主题的任何信息都会有所帮助 谢谢 你第二次猜到了 该 cookie 包含一个 JSESSIONI

  • 部署示例 Spring Web MVC 项目

    我是 Tomcat Maven 和 Spring Web MVC 准确地说是框架 v3 的新手 我试图建立example https anonsvn springframework org svn spring samples 项目mvc

  • 测量 tomcat 的排队请求数

    因此 使用tomcat 您可以设置acceptCount值 默认为100 这意味着当所有工作线程都忙时 新连接被放置在队列中 直到队列满 之后它们被拒绝 我想要的是监视此队列中项目的大小 但无法确定是否有办法通过 JMX 获取此值 即不是队

  • Tomcat从Eclipse和startup.sh启动

    奇怪的事情发生了 我可以从 Eclipse 和startup sh 启动Tomcat 从 Eclipse 运行我可以访问 localhost 8080 而从startup sh 运行时我不能 可能是什么问题呢 Ubuntu 11 10 在

  • Centos 与 Plesk11.x

    我正在使用 Centos 和 Plesk 11 x 以及这篇文章如何获取 RHL 的 Apache mod jk 连接器 https stackoverflow com questions 33381933 how to obtain ap

  • web.xml 中的多个安全约束不起作用

    我正在升级一个 Web 应用程序 Servlet 3 0 Tomcat 7 它的大部分页面都需要基本身份验证 该应用程序具有一小组监视 servlet 其中任何一个都不应该受到保护 在我的web xml 我目前有以下内容security c

  • IntelliJ IDEA 13 + Tomcat 7 部署

    我尝试在 Tomcat7 上的 IDEA 中部署空的 Web 应用程序 Tomcat 停止在线工作 INFO Deploying web application directory C devel Servers apache tomcat

  • Spring boot - 嵌入式 Tomcat - 连接器定制器 - 无法添加 parseBodyMethods 属性

    最初的问题是当我使用 DELETE 方法发送http请求时 正文部分无法发送到服务器 经过谷歌搜索后 我发现本文 https stackoverflow com questions 41205062 requestbody not acce

  • 将 WAR 部署到 Tomcat（Spring Boot + Angular）

    我正在尝试使用以下命令部署 Spring Boot 应用程序WAR包装至Tomcat 10 应用程序已成功部署 但是 当我尝试访问端点时 它会导致404 未找到 战争文件 应用程序 war http localhost 8080 appli

  • 如何使用eclipse调试JSP tomcat服务？

    我想使用 Eclipse IDE 调试器来调试单独运行的 JSP Struts Tomcat Hibernate 应用程序堆栈 如何设置 java JVM 和 eclipse 以便设置断点 监视变量值并查看当前正在执行的代码 我刚刚用谷歌搜

随机推荐

  • 计算机考研全年规划

    此文转载的 xff0c 作为参考 文章目录 一 关于考研常识二 择校择专业 xff08 一 xff09 为什么要考研 xff08 二 xff09 怎么样才能考上研究生 xff08 三 xff09 如何择校选专业1 学硕和专硕该如何选择 xf

  • c#串口编程（傻瓜教程，手把手教你学会）

    在单片机项目开发中 xff0c 上位机也是一个很重要的部分 xff0c 主要用于数据显示 xff08 波形 温度等 xff09 用户控制 xff08 LED xff0c 继电器等 xff09 xff0c 下位机 xff08 单片机 xff0

  • CMakeLists.txt编写规则

    一 基本语法 语法格式 指令 参数1 参数2 1 参数间用空格或分号隔开 2 指令大小写无关 参数和变量大小写相关 3 变量用 方式取值 但在if语句中直接用变量名 二 重要指令 1 cmake minimum required 指定CMa

  • [stm32] Start Tour-一些元件的连接

    如果觉得有帮助的话就点个赞吧 持续更新 目录 一 蜂鸣器 注意点 xff1a 二 独立按键 一 蜂鸣器 根据原理图连的实物图如右 xff1a 注意点 xff1a 1 xff09 蜂鸣器分正负极 2 xff09 VCC和GND是32板的总电源

  • ROS中Gazebo无响应解决办法

    标题ROS中Gazebo无响应解决办法 在终端输入gazebo没有反映 xff0c 进行下面两句操作 首先输入下面的代码 gazebo verbose 观察到报错显示原因为有另一个gazebo进程于是杀死这个进程则问题解决代码如下 xff1

  • 别害羞，开源社区真的很需要你，教你如何参与开源社区~

    前言 相信各位开发者多多少少会在实际开发的过程中会使用一些开源的技术 xff0c 例如前端的 vue react 以及大量的第三方库如 echart xff0c color js day js 等等 xff0c 后端就更多了 xff0c 从

  • VBox 快照备份虚拟机

    目录 虚拟机快照概念 什么是虚拟机快照 VBox 快照备份恢复 FreeBSD 系统 拍摄 Snapshots 快照 拍摄快照示例 恢复快照 虚拟机快照概念 什么是虚拟机快照 简单来说 xff0c 就是将你当前状态的虚拟机复制保存一份镜像

  • [Linux 调试 Android]-Linux 命令行调试 Android 设备

    目录 Slackware 15 0 下调试安卓 4 4 2 系统环境配置 获取 linux 版本的 adb 程序 将 ADB 程序安装到 Linux 系统上 配置 adb 环境变量 在 Linux 系统上 adb 调试安卓系统 Slackw

  • docker 容器如何查看正在运行容器的端口映射

    1 查看docker容器的版本 root 64 opt docker version Docker version 19 03 5 build 633a0ea 2 查看正在运行的容器 root 64 opt docker ps CONTAI

  • docker退出关闭容器

    可以使用 docker stop 来终止一个运行中的容器 此外 xff0c 当Docker容器中指定的应用终结时 xff0c 容器也自动终止 例如对于上一章节中只启动了一个终端的容器 xff0c 用户通过 exit 命令或 Ctrl 43

  • STM32收入高也好找工作，所以我学嵌入式linux终究是错付了吗

    STM32收入高也好找工作 xff0c 所以我学嵌入式linux终究是错付了吗 经常有同学纠结问我 xff1a 我到底是学STM32还是学嵌入式linux 这个问题很多人都会有自己的看法 xff0c 今天我试着从多个角度 xff0c 把了解

  • Java面试基础篇

    Java面试基础篇 基础总结 博客链接导航 Java语言基础常识 https blog csdn net article details 88531257 J2EE基础知识 https blog csdn net article detai

  • 项目实战-外卖自提柜 3. FreeRTOS主要API的应用

    项目实战 外卖自提柜 1 项目介绍 协议制定 项目实战 外卖自提柜 2 CubeMX 43 FreeRTOS入门 项目实战 外卖自提柜 3 FreeRTOS主要API的应用 项目实战 外卖自提柜 4 FreeRTOS 堆栈分配 调试技巧 项

  • [Spring] IntelliJ IDEA 新建工程时没有Spring选项的解决方法

    Spring IntelliJ IDEA 新建工程时没有Spring选项的解决方法 专业版 xff08 ultimate xff09 社区版 xff08 community xff09 刚开始学习Java Spring框架 xff0c 也是

  • MySQL下载与安装教程（超详细）

    一 MySQL下载 下载地址 xff1a https dev mysql com downloads mysql 根据自己需要下载对应的版本 xff0c 我下载的是mysql 5 7 31 二 MySQL安装教程 1 解压安装包 下载后得到

  • docker 开发编译环境搭建

    参与docker开源社区 xff0c 成为docker项目的contributor xff0c 首先要搭建docker的开发编译环境 xff0c 下面是docker官网介绍的编译环境的搭建 xff0c 这里做个笔记 docker的编译环境准

  • qt基础入门教程

    1 t的介绍 优点 成功案例 5 8 0 Qt是一个跨平台的C 43 43 图形用户界面应用程序框架 它为应用程序开发者提供建立艺术级图形界面所需的所有功能 爸是完全面向对象的 xff0c 很容易扩展 xff0c 并且允许真正的组件编程 推

  • Java开发自学教程！japonensisjava东莞

    三大内容 xff1a Java并发编程Java高并发编程高并发系统设计 Java并发编程 1 概览 2 进程与线程 3 Java 线程 4 共享模型之管程 5 共享模型之内存 6 共享模型之无锁 7 共享模型之不可变 8 共享模型之工具 并

  • MySQL 5.7 安装教程（全步骤、保姆级教程）

    2022年05月30日更新 本文介绍的是只安装MySQL数据库的过程 xff0c 并不包含各种其他附加工具 安装完成之后通常使用Navicat或SQLyog进行可视化操作 清华的镜像网站只保存最新的几个MySQL版本 xff0c 所以直链可

  • 手把手教你如何Vue项目打包dist文件并Tomcat发布【超级详细】

    作者 xff1a bug菌 博客 xff1a CSDN 掘金等 公众号 xff1a 猿圈奇妙屋 特别声明 xff1a 原创不易 xff0c 转载请附上原文出处链接和本文声明 xff0c 谢谢配合 版权声明 xff1a 文章里可能部分文字或者

热门标签