摘要:发现路径下是静态文件的目录,不是的目录没有文件,就会规则,返回这样浏览器拿到之后,开始加载其中的前端路由部分这时候就会在前端路由中找到匹配规则同理也可以写在前端路由中了
首发于我的github博客, 欢迎关注
nginx 匹配的 try_file 与前端路由的优先级问题
场景描述:
访问www.abc.com, 之后点击界面里面的logout,前端路由处理,跳转到www.abc.com/login
但是登录页面刷新之后,就显示nginx 404了
奇怪的地方就在于,为何退出的时候,重定向到/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也可以写在前端路由中了
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/40324.html
摘要:前言本文讲解的是做为前端开发人员,对服务器的了解还是小白的我,是如何一步步将项目部署在阿里云的服务器上,并进行性能优化,达到页面秒内看到,秒内看到首屏内容的。搭建的项目是采用了主流的前后端分离思想的,这里只讲服务器环境搭建与性能优化。 showImg(https://segmentfault.com/img/remote/1460000017143281); 前言 本文讲解的是:做为前...
摘要:服务端渲染等服务端渲染框架构建的项目部署到服务器,并用守护程序最近好多伙伴说,我用做的项目本地是可以的,但部署到服务器遇到好多问题资源找不到,直接访问页面空白,刷新当前路由。。。 服务端渲染:next.js、nuxt.js等服务端渲染框架构建的项目部署到服务器,并用PM2守护程序 最近好多伙伴说,我用vue做的项目本地是可以的,但部署到服务器遇到好多问题:资源找不到,直接访问inde...
摘要:并总结经典面试题集各种算法和插件前端视频源码资源于一身的文档,优化项目,在浏览器端的层面上提升速度,帮助初中级前端工程师快速搭建项目。 本文是关注微信小程序的开发和面试问题,由基础到困难循序渐进,适合面试和开发小程序。并总结vue React html css js 经典面试题 集各种算法和插件、前端视频源码资源于一身的文档,优化项目,在浏览器端的层面上提升速度,帮助初中级前端工程师快...
阅读 2283·2023-04-25 14:29
阅读 1427·2021-11-22 09:34
阅读 2684·2021-11-22 09:34
阅读 3371·2021-11-11 10:59
阅读 1761·2021-09-26 09:46
阅读 2186·2021-09-22 16:03
阅读 1900·2019-08-30 12:56
阅读 463·2019-08-30 11:12