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

及时行乐

效果

目前有 2 个项目（project1, project2），还有一个 nginx 自带的 index.html，我添加了对应的链接代码（稍后粘贴出来），为了统一管理子项目的路由。
我期望实现下面的效果（假设 ip: localhost，port: 8080）：

1. http://localhost:8080/ 进入最外层的 index.html
   
2. http://localhost:8080/project1 进入项目一
   
3. http://localhost:8080/project2 进入项目二

复制代码

废话不多说，开始配置
Vue 的配置

本人使用的是 vue-cli2 搭建的项目，所以对应的需要修改一些 vue 的配置参数。

config 文件夹下的 index.js，因为是打包，所以我们需要在 build.assetsPublicPath 更改对应项目名，譬如

1. // project1
   
2. module.exports = {
   
3. dev: {},
   
4. build: {
   
5.   assetsPublicPath: '/project1/' // 注意前后的 ‘/'
   
6. }
   
7. }
   
8. 
   
9. // project2
   
10. module.exports = {
    
11. dev: {},
    
12. build: {
    
13.   assetsPublicPath: '/project2/' // 注意前后的 ‘/'
    
14. }
    
15. }

复制代码

config 文件夹下的 prod.env.js 修改成这样：

1. // project1
   
2. module.exports = {
   
3. NODE_ENV: '"production"',
   
4. BASE_API: '"/api/pro1"' // 这里待会与 nginx 配置对应
   
5. }
   
6. 
   
7. // project2
   
8. module.exports = {
   
9. NODE_ENV: '"production"',
   
10. BASE_API: '"/api/pro2"' // 这里待会与 nginx 配置对应
    
11. }

复制代码

[注意] 因为我在项目中使用到了 BASE_API 作为代理的前缀，如果你的不在这边，你需要找到你自己的代理配置
因为每个人的 vue-router 文件配置不一样，你需要找到你的 router 配置文件，内部修改为：

1. // 我采用了 history 模式，hash 模式我没有测试，感觉应该是一样的效果
   
2. // project1
   
3. export default new Router({
   
4. base: '/project1/', // 注意更改你子项目名，这个对应你的 build.assetsPublicPath
   
5. mode: 'history',
   
6. scrollBehavior: () => ({ y: 0 }),
   
7. routes: []
   
8. })
   
9. 
   
10. // project2
    
11. export default new Router({
    
12. base: '/project2/', // 注意更改你子项目名，这个对应你的 build.assetsPublicPath
    
13. mode: 'history',
    
14. scrollBehavior: () => ({ y: 0 }),
    
15. routes: []
    
16. })

复制代码

[注意] 在 npm run build 可能会报错：.tap(*) 之类的，那是因为打包中的 html-webpack-plugin 版本出现了问题，可以执行下面的语句

1. # 这个版本就是你的 package.json 中的版本，只不过你需要重新再指定这个版本
   
2. 
   
3. $ npm i html-webpack-plugin@4.0.0-alpha -D

复制代码

Nginx 的配置

首先我的目录是这样的，无关文件全部以 ... 展示

1. .
   
2. ├─conf
   
3. │ ├─... # 其他文件
   
4. │ └─nginx.conf
   
5. │
   
6. ├─html # 只看这里，其他暂时我没用到
   
7. │ ├─project1
   
8. │ │ └─static
   
9. │ │   ├─css
   
10. │ │   ├─fonts
    
11. │ │   └─js
    
12. │ │     ├─g
    
13. │ │     └─V
    
14. │ ├─project2
    
15. │ │  └─static
    
16. │ │    ├─css
    
17. │ │    ├─fonts
    
18. │ │    └─js
    
19. │ │      ├─g
    
20. │ │      └─V
    
21. │ ├─index.html
    
22. │ └─50x.html
    
23. └─... # 其他文件

复制代码

[解释] 我的 nginx 目录就是原生的，内部包含了一个 html 文件夹，为了省事，我直接使用这个，当然你也可以指定其他的目录，但是目前还请和我一样的配置，后面可以自己定制化。
现在我们开始配置在 conf 文件夹下的 nginx.conf 文件

我是直接在原始文件上修改的，而修改的配置都是在 http 模块中，所以其他的不需要的代码我直接用 ... 代替。

1. # ...
   
2. # 反向代理
   
