Vueのサーバーへのパッケージング後、チャンク{n}の読み込みに失敗したエラーの解決法

このエラーの主な原因は、vueがwebpackのパッケージングによって複数のモジュールのjsファイルを生成し、ビルドしたファイルをサーバにアップロードすると、これが最初のアップロードとなり、訪問時にこのエラーが発生しないことです。しかし、通常のプロジェクトは更新や反復が必要で、再度パッケージングすると、いくつかのjsファイルが変更され、サーバーにアップロードした後、ブラウザキャッシュindex.htmlの問題や、ユーザーがサイトにアクセスしたときに、再び以前のjsファイルにアクセスするため、このエラーが発生することになります。 Loading chunk {n} failed このようなエラーが報告されます。
ブラウザのキャッシュ問題を解決しても、この状況は避けられず、特に開発中にテスト環境をアップロードすると、よくこのような状況に遭遇します。例えば、ほとんどのVueプロジェクトはシングルページのアプリなので、vue-routerを使用していて route lazy loading vue-routerの場合、ルートジャンプのために現在のアプリケーションにアクセスすると、該当モジュールのjsファイルをサーバから動的にリアルタイムで引き出しており、コードを変更してオンラインでパッケージ化すると、jsファイル名が変更され、ルートジャンプ中はページを更新しないため元のファイル名のままアクセスし、これがモジュールを見つけられないというエラーとなります。
次に、解決策です。
ルートにエラーコールバックメソッドを追加し、ルートエラーをリスニングした後にページのリフレッシュを行い、その時点で最新の現在のコードを取得してエラーレポートを修正する必要があります。

router.onError((error) => {
  const pattern = /Loading chunk (\d)+ failed/g;
  const isChunkLoadFailed = error.message.match(pattern);
  if (isChunkLoadFailed) {
    window.location.reload();
    // router.replace(router.history.pending.fullPath);
  }else{
    console.log(error)
  }
});