How to deploy multiple Vue projects under the same domain name using nginx and use reverse proxy

//project1
module.exports = {
 dev: {},
 build: {
  assetsPublicPath: '/project1/' // Note the leading and trailing '/'
 }
}

//project2
module.exports = {
 dev: {},
 build: {
  assetsPublicPath: '/project2/' // Note the leading and trailing '/'
 }
}

//project1
module.exports = {
 NODE_ENV: '"production"',
 BASE_API: '"/api/pro1"' // This will correspond to the nginx configuration later}

//project2
module.exports = {
 NODE_ENV: '"production"',
 BASE_API: '"/api/pro2"' // This will correspond to the nginx configuration later}

// I used the history mode, I didn't test the hash mode, I think it should have the same effect // project1
export default new Router({
 base: '/project1/', // Note to change your subproject name, this corresponds to your build.assetsPublicPath
 mode: 'history',
 scrollBehavior: () => ({ y: 0 }),
 routes: []
})

//project2
export default new Router({
 base: '/project2/', // Note to change your subproject name, this corresponds to your build.assetsPublicPath
 mode: 'history',
 scrollBehavior: () => ({ y: 0 }),
 routes: []
})

# This version is the version in your package.json, but you need to re-specify this version$ npm i [email protected] -D

.
├─conf
│ ├─... # Other files│ └─nginx.conf
│
├─html # Just look here, I don’t use the others for now│ ├─project1
│ │ └─static
│ │ ├─css
│ │ ├─fonts
│ │ └─js
│ │ ├─g
│ │ └─V
│ ├─project2
│ │ └─static
│ │ ├─css
│ │ ├─fonts
│ │ └─js
│ │ ├─g
│ │ └─V
│ ├─index.html
│ └─50x.html
└─... # Other files

# ...
# Reverse proxy 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;
  
  # This can be used as a cluster upstream p1_server {
    server localhost:8081;
  }

  # This can be used as a cluster 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; # Here we specify our folder # The total project route, I was lazy and wrote it directly in the same file # If there are many, you can configure multiple conf files and use include to associate them location / {
      try_files $uri $uri/ /index.html; # Here you can understand that it is specified to the index.html in the html folder
    }
    
    #project1
    # Here is the build.assetsPublicPath configuration of config/index.js in the vue project just now.
    # It is also the base of the router configured in the Vue project
    location ^~ /project1 {
      try_files $uri $uri/ /project1/index.html; # Here you can understand that it is specified to the index.html of the project1 folder under the html folder
    }
    
    #project2
    # Here is the configuration location of project 2 ^~ /project2 { # 
      try_files $uri $uri/ /project2/index.html; # Here you can understand that it is specified to the index.html of the project2 folder under the html folder
    }
    
    # Here is the interface that project1 needs to call for configuration location /api/pro1 { # Here is the configuration BASE_API of prod.env.js in the vue project 
      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; # The p1_server here corresponds to the above configuration upstream p1_server {}, here you can do clustering, I don't need it, so I just configure it simply}
    
     # Here is the interface that project1 needs to call for configuration location /api/pro2 { # Here is the configuration BASE_API of prod.env.js in the vue project
      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; # The p2_server here corresponds to the above configuration upstream p2_server {}, here you can do clustering, I don't need it, so I just configure it simply}

    # ...
  }

  # ...
}

...
<p><em>Thank you for using nginx.</em></p> <!-- For display location-->

<!-- start: append -->
<hr>
<a href="/project1" rel="external nofollow" >Project 1</a> | <a href="/project2" rel="external nofollow" >Project 2</a>
<!-- end: append-->

</body> <!-- For display purposes -->