Nginx deploys multiple front-end projects on one port

Scenes

Depending on the route, multiple front-end vue projects can be configured in one port.

Configuration

1. The vue project packaging
   is vue.config.jsconfigured as follows

   const isProduction = process.env.NODE_ENV === 'production'
   module.exports = {
         
         
     ....
     publicPath: isProduction ? './' : '/',
   }
   

2. nginx configuration

   server {
       listen 8081;
       location / {
         root /opt/dist/vue3-element;
         index index.html;
       }
       location /base {
         alias  /opt/dist/base/;
         index  index.html index.html;
       }
   }
   

3. access

   http://127.0.0.1:8081/
   http://127.0.0.1:8081/base/