从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 Upgra
背景:
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
更多推荐
所有评论(0)