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

刺骨的言语ヽ痛彻心扉 2022-01-28 16:15 414阅读 0赞

[前些天发现了一个巨牛的人工智能学习网站，通俗易懂，风趣幽默，忍不住分享一下给大家。点击跳转到教程。][Link 1]

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

现在有 2 个 前端工程 （后端工程也有多个）

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

前后端分离工程实现见文章：[前后端分离工程实现 （VUE、JAVA）、附全部源码][_VUE_JAVA]

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

[Docker 方式 部署 vue 项目 （docker + vue + nginx）][Docker _ _ vue _ _docker _ vue _ nginx]

[Docker 部署应用、jar 工程 docker 方式部署][Docker _jar _ docker]

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

1. 预期效果

前端工程 gentle-vue 访问地址：[http://ergouzi.fun/gentle-vue/][http_ergouzi.fun_gentle-vue]

前端工程 breeze 访问地址：[http://ergouzi.fun/][http_ergouzi.fun]

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

1） config  -->  index.js -->  build 中 设置访问路径：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTEzMTQ0NDI_size_16_color_FFFFFF_t_70][]

2）router --> index.js 中设置：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTEzMTQ0NDI_size_16_color_FFFFFF_t_70 1][]

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTEzMTQ0NDI_size_16_color_FFFFFF_t_70 2][]

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

3. nginx 配置：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTEzMTQ0NDI_size_16_color_FFFFFF_t_70 3][]

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

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

4 . 访问效果：

gentle工程：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTEzMTQ0NDI_size_16_color_FFFFFF_t_70 4][]

breeze 工程：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTEzMTQ0NDI_size_16_color_FFFFFF_t_70 5][]

OK了。

[Link 1]: https://www.captainai.net/jiangyu1013/
[_VUE_JAVA]: https://blog.csdn.net/jiangyu1013/article/details/88847751
[Docker _ _ vue _ _docker _ vue _ nginx]: https://blog.csdn.net/jiangyu1013/article/details/84572582
[Docker _jar _ docker]: https://blog.csdn.net/jiangyu1013/article/details/81988342
[http_ergouzi.fun_gentle-vue]: http://ergouzi.fun/gentle-vue/
[http_ergouzi.fun]: http://ergouzi.fun/#/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTEzMTQ0NDI_size_16_color_FFFFFF_t_70]: /images/20220128/c9e926e2a76441bf9237ab71be85f235.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTEzMTQ0NDI_size_16_color_FFFFFF_t_70 1]: /images/20220128/b0c74d5905ab48f2b98f7af0278d8863.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTEzMTQ0NDI_size_16_color_FFFFFF_t_70 2]: /images/20220128/9632d36f73f14854b23ef756694cec3f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTEzMTQ0NDI_size_16_color_FFFFFF_t_70 3]: /images/20220128/b24da6acacc3475e84b41df9c8ec4ec9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTEzMTQ0NDI_size_16_color_FFFFFF_t_70 4]: /images/20220128/9857bfccf0b84b068d7120f80224d867.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTEzMTQ0NDI_size_16_color_FFFFFF_t_70 5]: /images/20220128/6aace305f8a74d57b8a941476d634d08.png