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

相关推荐
范纹杉想快点毕业20 小时前
ZYNQ PS 端 UART 接收数据数据帧(初学者友好版)嵌入式编程 C语言 c++ 软件开发
c语言·笔记·stm32·单片机·嵌入式硬件·mcu·51单片机
华仔啊21 小时前
Vue3 的 ref 和 reactive 到底用哪个?90% 的开发者都选错了
javascript·vue.js
茯苓gao1 天前
STM32G4 电流环闭环
笔记·stm32·单片机·嵌入式硬件·学习
easy20201 天前
机器学习的本质:从跑模型到真正解决问题
笔记·学习·机器学习
先锋队长1 天前
linux系统搭建nacos集群,并通过nginx实现负载均衡
linux·nginx·负载均衡
IT古董1 天前
Vue + Vite + Element UI 实现动态主题切换:基于 :root + SCSS 变量的最佳实践
vue.js·ui·scss
汇能感知1 天前
摄像头模组在智能家居设备中的应用
经验分享·笔记·科技
shizidushu1 天前
Graph RAG论文阅读笔记
论文阅读·笔记·graphrag
liweiweili1261 天前
记录线上数据上传提示网络连接异常的故障
nginx·tomcat
百思可瑞教育1 天前
使用UniApp实现一个AI对话页面
javascript·vue.js·人工智能·uni-app·xcode·北京百思可瑞教育·百思可瑞教育