I. NginxでのVueプロジェクトのデプロイ

ポートルートパス下での展開

Vueデプロイメントファイルのパッケージング

npm run build

Nginx

#ウェブ設定
#rootvueプロジェクトをルートパスとしてデプロイする
location / {
 #vueプロジェクトのパッケージ化されたdistファイルへのパス
 root D:\projects\HIS-GDFY-MP\dist; 
 index index.html index.htm; 	 
 #以下を指摘する必要がある。@routerそれ以外の場合、vueのルートはNginxで404でリフレッシュされる。
 try_files $uri $uri/ @router; 
}
#上記に対応する@router,主な理由は、ルーティングされたパスリソースが実際のパスではないため、特定のファイルを見つけることができないことである。
#だから、インデックスを書き換える必要がある.htmlそして、リソースのリクエストを処理するために、それをルートに渡す。
location @router { 	
 rewrite ^.*$ /index.html last;
}

ポートサブパスでの展開

Vueデプロイメントファイルのパッケージング

vue-config.jsファイルの設定を変更します。

module.exports = {publicPath: ""};

ルートの修正 route/index

const router = new Router({ 
 base: '/hisGYFY/', //ルーティング・モードがヒストリー・モードの場合、ベースを;ルーティング・モードがハッシュ・モードの場合、ベースを追加することも、追加しないこともできる。
 mode: 'history',
 routes: []
}

エンドツーエンドの実行

npm run build

Nginx

#ウェブ・コンフィギュレーション：サブディレクトリ展開
location ^~ /hisGYFY { 
 #alias 非ルートパスを示す
 alias D:\projects\HIS-GDFY-MP\dist; 	
 index index.html index.htm;	
 try_files $uri $uri/ /hisGYFY/@router; 
}
location @router {	
 rewrite ^.*$ /index.html last;
}

クロスドメインを解決するリバースプロキシ

ソースの変更なし

location /hisfy/ {	
 proxy_pass http://:/fy/;
}

変動要因

モード1

location /api {
 proxy_pass http://:80;	
 #オプションのパラメータ、通常の検証アドレス、書き換えリクエストパス、エンカウンターapi、エンカウンター/api /apiで、フロントエンドのパスをプロキシのアドレスに置き換える。
 rewrite ^.+api/?(.*)$ /$1 break; 
}

モード2

location /api {	
 # モード1の書き換え文の代わりに、パスの後にスラッシュを追加する。
 proxy_pass http://:80/; 
}