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

本文固定链接: http://www.js-code.com/vue-js/vue-js_16807.html