多个 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 中设置访问路径：

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

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

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

3. nginx 配置：

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

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

4 . 访问效果：

gentle工程：

breeze 工程：

OK了。

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

vue 前端项目部署阿里云服务器
vue 前端项目部署阿里云服务器 one 前期准备 two 代码打包扔服务器 one 前期准备首先两个软件应该下载(Xftp Xshell),如果有其他类似的软件也可以. 打开xftp,新建一个会 ...
Nginx 部署、反向代理配置、负载均衡
Nginx 部署.反向代理配置.负载均衡最近我们的angular项目部署,我们采用的的是Nginx,下面对Nginx做一个简单的介绍. 为什么选择Nginx 轻:相比于Apache,同样的web服务 ...
Nginx 代理配置
Nginx 代理配置其他配置语法---缓冲区配置语法: Syntax : proxy_buffering on|off; Default :proxy_bufferiong ...
nginx代理配置总和
代理后台服务后,提供给前端使用 nginx代理设置(此处使用65服务器的nginx地址,端口号为80,当端口号为80时可默认不写),修改nginx.conf配置文件 location /oauth_s ...
简单的Nginx代理配置
nginx代理配置 1.下载phpstudy 下载地址:Windows版phpstudy下载 - 小皮面板(phpstudy) 安装后 2.设置打开nginx配置文件 nginx.conf 3.复制配 ...
Vue项目打包部署到Nginx服务器步骤总结
前期准备工作: 1. 准备一台服务器: 2. 根据服务器的系统环境安装配置Nginx; 3. 了解Nginx的配置文件,了解常用的linux系统操作命令 4. 进行Vue项目的打包部署因为我只是单纯 ...
多个前端项目部署在nginx中同一个server下
多个前端项目部署在同一个域名下在vue.config.js中设置 publicPath: '/web/' 在路由index.js中设置 base:'/web/' 在index.html中加入修改N ...
Vue打包后部署使用Nginx
在开发模式下,请求后台接口的时候,vue直接在vue.config.js里进行proxy的跨域配置,比如: 发布在Nginx上以后,这个vue.config.js里的跨域配置就没用了,因为他只在开发环 ...
vue项目如何部署到nginx服务器
mac下安装nginx 安装工具: homebrew(还没用过的小伙伴可以点链接进行了解或者自行百度) 步骤: 1.打开终端,习惯性命令:更新 brew update 2.终端继续执行命令: brew ...

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

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

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

最新文章

热门文章