3. http {
   
4.   include mime.types;
   
5.   default_type application/octet-stream;
   
6. 
   
7.   #log_format main '$remote_addr - $remote_user [$time_local] "$request" '
   
8.   #         '$status $body_bytes_sent "$http_referer" '
   
9.   #         '"$http_user_agent" "$http_x_forwarded_for"';
   
10. 
    
11.   sendfile    on;
    
12.   keepalive_timeout 65;
    
13. 
    
14.   client_max_body_size 20M;
    
15.   client_body_buffer_size 10M;
    
16.   large_client_header_buffers 4 128k;
    
17.   
    
18.   # 这里可以做集群
    
19.   upstream p1_server {
    
20.     server localhost:8081;
    
21.   }
    
22. 
    
23.   # 这里可以做集群
    
24.   upstream p2_server {
    
25.     server localhost:8082;
    
26.   }
    
27. 
    
28.   server {
    
29.     listen 8080;
    
30.     server_name localhost;
    
31.     charset utf-8;
    
32. 
    
33.     proxy_connect_timeout 180;
    
34.     proxy_send_timeout 180;
    
35.     proxy_read_timeout 180;
    
36.     proxy_set_header Host $host;
    
37.     proxy_set_header X-Forwarder-For $remote_addr;
    
38. 
    
39.     root html; # 这里指定刚刚我们的文件夹
    
40.    
    
41.     # 总的项目路由，我偷懒直接写在了同一个文件
    
42.     # 如果有很多可以在配置多个 conf 文件，使用 include 关联进来
    
43.     location / {
    
44.       try_files $uri $uri/ /index.html; # 这里可以理解指定到 html 文件夹下的 index.html
    
45.     }
    
46.    
    
47.     # project1
    
48.     # 这里就是刚刚我们在 vue 项目中 config/index.js 的配置 build.assetsPublicPath，
    
49.     # 也是 vue 项目中配置的 router 中的 base
    
50.     location ^~ /project1 {
    
51.       try_files $uri $uri/ /project1/index.html; # 这里可以理解指定到 html 文件夹下 project1 文件夹 的 index.html
    
52.     }
    
53.    
    
54.     # project2
    
55.     # 这里是项目二的配置
    
56.     location ^~ /project2 { #
    
57.       try_files $uri $uri/ /project2/index.html; # 这里可以理解指定到 html 文件夹下 project2 文件夹 的 index.html
    
58.     }
    
59.    
    
60.     # 这里是 project1 配置需要调用的接口
    
61.     location /api/pro1 { # 这里就是在 vue 项目中 prod.env.js 的配置 BASE_API
    
62.       proxy_redirect off;
    
63.       proxy_set_header Host $host;
    
64.       proxy_set_header X-Real-IP $remote_addr;
    
65.       proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    
66.       proxy_pass http://p1_server; # 此处的 p1_server 对应的上面的配置 upstream p1_server {}，这里可以做集群，我用不到，就简单配置了
    
67.     }
    
68.    
    
69.      # 这里是 project1 配置需要调用的接口
    
70.     location /api/pro2 { # 这里就是在 vue 项目中 prod.env.js 的配置 BASE_API
    
71.       proxy_redirect off;
    
72.       proxy_set_header Host $host;
    
73.       proxy_set_header X-Real-IP $remote_addr;
    
74.       proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    
75.       proxy_pass http://p2_server; # 此处的 p2_server 对应的上面的配置 upstream p2_server {}，这里可以做集群，我用不到，就简单配置了
    
76.     }
    
77. 
    
78.     # ...
    
79.   }
    
80. 
    
81.   # ...
    
82. }

复制代码

最后贴出我修改的 index.html 的代码

因为我是追加的，所以直接贴出我追加的代码，其他的采用 ...

1. ...
   
2. <p><em>Thank you for using nginx.</em></p> <!-- 为了展示位置 -->
   
3. 
   
4. <!-- start: 追加-->
   
5. <hr>
   
6. <a href="/project1" rel="external nofollow" >项目一</a> | <a href="/project2" rel="external nofollow" >项目二</a>
   
7. <!-- end: 追加-->
   
8. 
   
9. </body> <!-- 为了展示位置 -->

复制代码

最后的调试

所有的配置完成，我们就可以启动 nginx 了，这个不会的请自行解决了。
启动成功，我们在浏览器输入 http://localhost:8080 我们就可以看到，
点击项目一，我们可以看到链接变为 http://localhost:8080/project1
点击项目二，链接变为 http://localhost:8080/project2，完全符合我们的期望，那就成功了。
[强行解释一下玄学] 那天配置好了，一启动就报错，弄的我最后放弃了。但是第二天，准备在检查下，一启动竟然全好了，我都一脸懵逼啊！ 如果你也遇到和我一样的问题，先放放，说不定隔天就好了。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持晓枫资讯。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！

123462336

感谢楼主分享。

蒲毓

路过，支持一下