背景

在部署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;
    }
}