背景

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

1
2
3
4
5
site ---- 项目根目录
├── siteA ---- 项目A
│ └── index.html
└── siteB ---- 项目B
└── index.html

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

Vue 项目配置

路由设置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
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就需要指定绝对路径。

1
2
3
{
publicPath: /siteA/
}

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

Nginx 配置

1
2
3
4
5
6
7
8
9
10
11
12
13
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;
}
}