避坑指北：vue使用history路由

背景

在部署 vue 项目时，路由模式默认使用哈希(hash)模式，但是由于某些原因，要求使用 history 模式。但是对于现在的部署环境则遇到了一个问题。首先是目录：

site ---- 项目根目录
 ├── siteA ---- 项目A
 │   └── index.html
 └── siteB ---- 项目B
     └── index.html

即项目放在了同一个根目录下，那么此时我们就需要调整 vue 的一些配置。具体如下

Vue 项目配置

路由设置

export default [
  {
    path: '/siteA',
    name: 'siteARoot',
    component: () => import('@/views/siteA/index'),
    children: [
      {
        path: 'index',
        name: 'Index',
        meta: {
          title: 'siteA'
        },
        component: () => import('@/views/siteA/index')
      }
    ]
  }
]

即路由需要包含此项目部署时所需要存放的目录名。

打包配置

打包配置时由于使用了 history 模式，那么publicPath就需要指定绝对路径。

{
    publicPath: /siteA/
}

这里设置的绝对路径即项目配置时的目录名，可通过环境变量进行动态修改。

Nginx 配置

server {
    listen        10085;
    server_name  localhost;
    root   "D:/code/test/site/";
    location /siteA {
        index index.html;
        try_files $uri $uri/ /siteA/index.html;
    }
    location /siteB {
        index index.html;
        try_files $uri $uri/ /siteB/index.html;
    }
}