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

首发于 个人github博客, 欢迎关注
nginx 匹配的 try_file 与前端路由的优先级问题

1. 场景描述:

   1. 访问www.abc.com， 以后点击界面里面的logout，前端路由处理，跳转到www.abc.com/login
   2. 可是登陆页面刷新以后，就显示nginx 404了
   3. 奇怪的地方就在于，为什么退出的时候，重定向到/login的时候，没有报404?
   4. 前端路由重定向到/login逻辑：this.$router.push({name: 'login'});

   5. 贴下前端路由配置

      routes: [
          {
              name: 'home',
              path: '/',
              component: Home,
              meta: { requiresAuth: true },
          },
          {
              path: '/login',
              name: 'login',
              component: Login,
          },
          {
              path: '*',
              component: NotFound,
          }
        ]

   6. 现有nginx配置

      location / {
         root: /var/data/static;
      }

2. 解决：

   1. 为什么点击退出能够正常显示登陆页面？

      由于点击退出，使用的redirect是前端路由 this.$router.push({name: 'login'});来实现的，这时候已经有index.html 和相关的js了，能够直接使用前端路由跳转到 /login路由对应的组件

   2. 为什么刷新的时候显示: nginx/404？

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

   3. 如何解决？

      在nginx的 location /{root xxxpath}中添加 try_file: /index.html的配置

   4. 解释：

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

   5. 同理／404也能够写在前端路由中了