使用nginx同域名下部署多个vue项目并使用反向代理的方法

目前有 2 个项目（project1, project2），还有一个 nginx 自带的 index.html，我添加了对应的链接代码（稍后粘贴出来），为了统一管理子项目的路由。
我期望实现下面的效果（假设 ip: localhost，port: 8080）：
http://localhost:8080/ 进入最外层的 index.htmlhttp://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.assetspublicpath mode: 'history', scrollbehavior: () => ({ y: 0 }), routes: [] }) // project2 export default new router({ base: '/project2/', // 注意更改你子项目名，这个对应你的 build.assetspublicpath mode: 'history', scrollbehavior: () => ({ y: 0 }), routes: [] })[注意] 在 npm run build 可能会报错：.tap(*) 之类的，那是因为打包中的 html-webpack-plugin 版本出现了问题，可以执行下面的语句
# 这个版本就是你的 package.json 中的版本，只不过你需要重新再指定这个版本 $ npm i html-webpack-plugin@4.0.0-alpha -dnginx 的配置
首先我的目录是这样的，无关文件全部以 … 展示
. ├─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 中的 base location ^~ /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_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://p2_server; # 此处的 p2_server 对应的上面的配置 upstream p2_server {}，这里可以做集群，我用不到，就简单配置了 } # ... } # ... }最后贴出我修改的 index.html 的代码
因为我是追加的，所以直接贴出我追加的代码，其他的采用 …
... <p><em>thank you for using nginx.</em></p> <!-- 为了展示位置 --> <!-- start: 追加--> <hr> <a href=/project1 rel=external nofollow >项目一</a> | <a href=/project2 rel=external nofollow >项目二</a> <!-- end: 追加--> </body> <!-- 为了展示位置 -->最后的调试
所有的配置完成，我们就可以启动 nginx 了，这个不会的请自行解决了。
启动成功，我们在浏览器输入 http://localhost:8080 我们就可以看到，
点击项目一，我们可以看到链接变为 http://localhost:8080/project1
点击项目二，链接变为 http://localhost:8080/project2，完全符合我们的期望，那就成功了。


驱动精灵万能网卡版离线怎么用 驱动精灵万能网卡版离线使用教程
和打不开多次出现程序池总是自动停止
三峡水怪被打捞未解之谜解开？三峡水怪被打捞到底长啥样？
店老板小程序商城
Linux shell脚本是什么
租云端服务器
网站建设：成功网站建设需要考虑的重要因素？
开发微信小程序注意什么