ルーティング履歴モードが Vue にパッケージ化された後、ページが空白になる問題を解決する方法

この記事は主に、Vue でルーティング履歴モードをパッケージ化した後の空白のページを紹介します。内容は非常に優れているので、参考として共有します。

Vue のルーティングはデフォルトのハッシュ モードであり、デフォルトのパッケージ化でも通常は問題ありませんが、ハッシュ モードは URL に # が含まれるため美しくなく、WeChat での共有や承認されたログインにはいくつかの落とし穴があります。など、歴史モードにはいくつかのアプリケーションシナリオもあります。初心者は、履歴モードがパッケージ化された後、ページが空白になり、リソース読み込みエラーのエラーメッセージが表示されない状況によく遭遇します

実際、勉強すると。この Vue の公式の説明では、プロジェクトがディレクトリに直接配置されている場合は問題ありませんが、ベース

を追加する必要があります。

// base: '/history',
// mode: 'history',

このベースはプロジェクトのパスです。

上記の両方が解決されました。現時点ではまだホームページのみにアクセスできることがわかりますが、ホームページを通じて他のルートをクリックすることも可能です。他のルートで更新するとエラーが発生します。履歴モードを理解している人は、ブラウザが履歴をシミュレートするのと比較して、履歴モードが h5 API の履歴であることも知っているはずですが、そのようなパス リソースはありません。実サーバーでは、ハッシュ モードではこの問題が発生しないのはなぜですか? ハッシュ モードには # が付いており、サーバーはそれを解析しませんが、それでも html を返します。インデックス .html は vue ルーティングに従って解析され、履歴モードでは解析されます。サーバー上にこのアドレスをリクエストすると、サーバー上に関連するパスがない場合、エラーが報告されます。直接プロジェクトのルート ディレクトリの場合は、プロジェクトがルート ディレクトリでない場合も問題が発生します。

 location / {
 try_files $uri $uri/ /index.html;
}

上記はプロジェクト パス名の履歴なので、設定後は変更されません。 vue をパッケージ化するとページが空白になり、履歴ルートに自由にアクセスできるという問題がありますが、ルート以外のプロジェクトにはベース パスを追加する必要があることに注意してください

上記は全体です。この記事の内容が皆様のお役に立てば幸いです。その他の関連コンテンツについては、PHP 中国語 Web サイトをご覧ください。

関連する推奨事項:

Vue SPA シングルページ アプリケーションのホーム画面最適化の紹介

テキストエリアに固定数の入力行を実装し、下線スタイルを追加するという Vue のアイデア

以上がルーティング履歴モードが Vue にパッケージ化された後、ページが空白になる問題を解決する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。