一、项目背景🔥：
二、 前言🔥：
想必大家都知道，vue项目npm run build会直接生成一个dist文件(文件夹)，对吧，那么对于生成的dist文件夹，这怎么发布到服务器啊？就很懵。
今天呢，bug菌我就带着大家来揭开这层谜团，手把手教大家如何将vue打包生成的dist文件夹并发布到服务器能被正常访问。
三、教程🔥：
第一步：build打包
直接在你的控制台执行 npm run build 命令。配合webpack(打包工具)可以实现快速打包，为部署提供了非常大的便利命令。直接将项目打包成一个可运行的dist文件。
如下就是已经打包成功了的项目结构截图，可以看到dist文件夹位于项目根目录下。
第二步：tomcat安装
具体安装步骤此处简写。我就拿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.sh5、浏览器访问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肯定会配置多个项目也说不定，所以有的小伙伴那种投机取巧的办法是行不通的啊(把dist文件夹中的文件都丢root目录中不就好了)。
想听我是怎么解决的么？很好办，先点赞，我再教你？如何，做个交易。
好啦，看在我这么热心肠的份上，我就索性告诉你们了吧。
第一步：打开tomcat目录下的conf；在conf文件夹下面找到server.xml 打开。
vim server.xml第二步：然后一直拉到最底部。在<hosts> ......</hosts>最后一行上添加一行如下指定目录。
具体添加如下：
<Context path="" docBase="/root/tomcat8.5.55/webapps/review-web" debug="0" reloadable="true"/>实际截图如下：
5、重启服务
先停止tomcat服务。切到bin目录下，直接执行如下命令
shutdown.sh再启动tomcat服务。
startup.sh6、浏览器访问项目
直接在浏览器中输入 http://ip:port/xxx 即可，如果成功跳转页面(前端项目页面这你肯定是知道的吧)，则表示服务器部署前端项目就已大功告成。比如我的：http://10.10.10.10:9011/review-web/#/Login，即可访问到我的Vue项目。
如下是我实际开发中项目login首页截图：
好啦，以上就是这期的所有内容，如果有任何疑问，还请评论区留言告诉我。
四、文末🔥：
如果你还想要学习更多，小伙伴们大可关注bug菌专门为你们创建的专栏《vue.js实战教学》
都是我一手打下的江山，持续更新中，希望能帮助到更多小伙伴们。
我是bug菌，一名想走👣出大山改变命运的程序猿。接下来的路还很长，都等待着我们去突破、去挑战。来吧，小伙伴们，我们一起加油！未来皆可期，fighting！
最后送大家两句话，与诸君共勉！
☘️做你想做的人，没有时间限制，只要愿意，什么时候都可以start，
🍀你能从现在开始改变，也可以一成不变，这件事，没有规矩可言，你可以活出最精彩的自己。
