从vue+nginx刷新404了解nginx的try_files与index区别

背景：

vue+nginx部署后，只有“/”页面路径是正常的，刷新就报nginx 404错误，输入不存在的路径也只刷新nginx 404错误，而不是显示vue自带的404错误页面。

问题解决：

查了下资料知道是nginx的配置引起的
之前的nginx/conf.d/default.conf配置

        location / {
            proxy_http_version 1.1;
            proxy_set_header Upgrade $http_upgrade; #解决跨域问题
            proxy_set_header Connection "upgrade";
            index  index.html index.htm;
        }

修改后的nginx配置

        location / {
            proxy_http_version 1.1;
            proxy_set_header Upgrade $http_upgrade;#解决跨域问题
            proxy_set_header Connection "upgrade";
           try_files $uri $uri/
        }

重启下nginx -s reload。问题解决

问题分析：

index index.htm index.html;
index 就是根目录，也就是只识别“/”结尾的，输入不存在或者刷新页面的路径就直接报nginx的404了，而不会重定向到index.html

try_files 更加可靠， 首先会查找"$uri"下的这个文件，如果不存在会查找$uri/,如果还不存在就会重定向到 /index.html页面。如果最后参数写错了，就会导致500的服务器错误。

一般这两个不要写在同一个location

关于为啥vue项目只配置index刷新会404：
vue + nginx的配置， vue路由必须先加载 index.html 或者XX.js 才能识别到路由

nginx 的index 与 try_files命令具体区别上：
可以参考该篇文章

https://www.chrisyue.com/how-the-hell-nginx-handle-try-files-and-index-directive.html