ホームページ > 記事 > ウェブフロントエンド > vue-router+nginxの非rootパスの設定方法について

vue-router+nginxの非rootパスの設定方法について

不言オリジナル: 2018-06-30 16:25:081420ブラウズ

この記事では主に 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 project

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 中国語 Web サイトに注目してください。

vue-router+nginxの非rootパスの設定方法について

関連記事