nginx是一款优秀的web反向代理服务软件。
将打包好的dist前端项目，基于nginx完成部署上线。
项目场景：
将
vue项目打包
部署到nginx上面运行
打开nginx的主配置文件：
nginx安装目录/conf/nginx.conf
。
将vueCLI打的项目包（dist目录）交给nginx服务来管理。使得访问某些路径时，可以指向dist/index.html。
问题描述
问题一：
运行时页面白屏。
问题二：
页面可以正常显示，当刷新页面的时候页面报404
错误。
原因分析：
页面白屏分析：我们可以先查看一下nginx下的 logs/error.log 日志文件，确定我的问题是因为项目打包时候路劲配置问题。
页面404分析：我们在将 vue项目打包部署时，地址栏的地址只是 vue的路由，并不是真正的文件目录地址。所有的路由都是依赖于 SPA单页应用的index.html，所以当我们在刷新时，按照地址栏的地址，找不到对应的文件，就产生404。
解决方案
页面404解决：
配置nginx中conf目录下的nginx.conf文件，代码如下：
location / {
# root定义网站根目录 html
root dist;
# index定义网站的首页 html/index.html
index index.html index.htm;
# 避免f5刷新后404
try_files $uri $uri/ /index.html;
}解释：当我们访问一个地址为 http://localhost:8056/dist/AssetChanges的时候先通过alias 确定路径 html/dist，然后通过try_files配置，首先会在html/dist下去找 $uri，也就是login这个文件，这个时候因为没有login文件，就会去找 $uri/ ，也就是 /login/ 这个文件目录，如果还是没找到，就会将其重定向到 @router，在定义的 @router 里，我们将其都指向 /dist 文件夹下的 index.html。这样就成功解决问题
如还不行，杀死进程，重启
重启ngnix
E:\nginx-1.23.4>nginx.exe -s reload