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

// project1
module.exports = {
 dev: {},
 build: {
  assetsPublicPath: '/project1/' // 注意前后的 ‘/'
 }
}

// project2
module.exports = {
 dev: {},
 build: {
  assetsPublicPath: '/project2/' // 注意前后的 ‘/'
 }
}

// project1
module.exports = {
 NODE_ENV: '"production"',
 BASE_API: '"/api/pro1"' // 這里待會與 nginx 配置對應(yīng)
}

// project2
module.exports = {
 NODE_ENV: '"production"',
 BASE_API: '"/api/pro2"' // 這里待會與 nginx 配置對應(yīng)
}

// 我采用了 history 模式，hash 模式我沒有測試，感覺應(yīng)該是一樣的效果
// project1
export default new Router({
 base: '/project1/', // 注意更改你子項目名，這個對應(yīng)你的 build.assetsPublicPath
 mode: 'history',
 scrollBehavior: () => ({ y: 0 }),
 routes: []
})

// project2
export default new Router({
 base: '/project2/', // 注意更改你子項目名，這個對應(yīng)你的 build.assetsPublicPath
 mode: 'history',
 scrollBehavior: () => ({ y: 0 }),
 routes: []
})

# 這個版本就是你的 package.json 中的版本，只不過你需要重新再指定這個版本

$ npm i html-webpack-plugin@4.0.0-alpha -D

.
├─conf
│ ├─... # 其他文件
│ └─nginx.conf
│
├─html # 只看這里，其他暫時我沒用到 
│ ├─project1
│ │ └─static
│ │   ├─css
│ │   ├─fonts
│ │   └─js
│ │     ├─g
│ │     └─V
│ ├─project2
│ │  └─static
│ │    ├─css
│ │    ├─fonts
│ │    └─js
│ │      ├─g
│ │      └─V
│ ├─index.html
│ └─50x.html
└─... # 其他文件

# ...
# 反向代理
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 關(guān)聯(lián)進來
    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 配置需要調(diào)用的接口
    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 對應(yīng)的上面的配置 upstream p1_server {}，這里可以做集群，我用不到，就簡單配置了
    }
    
     # 這里是 project1 配置需要調(diào)用的接口
    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 對應(yīng)的上面的配置 upstream p2_server {}，這里可以做集群，我用不到，就簡單配置了
    }

    # ...
  }

  # ...
}

...
<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> <!-- 為了展示位置 -->