Vue 3 + Vite 開発サーバーの動的ルーティングにより、ページのリロード時に 404 エラーが発生する

Question

私のプロジェクトでは、Vue 3.2.36 Vite 2.9.9 VueRouter 4.1.3

を使用しています。 npm run dev を使用して開発サーバーを実行します。

私のルート定義:

リーリー

router.push({name: 'userDetails', params: {login: 'john.smith'}}) を使用してプログラムで移動すると、userDetails ページ /Component が表示されます。正しく。

しかし、ブラウザをリロードすると、開発サーバーは 404 を返し、

NotFound コンポーネントは表示されません。 ＃＃＃クロム：＃＃＃＃＃＃＃＃＃＃＃＃

FF：

実際の例: ここ

問題を Vite に切り分けました。 Vue CLI を使用すると、すべてが正常に動作します。

私の

vite.config.js

:

リーリー

index.html

を確認しました:

vue-router ヒストリカル モードのドキュメントを確認したところ、警告セクションに、ルートが見つからない場合、ルーターはデフォルトで

index.html
を使用し、Vue CLI を使用する必要があると記載されています。ただし、Vite ではこれを行わないでください。

Answer 1

私の Web アプリケーションは Azure DevOps 上にありますが、Linux 上にあります Linux Web アプリケーションの場合、起動時に Web アプリケーション コマンドを実行するには、次のコマンドを追加する必要があります。これは私にとってはうまくいきます。

リーリー

この記事で詳細を確認できます Azure Webapp Linux 上の React アプリケーション

Answer 2

はい、Vite の バグ を認識しています。
解決策は、ここで説明されているように、Viteでplugins

を使用することです。

私にとって、これはノーノーです。 Vue CLI に切り替えるつもりです。
こんな小さな怪物とは関わりたくない。
数年後にまたヴィテを訪れるつもりです。