通常我们希望一个域名,可以部署多个网站,此时,我们将需要利用上下文进行网站的区分。

首先,我们需要在Vue项目的 vue.config.js 进行配置上下文。

vue.config.js

1
2
3
4
5
6
7
# 在启动命令或打包命中,用 --basedir=/xxx/ 进行动态指定上下文,其中xxx代表为上下文名称
const basedir = process.env.npm_config_basedir || "/";
module.exports = {
...,
publicPath: basedir,
...
};

其次,我们需要在Vue项目的 router.js 进行配置上下文。

router.js (vue-router 3.x)

1
2
3
4
5
6
7

# 先通过以下语句获取上下文
const basedir = process.env.BASE_URL;
const router = new Router({
base: basedir,
...
});

最后,就是 Nginx 的配置了,我们在nginx配置文件中,进行由下配置即可:

1
2
3
4
5
6
7
8
9
10
11
12
13

server {

...;
...;

# xxx 代表上下文名称
location ^~/xxx {
# 打包后项目存放路径
alias /opt/a/b/c/dist/;
try_files $uri $uri/ /xxx/index.html;
}
}

以上,就是部署相关需要适配修改的配置内容。