脚本宝典收集整理的这篇文章主要介绍了42. Vue、React 等前端项目部署,刷新 404 问题解决方案,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
首发于我的github博客, 欢迎关注
nginx 匹配的 try_file 与前端路由的优先级问题
场景描述:
www.abc.com
, 之后点击界面里面的logout
,前端路由处理,跳转到www.abc.com/login
/login
的时候,没有报404?/login
逻辑:this.$router.push({name: 'login'});
贴下前端路由配置
routes: [
{
name: 'home',
path: '/',
component: Home,
meta: { requiresAuth: true },
},
{
path: '/login',
name: 'login',
component: Login,
},
{
path: '*',
component: NotFound,
}
]
现有nginx配置
location / {
root: /var/data/static;
}
解决:
为何点击退出可以正常显示登录页面?
因为点击退出,使用的redirect是前端路由this.$router.push({name: 'login'});
来实现的,这时候已经有index.html 和相关的js了,可以直接使用前端路由跳转到/login
路由对应的组件
为何刷新的时候显示: nginx/404?
- 因为刷新的时候,会先向服务器请求xxxx.com/login,
- 这时候服务器的nginx配置中没有关于/login路径的配置,直接报nginx/404的错误
如何解决?
在nginx的location /{root xxxpath}
中添加try_file: /index.html
的配置
解释:
- nginx进行匹配路径的时候,发现没有
/login
的路径,便会转到/
路径处理。- 发现
root
路径下(是静态文件的root目录,不是linux的root目录)没有login
文件,就会try_file
规则,返回index.html,- 这样浏览器拿到index.html 之后,开始加载其中的前端路由部分
- 这时候/login就会在前端路由中找到匹配规则
/404
也可以写在前端路由中了以上是脚本宝典为你收集整理的42. Vue、React 等前端项目部署,刷新 404 问题解决方案全部内容,希望文章能够帮你解决42. Vue、React 等前端项目部署,刷新 404 问题解决方案所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。