vue-router+nginx非ルートパス構成方法
982 ワード
vue-routerのデフォルトデータhashモード-urlのhashを使用して完全なURLをシミュレートし、URLが変更されるとページは再ロードされません.
一般的に、index.html#/matchResultのように、醜いhashは好きではありません.ルーティングのhistoryモードを使用することができます.historyモードはhistory.pushState APIを用いてページジャンプを実現する.
しかし、nginxを使用する場合は、いくつかの構成を追加する必要があります.
ルートパスの下に直接配置
ルートパスの下に直接配置し、アクセスするときは入力のみhttp://yoursite.com,nginxでの構成は以下の通りである.
ルート以外のパス構成
1つのドメイン名の下に複数のアイテムがある場合は、ルートパス構成を使用するのは適切ではありません.ルートパスの下にルートパスを指定する必要があります.たとえば、
Aプロジェクト
Bプロジェクト
nginxの構成
tip:aliasでrootは使えないように注意
一般的に、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は使えないように注意