Vue与Nginx路由静态文件冲突的问题

Vue有自己的路由，Nginx 也有自己的路由，当冲突的时候，即客户端访问Nginx配置的路由出问题的时候可以使用Nginx的rewrite方法，当无法找到资源目录的时候跳转到Vue路由的固定页面（一般是index）,配置如下：

## 示例路径：  https://www.7colorlotus.net/manage/index

location ^~ /manage {
  alias   /data/www/manage;
  if (!-e $request_filename) { # 当找不到资源时
       rewrite ^/(.*)/(.*)  /$1/index.html last;
       break;
  }
}

上面的示例代码，可以解决一般vue路由问题，但是如果一个vue项目，既有一级路由目录，也有二级路由目录时，上面的配置方案会导致在访问二级目录时出问题，这个问题，就是rewrite后面的正则表达式问题，他们不能既匹配一级路由目录也不能匹配路由目录，可以采用如下方式匹配：

## 示例路径：  https://www.7colorlotus.net/manage/label/order_list

location ^~ /manage {
    alias   /data/www/manage;
    if (!-e $request_filename) { # 当找不到资源时
         rewrite ^/(.*)/(.*)  /$1/index.html;  # 匹配vue一级路由目录，注意后面没有last，下面没有break
    }
    if (!-e $request_filename) { # 当找不到资源时
         rewrite ^/(.*)/(.*)/(.*)  /$1/index.html last; # 匹配vue二级路由目录，如果不需要匹配三级目录这里可以加上last
         break;
    }
}

贴上Vue路由相关的代码

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

export const constantRoutes = [
  {
    path: '/login',
    component: () => import('@/views/login/index'),
    hidden: true
  },

  {
    path: '/404',
    component: () => import('@/views/404'),
    hidden: true
  },
]

const createRouter = () => new Router({
  mode: 'history', // require service support
  base: process.env.BASE_URL,
  scrollBehavior: () => ({ y: 0 }),
  routes: constantRoutes
})

const router = createRouter()

// Detail see: https://github.com/vuejs/vue-router/issues/1234#issuecomment-357941465
export function resetRouter() {
  const newRouter = createRouter()
  router.matcher = newRouter.matcher // reset router
}

export default router

使用上面的方法，即可解决Vue与Nginx路由静态文件冲突的问题了。关于Nginx配置的问题，可以查看这里Nginx进阶

最后编辑于：2020.06.17 16:17:46