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

首先，我们需要在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;
    }
}

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