一点废话：vue部署这个事儿原本是打算写上下两篇的，上篇nginx下篇tomcat，很完美。奈何笔者太菜tomcat还没学会，只好附点使用记录，等实操过了再来补全。在此立个flag，期待一下我薛定谔的下篇。
言归正传，在开始部署之前，我们先要准备好以下工作：
- 一个能跑通的Vue项目
- 一个正常的、安装了nginx的服务器（可以是本地电脑）
如果说服务器有了，nginx没安装？
那没关系，安装起来很简单，可以参考以下步骤：
附、安装nginx
（1）官网下载安装包。官网：http://nginx.org/
（2）找到下载的安装包，解压缩。（nginx不需要运行安装，此时解压的位置就算是nginx安装的位置）
包解压后会得到如下目录。里面比较重要文件夹有：
conf：里面有配置文件nginx.conf
html：放打包好的vue项目
nginx.exe：nginx启动项
另外，多版本的nginx可以共存，只要设置web端口不一样就可以同时使用（而且官方迭代速度真的很快，我电脑里就同时有仨版本。。。）
（3）打开配置文件conginx.conf，查看配置项。
如下图，<listen>项为nginx监听的端口，默认是80。如果本地80端口被占用，需要修改成其他端口。
ps.想查看端口是否被占用，cmd使用命令：
// 查看所有运行的端口 netstat -ano // 查看指定端口是否被占用（未占用返回空值，已占用返回占用信息） netstat -aon|findstr "8081"
（4）启动nginx，有两种方法：
①双击nginx.exe，屏幕上会闪过一个黑色弹窗，意为启动完成。
②打开cmd，cd切换到nginx所在文件夹下，输入命令：start nginx，回车。
（5）打开浏览器，输入网址：http://localhost:812（假设配置文件中端口修改成812）
浏览器出现以下界面，则启动成功！
（6）关于nginx的其他命令
启动nginx
// 启动服务 start nginx
停止nginx
// 快速停止nginx nginx -s stop // 完整有序的停止nginx nginx -s quit
重启nginx
// 重启nginx，一般用在修改配置文件之后 nginx -s reload
使用taskkill命令
taskkill /f /t /im nginx.exe
ok，nginx安装完毕，接下来就可以开始部署项目了——
一、打包并移动vue项目
运行命令：npm run build
到前端项目目录下，找到<dist>文件夹。复制<dist>下的文件，粘贴至nginx根目录下的<html>
二、修改配置文件nginx.conf
完成上一步后，打开我们的配置文件<nginx.conf>，找到<server>节点，修改参数。
初始的配置参数是这样的——
大概需要修改的配置如下：
<listen>：代理端口（自定义未被占用的端口号）
<server_name>：代理名称（域名、ip），本地就用localhost
<root>：项目存放目录（如果只发布一个项目，就是直接把dist拷贝到html文件夹下这种情况，可以直接用html，否则要指定文件夹）
<try_files>：一个覆盖所有情况的候选资源。如果 URL 匹配不到任何静态资源，返回同一个 index.html 页面
三、重启nginx，验证效果
打开cmd，输入重启命令：nginx -s reload （若配置文件没做修改可忽略这一步）
刷新浏览器，查看项目效果！
此处就不放我的项目截图了，放个白板项目凑数——
部署成功！
参考资料，感谢大佬们：
四、关于部署后遇到的各种问题
1、页面刷新404问题
方法①：打开vue项目，修改router模式，从history改为hash
打开vue项目router配置文件index.js，history——>hash即可
缺点就是，url里会多出一个#，有点丑
方法②：修改nginx配置项
添加一行：
也可以这样添加：
两种办法，总有一个适合你！
ps：我的配置文件设置的是第二种写法，印象里当初用第一种写法有问题，所以换了第二种。时间久远记不清当时到底是啥个情况了，整理这篇的时候又把两个办法都试了一编，结果都可用，我：地铁老人看手机.jpg
说不定以后还会遇到类似问题呢，等遇到了再补充吧。
附上文字版：
// 策略一
location / {
root html;
index index.html index.htm;
try_files $uri $uri/ /index.html;
}
// 策略二
location / {
root html;
index index.html index.htm;
try_files $uri $uri/ @router;
}
location @router {
rewrite ^.*$ /index.html last;
}
参考，感谢大佬： Nginx部署Vue项目动态路由刷新404
2、项目重新发布，线上未更新
原因：浏览器有缓存，所以用户通过浏览器访问到的还是旧版本
方法①：修改vue项目配置
打开vue项目，在vue.config.js里添加版本号配置
方法②：修改nginx配置文件
正则匹配所有以htm或html结尾的文件，不进行缓存
附上文字版：
location / {
if ($request_filename ~* .*\.(?:htm|html)$)
{
add_header Cache-Control "no-store, no-cache";
}
root html;
index index.html index.htm;
#try_files $uri $uri/ /index.html;
}
详细的配置项解析请见：【Nginx】nginx配置文件学习
五、vue部署到tomcat的一些参考
标签：index,vue,配置文件,项目,windows,nginx,html From： https://www.cnblogs.com/Yan3399/p/17202859.html