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

caiyongji 发布于2019-07-25 14:38 / 1796人阅读

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

首发于我的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也可以写在前端路由中了

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

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

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

前端项目部署

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

Aceyclee 2019-07-25 14:21 评论0 收藏0
服务器小白的我,是如何成功将 node+mongodb 项目部署在服务器上并进行性能优化的

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

zsy888 2019-06-26 17:54 评论0 收藏0
vue、react等单页面项目应该这样子部署到服务器

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

sumory 2019-07-25 14:08 评论0 收藏0
前端面试题总结（js、html、小程序、React、ES6、Vue、算法、全栈热门视频资源）

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

pumpkin9 2019-08-23 17:12 评论0 收藏0