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 プロジェクト

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 番目のレベルのメニューに変更する方法

Electron+vue+ts+sqliteの設定方法

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