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

相关推荐
Mr Xu_2 小时前
告别冗长 switch-case:Vue 项目中基于映射表的优雅路由数据匹配方案
前端·javascript·vue.js
前端摸鱼匠2 小时前
Vue 3 的toRefs保持响应性:讲解toRefs在解构响应式对象时的作用
前端·javascript·vue.js·前端框架·ecmascript
ASKED_20193 小时前
Langchain学习笔记一 -基础模块以及架构概览
笔记·学习·langchain
Dxy12393102163 小时前
413 Request Entity Too Large 原因与解决方案
nginx
Lois_Luo3 小时前
Obsidian + Picgo + Aliyun OSS 实现笔记图片自动上传图床
笔记·oss·图床
CYpdpjRnUE3 小时前
光储一体机仿真模型搭建之旅
nginx
(❁´◡`❁)Jimmy(❁´◡`❁)3 小时前
Exgcd 学习笔记
笔记·学习·算法
傻小胖3 小时前
21.ETH-权益证明-北大肖臻老师客堂笔记
笔记·区块链
未来之窗软件服务4 小时前
未来之窗昭和仙君(六十五)Vue与跨地区多部门开发—东方仙盟练气
前端·javascript·vue.js·仙盟创梦ide·东方仙盟·昭和仙君
phltxy5 小时前
Vue 核心特性实战指南:指令、样式绑定、计算属性与侦听器
前端·javascript·vue.js