使用 nginx 同域名下部署多个 vue 项目,并使用反向代理
花了 3 天时间,趁着我还没有忘记,先记录下来
效果
目前有 2 个项目(project1
, project2
),还有一个 nginx
自带的 index.html
,我添加了对应的链接代码(稍后粘贴出来),为了统一管理子项目的路由。
我期望实现下面的效果(假设 ip: localhost
,port: 8080
):
http://localhost:8080/ 进入最外层的 index.html
http://localhost:8080/project1 进入项目一
http://localhost:8080/project2 进入项目二
废话不多说,开始配置
Vue 的配置
本人使用的是
vue-cli2
搭建的项目,所以对应的需要修改一些vue
的配置参数。
- config 文件夹下的 index.js,因为是打包,所以我们需要在
build.assetsPublicPath
更改对应项目名,譬如
// project1
module.exports = {dev: {},build: {assetsPublicPath: '/project1/' // 注意前后的 ‘/’}
}// project2
module.exports = {dev: {},build: {assetsPublicPath: '/project2/' // 注意前后的 ‘/’}
}
- config 文件夹下的 prod.env.js 修改成这样:
// project1
module.exports = {NODE_ENV: '"production"',BASE_API: '"/api/pro1"' // 这里待会与 nginx 配置对应
}// project2
module.exports = {NODE_ENV: '"production"',BASE_API: '"/api/pro2"' // 这里待会与 nginx 配置对应
}
[注意] 因为我在项目中使用到了 BASE_API
作为代理的前缀,如果你的不在这边,你需要找到你自己的代理配置
- 因为每个人的
vue-router
文件配置不一样,你需要找到你的 router 配置文件,内部修改为:
// 我采用了 history 模式,hash 模式我没有测试,感觉应该是一样的效果
// project1
export default new Router({base: '/project1/', // 注意更改你子项目名,这个对应你的 build.assetsPublicPathmode: 'history',scrollBehavior: () => ({ y: 0 }),routes: []
})// project2
export default new Router({base: '/project2/', // 注意更改你子项目名,这个对应你的 build.assetsPublicPathmode: 'history',scrollBehavior: () => ({ y: 0 }),routes: []
})
[注意] 在 npm run build
可能会报错:.tap(*)
之类的,那是因为打包中的 html-webpack-plugin
版本出现了问题,可以执行下面的语句
# 这个版本就是你的 package.json 中的版本,只不过你需要重新再指定这个版本$ npm i html-webpack-plugin@4.0.0-alpha -D
Nginx 的配置
- 首先我的目录是这样的,无关文件全部以
...
展示
.
├─conf
│ ├─... # 其他文件
│ └─nginx.conf
│
├─html # 只看这里,其他暂时我没用到
│ ├─project1
│ │ └─static
│ │ ├─css
│ │ ├─fonts
│ │ └─js
│ │ ├─g
│ │ └─V
│ ├─project2
│ │ └─static
│ │ ├─css
│ │ ├─fonts
│ │ └─js
│ │ ├─g
│ │ └─V
│ ├─index.html
│ └─50x.html
└─... # 其他文件
[解释] 我的 nginx
目录就是原生的,内部包含了一个 html
文件夹,为了省事,我直接使用这个,当然你也可以指定其他的目录,但是目前还请和我一样的配置,后面可以自己定制化。
- 现在我们开始配置在
conf
文件夹下的nginx.conf
文件
我是直接在原始文件上修改的,而修改的配置都是在 http
模块中,所以其他的不需要的代码我直接用 ...
代替。
# ...
# 反向代理
http {include mime.types;default_type application/octet-stream;#log_format main '$remote_addr - $remote_user [$time_local] "$request" '# '$status $body_bytes_sent "$http_referer" '# '"$http_user_agent" "$http_x_forwarded_for"';sendfile on;keepalive_timeout 65;client_max_body_size 20M;client_body_buffer_size 10M;large_client_header_buffers 4 128k;# 这里可以做集群upstream p1_server {server localhost:8081;}# 这里可以做集群upstream p2_server {server localhost:8082;}server {listen 8080;server_name localhost;charset utf-8;proxy_connect_timeout 180;proxy_send_timeout 180;proxy_read_timeout 180;proxy_set_header Host $host;proxy_set_header X-Forwarder-For $remote_addr;root html; # 这里指定刚刚我们的文件夹# 总的项目路由,我偷懒直接写在了同一个文件# 如果有很多可以在配置多个 conf 文件,使用 include 关联进来location / {try_files $uri $uri/ /index.html; # 这里可以理解指定到 html 文件夹下的 index.html}# project1# 这里就是刚刚我们在 vue 项目中 config/index.js 的配置 build.assetsPublicPath,# 也是 vue 项目中配置的 router 中的 baselocation ^~ /project1 {try_files $uri $uri/ /project1/index.html; # 这里可以理解指定到 html 文件夹下 project1 文件夹 的 index.html}# project2# 这里是项目二的配置location ^~ /project2 { # try_files $uri $uri/ /project2/index.html; # 这里可以理解指定到 html 文件夹下 project2 文件夹 的 index.html}# 这里是 project1 配置需要调用的接口location /api/pro1 { # 这里就是在 vue 项目中 prod.env.js 的配置 BASE_API proxy_redirect off;proxy_set_header Host $host;proxy_set_header X-Real-IP $remote_addr;proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;proxy_pass http://p1_server; # 此处的 p1_server 对应的上面的配置 upstream p1_server {},这里可以做集群,我用不到,就简单配置了}# 这里是 project1 配置需要调用的接口location /api/pro2 { # 这里就是在 vue 项目中 prod.env.js 的配置 BASE_APIproxy_redirect off;proxy_set_header Host $host;proxy_set_header X-Real-IP $remote_addr;proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;proxy_pass http://p2_server; # 此处的 p2_server 对应的上面的配置 upstream p2_server {},这里可以做集群,我用不到,就简单配置了}# ...}# ...
}
- 最后贴出我修改的
index.html
的代码
因为我是追加的,所以直接贴出我追加的代码,其他的采用 ...
...
<p><em>Thank you for using nginx.</em></p> <!-- 为了展示位置 --><!-- start: 追加-->
<hr>
<a href="/project1">项目一</a> | <a href="/project2">项目二</a>
<!-- end: 追加--></body> <!-- 为了展示位置 -->
最后的调试
所有的配置完成,我们就可以启动 nginx
了,这个不会的请自行解决了。
启动成功,我们在浏览器输入 http://localhost:8080
我们就可以看到,
点击项目一,我们可以看到链接变为 http://localhost:8080/project1
点击项目二,链接变为 http://localhost:8080/project2
,完全符合我们的期望,那就成功了。
[强行解释一下玄学] 那天配置好了,一启动就报错,弄的我最后放弃了。但是第二天,准备在检查下,一启动竟然全好了,我都一脸懵逼啊! 如果你也遇到和我一样的问题,先放放,说不定隔天就好了。
原文地址
使用 nginx 同域名下部署多个 vue 项目,并使用反向代理相关推荐
- nginx同一域名下部署多个vue项目
-----------nginx同一域名下部署多个vue项目------------------------ 1.目的 实现nginx服务端同一域名下部署多个vue项目. 2. 实例 pmobile项 ...
- 同一域名下部署多个vue项目
同一域名下部署多个vue项目 问题说明 现在有这么一个需求,有两个 vue 项目, vue1和 vue2 ,如何让 http://www.baidu.com/vue1/ 作为 vue1 项目的根路 ...
- 同一域名端口下,通过nginx部署多个vue项目
情景介绍 服务器上80端口已部署一套vue项目,现在乃至未来还可能要部署n个前端项目,而已部署的项目的nginx的配置不能修改 项目配置 假设需要部署的第二个vue项目是放在服务器的 "p ...
- 阿里云 部署SpringBoot和Vue项目 亲测可用(第一次部署经验贴)
阿里云 部署SpringBoot和Vue项目 亲测可用!第一次部署经验贴! 前言:与伙伴一起写了一个项目,但是由于老师要我们部署到服务器上,而我从未有部署过,查看了csdn很多博客,试了好多篇,才成功 ...
- Windows下的Nginx部署React项目及解决反向代理跨域问题等-20.8.1更新
文章目录 1. 概述 2. 优点 3. 为什么选择Nginx 4. 下载 5. 安装 6. 配置参数详细说明 7. 命令行参数 7.1 启动nginx 7.2 重启nginx--重新加载配置 7.3 ...
- php资源文件html,nginx 同一域名下分目录配置显示php,html,资源文件
安装上nginx后 注意后nginx.conf 中的这么几行 error_log /var/log/nginx/error.log; 日志,这个很有用 include /etc/nginx/conf ...
- 通过nginx在window下部署项目
1-安装nginx 首先,进入nginx 的官网,下载nginx,安装nginx 通过,https://nginx.org/ 链接进入 Mainline version:开发版,mainline 目前 ...
- java 同域名下怎么访问同事的项目_喜大普奔,两个开源的前后端分离项目可以在线体验了...
折腾了一周的域名备案昨天终于搞定了. 松哥第一时间想到赶紧把微人事和V 部落上去,我知道很多小伙伴已经等不及了. 1. 也曾经上过线 其实这两个项目当时刚做好的时候,我就把它们部署到服务器上了,以帮助 ...
- 【Flask】Nginx / Gunicorn入门:部署你的Flask项目
什么是Nginx? 参考:Nginx入门 什么是反向代理呢? 我们很多人应该都用过淘宝,要知道每天同时连接到淘宝网站的访问人数已经爆表,单个服务器远远不能满足人民日益增长的购买欲望了,此时就出现了一个 ...
最新文章
- Visual Studio调试之符号文件
- decisiontreeregressor_机器学习算法-Decision Tree
- Simple Python Dictionary :)
- JVM 参数及各部分含义(转)
- 参加了 Go 贡献者大会
- 【转】回调函数,函数指针与函数对象
- 惠普电脑怎么截屏_惠普(HP)暗影精灵6游戏台式电脑主机怎么样?配置和使用体验测评-最新资讯...
- linux 设置时钟 教程,Linux hwclock命令参数及用法详解--Linux显示/设置硬件时钟命令...
- 如何让NN分类输出[0,1]的值,并且相加等于1
- Tensorflow——拟合直线
- 句子反转(小米2017秋招真题)
- ASC18世界超算大赛的三大变化与一大不变丨Xtecher观察
- Godaddy域名被盗诉讼全过程 法院起诉成功拿回域名
- 选型宝访谈:怎样构建端到端的IT透视能力?
- [Android]在Android TV中实现组合按键的监听触发功能
- Python之安装MySQLdb
- 无域控AlwaysOn实战教学 (一)
- DD-WRT 最新版!V24 SP2
- css实现滚动条兼容mac和windows
- c语言函数指针封装函数,C语言之函数指针、回调函数的使用
热门文章
- 七猫php面试,七猫面试 - osc_2frv0wjp的个人空间 - OSCHINA - 中文开源技术交流社区...
- armv8 汇编 绝对地址赋值_ARMv8带来的变化
- 检查集群状态命令_巨杉数据库SequoiaDB巨杉Tech | 四步走,快速诊断数据库集群状态...
- c 语言乘法代码,C++实现大数乘法算法代码
- python怎么读excelsheet_python3 excle(python怎么读写excel文件)
- php mysql 主从复制_Windows 环境下,MySQL 的主从复制和主主复制
- java joptionpanel_JOptionPane用法--java
- No IP specified. Please specify IP with ‘objects’
- 【 MATLAB 】Signal Processing Toolbox Functions - By Category
- linux iptables规则组成及用法