vue-router+nginx非ルートパス構成方法


vue-routerのデフォルトデータhashモード-urlのhashを使用して完全なURLをシミュレートし、URLが変更されるとページは再ロードされません.
一般的に、index.html#/matchResultのように、醜いhashは好きではありません.ルーティングのhistoryモードを使用することができます.historyモードはhistory.pushState APIを用いてページジャンプを実現する.
しかし、nginxを使用する場合は、いくつかの構成を追加する必要があります.
ルートパスの下に直接配置
ルートパスの下に直接配置し、アクセスするときは入力のみhttp://yoursite.com,nginxでの構成は以下の通りである.
location / {
  try_files $uri $uri/ /index.html;
}

ルート以外のパス構成
1つのドメイン名の下に複数のアイテムがある場合は、ルートパス構成を使用するのは適切ではありません.ルートパスの下にルートパスを指定する必要があります.たとえば、
Aプロジェクト
http://yoursite.com/A

Bプロジェクト
http://yoursite.com/B

nginxの構成
    location ^~/A {
            alias /XX/A;//   A   
            index index.html;
            try_files $uri $uri/ /A/index.html;
    }
    location ^~/B {
            alias /XX/B;//   B   
            index index.html;
            try_files $uri $uri/ /B/index.html;
    }

tip:aliasでrootは使えないように注意