Nginx笔记-vue项目刷新出现404(try_files和index)

目前的nginx.conf配置:

javascript 复制代码
......

server{

    ......

    ......

    location /xxx{

        root /home/userName/dir

        index index.html

   }

}

部署是成功了,但是有个问题,就是感觉整个前端不会找uri,按F5或者在浏览器输入url都会404,只从vue默认的地方进,才行。

解决方法:

javascript 复制代码
......

server{

    ......

    ......

    location /xxx{

        root /home/userName/dir

        try_files $uri $uri/ /home/userName/dir/index.html

   }

}

原因:

index index.htm index.html;

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

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

以前如果是没有用webpack的项目,可以直接用index,如果是用的webpack最好用try_files

相关推荐
漓漾li1 小时前
每日面试题(2026-05-15)- 前端
前端·vue.js·react.js
前端那点事1 小时前
告别低级冗余!10个前端原生高阶技巧,让代码更优雅、性能更出众
前端·vue.js
hexu_blog2 小时前
前端vue后端java如何实现证件照功能
前端·javascript·vue.js
一只机电自动化菜鸟2 小时前
一建机电备考笔记(36) 焊接技术—焊接方法与工艺(含考频+题型)
笔记·学习·职场和发展·生活·学习方法
Southern Wind2 小时前
谷记账——一个 Vue 3 批次记账 App
前端·javascript·vue.js
小袁说公考2 小时前
公考培训机构2025年度测评:财务健康度与用户体验重构排名格局
大数据·人工智能·经验分享·笔记·其他·重构·ux
许长安2 小时前
gRPC Keepalive 机制
c++·经验分享·笔记·rpc
RainCity3 小时前
Java Swing 自定义组件库分享(五)
java·笔记·后端
脆皮炸鸡7553 小时前
库制作与原理~静态库&静态链接
linux·经验分享·笔记·学习方法
书生的梦3 小时前
《神经网络与深度学习》学习笔记(一)
笔记·深度学习·神经网络