背景:

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

Logo

前往低代码交流专区

更多推荐