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

相关推荐
bearpping6 小时前
Nginx 配置:alias 和 root 的区别
前端·javascript·nginx
智者知已应修善业7 小时前
【proteus中lm339电压滞回比较器达到三角波转换成方波】2023-4-13
驱动开发·经验分享·笔记·硬件架构·proteus·硬件工程
551只玄猫7 小时前
新编大学德语1第三版笔记 第5课Essen und Trinken
笔记·学习笔记·德语·外语·德语a1·自学德语·新编大学德语
战南诚8 小时前
VUE中,keep-alive组件与钩子函数的生命周期
前端·vue.js
霍理迪8 小时前
Vue的响应式和生命周期
前端·javascript·vue.js
不只会拍照的程序猿8 小时前
《嵌入式AI筑基笔记02:Python数据类型01,从C的“硬核”到Python的“包容”》
人工智能·笔记·python
中屹指纹浏览器12 小时前
2026指纹浏览器性能瓶颈分析与优化技巧
经验分享·笔记
肠胃炎12 小时前
挂载方式部署项目
服务器·前端·nginx
雷工笔记13 小时前
随笔|走!跳楼去!
笔记
SuperEugene13 小时前
Vue3 模板语法规范实战:v-if/v-for 不混用 + 表达式精简,避坑指南|Vue 组件与模板规范篇
开发语言·前端·javascript·vue.js·前端框架