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

この記事では主に 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 プロジェクトの構築、パッケージ化、公開プロセスの紹介

vue v-model の動的生成の紹介

以上がvue-router+nginxの非rootパスの設定方法についての詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。