多个 VUE 前端工程部署设置、nginx 代理配置

PS:早期 我只有一个 VUE 前端工程:gentle-vue ,加一个 java 后端工程:gentle ,比较好部署。

现在有 2 个 前端工程 (后端工程也有多个)

前后端工程部署方式都是docker ,这个和早期一样,无需改动。

前后端分离工程实现见文章:前后端分离工程实现 (VUE、JAVA)、附全部源码

单独 VUE工程、java 工程的 docker 方式部署见文章:

Docker 方式 部署 vue 项目 (docker + vue + nginx)

Docker 部署应用、jar 工程 docker 方式部署

 

多个 VUE 前端工程部署、nginx 代理配置

1. 预期效果

前端工程 gentle-vue 访问地址:http://ergouzi.fun/gentle-vue/

前端工程 breeze 访问地址:http://ergouzi.fun/

2. 在 VUE 工程中有 3 个地方要设置。

1) config  -->  index.js -->  build 中 设置访问路径:

多个 VUE 前端工程部署设置、nginx 代理配置

2)router --> index.js 中设置:

多个 VUE 前端工程部署设置、nginx 代理配置

3)index.html  的  <head> 中 新增:<meta base=/gentle-vue/>

多个 VUE 前端工程部署设置、nginx 代理配置

前端工程 gentle 的设置就可以了。再有更多则同样设置即可。

3. nginx 配置:

 多个 VUE 前端工程部署设置、nginx 代理配置

 

到此时 前端工程 gentle 已经可以访问到了。

我的另外一个前端工程是直接放在域名路径下,所以不用作 第 2 步中的设置。只要有第 3 步中的代理,前端工程 breeze 就可以访问到了。

4 . 访问效果:

gentle工程:

多个 VUE 前端工程部署设置、nginx 代理配置

breeze 工程:

多个 VUE 前端工程部署设置、nginx 代理配置

 

OK了。