Nginx は 1 つのポートに複数のフロントエンド プロジェクトをデプロイします

シーン

ルートに応じて、複数のフロントエンド Vue プロジェクトを 1 つのポートに設定できます。

構成

1. vue プロジェクトのパッケージ化は次のように構成されてい
   ますvue.config.js

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

2. nginxの設定

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

3. アクセス

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