nginx配置多个vue项目

nginx 同时部署多个 vue 项目

假如现在有两个前端项目:chat、 admin。想要通过 ‘/‘ 访问 chat 项目,通过 ‘/admin’ 访问 admin 项目。

修改 publicPath

默认情况下,Vue CLI 会假设你的应用是被部署在一个域名的根路径上,例如 https://www.my-app.com/。如果应用被部署在一个子路径上,你就需要用这个选项指定这个子路径。例如,如果你的应用被部署在 https://www.my-app.com/my-app/,则设置 publicPath/my-app/

chat/vue.config.js:

1
2
3
module.exports = {
publicPath: '/'
}

admin/vue.config.js:

1
2
3
4
5
module.exports = {
publicPath: process.env.NODE_ENV === 'production'
? '/admin/'
: '/'
}
修改 router 配置

添加 publicPath 属性后,所有路由都应该有一个公共前缀 ‘/admin/‘,我们只需配置 base 即可。

admin/router/index.js:

1
2
3
4
const router = createRouter({
history: createWebHistory("/admin/"),
routes
});

chat 项目不需修改。

配置 nginx

nginx 所在目录为:/usr/local/nginx。

在目录下新建文件夹 app,然后将打包后 chat 和 admin 项目放入 app 下。

修改配置文件:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
http {
...
server {
...
location / {
root /usr/local/nginx/app/chat;
index index.html
try_files $uri $uri/ /index.html;
}

location /admin {
alias /usr/local/nginx/app/admin;
index index.html
try_files $uri $uri/ /admin/index.html;
}
}
}