Vue ProjectはChunk-Vendors.jsのロードに失敗しました。404エラーを返すためのソリューション

VUEプロジェクトを?qū)g行すると、ブラウザはchunk-vendors.jsファイルにアクセスできない場(chǎng)合があり、その結(jié)果net::ERR_ABORTED 404 (Not Found)およびMIMEタイプエラープロンプトを伴う404エラーが発生します。これは通常、プロジェクト自體の問(wèn)題ではなく、靜的リソースの負(fù)荷障害によるものです。新しいウィンドウが開いたときにファイルにアクセスできる場(chǎng)合、パス構(gòu)成エラーを指す可能性が高くなります。

この記事では、問(wèn)題を分析し、ソリューションを提供します。

問(wèn)題の分析と解決策：

問(wèn)題の根本的な原因は、プロジェクトが構(gòu)築された後の靜的リソースパス構(gòu)成がブラウザリクエストパスと一致しないことです。

1. publicPath構(gòu)成を確認(rèn)する： vue.config.jsファイルのpublicPath構(gòu)成は、プロジェクトの構(gòu)築後に靜的リソースのアクセスパスを決定します。構(gòu)成が誤っていると、ブラウザがリソースを見(jiàn)つけることができなくなります。たとえば、 publicPathが正しく設(shè)定されていることを確認(rèn)してください。

 module.exports = {
  // ...その他の構(gòu)成publicPath：process.env.node_env === 'production'？ '/your-app-name/'： '/'
};

• process.env.NODE_ENV === 'production' ? '/your-app-name/' : '/' 、生産環(huán)境では、リソースパスが/your-app-name/で始まり、開発環(huán)境では、それは/あることを意味します。 /your-app-name/実際のアプリケーション名またはパスに置き換えてください。

2. 靜的リソースパスを確認(rèn)します。靜的リソース（ chunk-vendors.jsなど）が正しいディレクトリ（通常はstaticまたはpublicディレクトリ）にあることを確認(rèn)してください。誤ったパスは、404エラーを引き起こす可能性があります。

3. 圧縮プラグインの競(jìng)合（可能性のある原因）：提供されたvue.config.js構(gòu)成は、GZIP圧縮にCompressionWebpackPluginを使用します。圧縮自體は404を直接引き起こしませんが、圧縮が不適切に構(gòu)成されている場(chǎng)合、または他の構(gòu)成と競(jìng)合する場(chǎng)合、リソースの負(fù)荷に影響を與える可能性があります。圧縮コードの一部を一時(shí)的にコメントして、問(wèn)題が解決されるかどうかを確認(rèn)することをお?jiǎng)幛幛筏蓼?。?wèn)題が解決した場(chǎng)合は、圧縮プラグインの構(gòu)成を再確認(rèn)して、すべての靜的リソースを正しく処理することを確認(rèn)する必要があります。

4. サーバーMIMEタイプ設(shè)定：ブラウザエラーは、MIMEタイプがapplication/javascriptではなくtext/htmlであることをプロンプトし、サーバーが.jsファイルをHTMLファイルとして誤って認(rèn)識(shí)する可能性があることを示します。サーバーの構(gòu)成（NginxやApacheなど）を確認(rèn)して、 .jsファイルのMIMEタイプが正しく設(shè)定されていることを確認(rèn)してください。

5. キャッシュの問(wèn)題：ブラウザのキャッシュをクリアして、ページをリロードしてみてください。

要約：

chunk-vendors.js 404エラーを解決するための鍵は、 publicPath構(gòu)成、靜的リソースパス、およびサーバー構(gòu)成、特にMimeタイプの設(shè)定を慎重に確認(rèn)することです。圧縮プラグインを使用する場(chǎng)合は、正しく構(gòu)成されていることを確認(rèn)する必要があります。上記のポイントを徐々に確認(rèn)することにより、この問(wèn)題を解決できるはずです。

以上がVUEプロジェクトでChunk-Vendors.jsにアクセスできないことが原因で発生した404エラーを解決する方法は？の詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國(guó)語(yǔ) Web サイトの他の関連記事を參照してください。