用Nginx部署vue项目页面404解决

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