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;
        }
    }
}