ホームページ >ウェブフロントエンド >jsチュートリアル >vue-router+nginxの非rootパスの設定方法
vue-router+nginxの非rootパスの設定方法
- 不言オリジナル
- 2018-07-09 14:07:292986ブラウズ
この記事では主に vue-router+nginx の非 root パスの設定方法を紹介します。必要な友達はそれを参照してください。
vue-router のデフォルトのデータ ハッシュ モードを使用します。 URL のハッシュは完全な URL をシミュレートするために使用されるため、URL が変更されてもページはリロードされません。
一般に、醜いハッシュは好まれません。index.html#/matchResult と同様に、ルーティングの履歴モードを使用できます。履歴モードでは、history.pushState API を使用してページ ジャンプを実装します。
しかし、nginxを使用する場合、いくつかの設定を追加する必要があります。
ルートパス直下に設定
アクセスする際は http://yoursite.com と入力するだけです
location / {
try_files $uri $uri/ /index.html;
}
非ルートパス設定
がある場合ドメイン名 複数のプロジェクトがある場合、ルート パス構成を使用するのは適切ではありません。たとえば、
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;
}
ヒント: 注: エイリアスを使用する場合は root を使用できません
上記がこの記事の全内容です。その他の関連コンテンツについては、PHP に注目してください。中国語のサイトです！
関連する推奨事項:
addRoutes がルートを動的に追加した後の更新失敗の問題を vue がどのように解決するか
Vue iview-admin フレームワークの 2 番目のメニューを 3 番目のレベルのメニューに変更する方法
以上がvue-router+nginxの非rootパスの設定方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。