资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往
首页/文章专栏/42. Vue、React 等前端项目部署，刷新 404 问题解决方案

42. Vue、React 等前端项目部署，刷新 404 问题解决方案

caiyongji / 1868人阅读

摘要：发现路径下是静态文件的目录，不是的目录没有文件，就会规则，返回这样浏览器拿到之后，开始加载其中的前端路由部分这时候就会在前端路由中找到匹配规则同理也可以写在前端路由中了

</>复制代码 
  1. 首发于我的github博客, 欢迎关注
    nginx 匹配的 try_file 与前端路由的优先级问题

场景描述:

访问www.abc.com， 之后点击界面里面的logout，前端路由处理，跳转到www.abc.com/login

但是登录页面刷新之后，就显示nginx 404了

奇怪的地方就在于，为何退出的时候，重定向到/login的时候，没有报404?

前端路由重定向到/login逻辑：this.$router.push({name: "login"});

贴下前端路由配置

</>复制代码 
  1.   routes: [
  2.     {
  3.         name: "home",
  4.         path: "/",
  5.         component: Home,
  6.         meta: { requiresAuth: true },
  7.     },
  8.     {
  9.         path: "/login",
  10.         name: "login",
  11.         component: Login,
  12.     },
  13.     {
  14.         path: "*",
  15.         component: NotFound,
  16.     }
  17.   ]

现有nginx配置

</>复制代码 
  1. location / {
  2.    root: /var/data/static;
  3. }

解决：

为何点击退出可以正常显示登录页面？

</>复制代码 
  1. 因为点击退出，使用的redirect是前端路由this.$router.push({name: "login"});来实现的，这时候已经有index.html 和相关的js了，可以直接使用前端路由跳转到/login路由对应的组件

为何刷新的时候显示: nginx/404？

</>复制代码 
  1. 因为刷新的时候，会先向服务器请求xxxx.com/login，
  2. 这时候服务器的nginx配置中没有关于/login路径的配置，直接报nginx/404的错误

如何解决？

</>复制代码 
  1. 在nginx的location /{root  xxxpath}中添加try_file: /index.html的配置

解释：

</>复制代码 
  1. nginx进行匹配路径的时候，发现没有/login的路径，便会转到/路径处理。
  2. 发现root路径下(是静态文件的root目录，不是linux的root目录)没有login文件，就会try_file规则，返回index.html,
  3. 这样浏览器拿到index.html 之后，开始加载其中的前端路由部分
  4. 这时候/login就会在前端路由中找到匹配规则

同理／404也可以写在前端路由中了

GPU云服务器 云服务器 怎么部署react项目 腾讯云服务器部署vue项目 前端web项目部署到云服务器 cdn刷新缓存报404

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/40324.html

相关文章

  • 前端项目部署

    摘要：前端项目部署之前很少接触前端项目的部署，这次为了更全面的学习就在本机上装了一个虚拟机上，在虚拟机上练习了如何把一个写的项目部署到这个虚拟机的服务器上。 前端项目部署 之前很少接触前端项目的部署，这次为了更全面的学习就在本机上装了一个虚拟机上，在虚拟机上练习了如何把一个 react 写的 spa 项目部署到这个虚拟机的服务器上。由于 linux 也是刚接触不久，所以整个过程还是遇到了很多...

    Aceyclee 评论0 收藏0

  • 服务器小白的我,是如何成功将 node+mongodb 项目部署在服务器上并进行性能优化的

    摘要：前言本文讲解的是做为前端开发人员，对服务器的了解还是小白的我，是如何一步步将项目部署在阿里云的服务器上，并进行性能优化，达到页面秒内看到，秒内看到首屏内容的。搭建的项目是采用了主流的前后端分离思想的，这里只讲服务器环境搭建与性能优化。 showImg(https://segmentfault.com/img/remote/1460000017143281); 前言 本文讲解的是：做为前...

    zsy888 评论0 收藏0

  • vue、react等单页面项目应该这样子部署到服务器

    摘要：服务端渲染等服务端渲染框架构建的项目部署到服务器，并用守护程序最近好多伙伴说，我用做的项目本地是可以的，但部署到服务器遇到好多问题资源找不到，直接访问页面空白，刷新当前路由。。。 服务端渲染：next.js、nuxt.js等服务端渲染框架构建的项目部署到服务器，并用PM2守护程序 最近好多伙伴说，我用vue做的项目本地是可以的，但部署到服务器遇到好多问题：资源找不到，直接访问inde...

    sumory 评论0 收藏0

  • 前端面试题总结（js、html、小程序、React、ES6、Vue、算法、全栈热门视频资源）

    摘要：并总结经典面试题集各种算法和插件前端视频源码资源于一身的文档，优化项目，在浏览器端的层面上提升速度，帮助初中级前端工程师快速搭建项目。 本文是关注微信小程序的开发和面试问题，由基础到困难循序渐进，适合面试和开发小程序。并总结vue React html css js 经典面试题 集各种算法和插件、前端视频源码资源于一身的文档，优化项目，在浏览器端的层面上提升速度，帮助初中级前端工程师快...

    pumpkin9 评论0 收藏0

发表评论

登陆后可评论

0条评论

caiyongji

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<