Axios リクエストエラーの処理捕捉されないランタイムエラー: handleError@webpack-internal:///./node_modules/webpack-dev-server

プロジェクト環境:

ビュー3.2.13

vue-cli5.0.0

注: この問題は開発環境でのみ発生し、パッケージ化後は発生しません。

問題の説明:

新しい開発プロジェクトを開始する必要があるため、必要なネットワークの導入により、axios とそのアシスタント (リクエストと戻りデータの集中処理) が要求されます。結局のところ、axios とアシスタントは古い従業員であり、直接実行できます。どうやってとんでもないことが起こったのか、裁判官に見てください。

以前は、この種のエラーレポートがコンソールに表示されて、突然混乱してしまうことがよくありました。

ナンセンスな話はやめてください

分析します:

エラーメッセージは、ネットワークを要求するときのフィードバックから来ています。コンソールを開いてエラーの原因を追跡し、それが axios の代理であることを確認すると、エラーメッセージがポップアップ表示されます。このエラーは、事前に設定されたメカニズムに従っていません。つまり、エラー集中処理メカニズムを経由しません。

確認：

意図的に間違ったリクエストパラメータを送信する

いいやつのほうが長いです（笑）この時点で、問題の場所はおおよそ決まりました。次のステップは問題を解決することですまず、アシスタントファイルはそれ自身のコードの問題をチェックします、わかりました、aixos のバージョンの問題をチェックします、わかりました、私はすでに少し迷っています。唾液を飲み、よく見て、npm 参照ソースの何かが更新されたかどうかを大胆に推測し、エラーメッセージを注意深く確認して webpack-dev-server にロックします。

通常のエラーメカニズムでの package-lock.json

全画面エラーメカニズムでの package-lock.json

比較してみると、少しバージョンアップしていることが分かりました。

推測を確認します:

package-lock.json の現在の場所にある webpack-dev-server の変更部分を直接無礼に置き換えたところ、完璧に正常に表示され、コンソールにはエラーが表示され、全画面表示はありませんでした

OK、問題を確認しました。対処できます

問題を解く：

オプション 1: ダウングレード処理 (通常のダウングレードでは無効なので、それを知っている友人がフォローして教えてくれるのを希望します)

一般的なダウングレード

（1）、npm アンインストール webpack-dev-server

（2）、npm install [email protected]

（3）、npm run dev

動作しません。試してみました。私のバージョンに適していないだけかもしれません。会議がある場合は、修正してください。ありがとうございます。

私の個人的な意見は、webpack 自体がアップグレードされているため、新しくビルドすると、最新バージョンの web-sev-server が自動的に生成されます。これはソースファイルに属し、変更またはダウングレードすることはできません。

解決策 2: devServer の構成 (ここでは vue.config.js を使用)

クエリのドキュメント構成によると: (無効、または無効、続行)

 devServer: {
      client: {
        //当出现编译错误或警告时，在浏览器中是否显示全屏覆盖。  示例为只显示错误信息
        overlay: {
          errors: false,
          warnings: false
        },
      },
    },

まだこの構成には適していないようです。わかりました。ソースファイルを追跡します。

webpack-dev-server/client/overlay.js を見つけて、コードをチェックして handleError を見つけました。

追跡を続け、webpack-dev-server/client/index.js に移動し、options.catchRuntimeError がどのように渡されるかを確認します。

わかりました、試してみてください

さあ、終わりました、えー、終わりました、一部の読者にインスピレーションを与えることができれば幸いです、不十分な場合は修正してください、ヒヒ、終わりました、いいですか？