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

相关推荐
前端小巷子6 分钟前
Vue3 响应式革命
前端·vue.js·面试
风和日丽 随波逐流30 分钟前
java17学习笔记
笔记·学习
杨荧37 分钟前
基于Python的反诈知识科普平台 Python+Django+Vue.js
大数据·前端·vue.js·python·数据分析
zhoxier6 小时前
elementui el-select 获取value和label 以及 对象的方法
javascript·vue.js·elementui
四岁半儿10 小时前
vue,H5车牌弹框定制键盘包括新能源车牌
前端·vue.js
ReedFoley11 小时前
【笔记】动手学Ollama 第五章 Ollama 在 LangChain 中的使用 - Python 集成
笔记·langchain
HANK15 小时前
KLineChart 绘制教程
前端·vue.js
Juchecar15 小时前
Naive UI 学习指南 - Vue3 初学者完全教程
前端·vue.js
尝尝你的优乐美16 小时前
封装那些Vue3.0中好用的指令
前端·javascript·vue.js
chxii16 小时前
5.4 4pnpm 使用介绍
前端·javascript·vue.js