VUEプロジェクトはIE 11ホワイトスクリーンでSCRIPT 1002をエラーしました。文法エラーの解決

3210 ワード

問題の現象
プロジェクトはVue/cli 3脚を使って構築されたフロントエンドプロジェクトで、vueバージョンは2.6.10です。
browserslistの構成は以下の通りである。


[ "> 1%", "last 2 versions"]

しかし、開発環境のIE 11は白画面を開き、F 12は表示を開く。

分析プロセス
5306行は「./node_」を表示します。modules/[email protected]@debug/src/browser.js「このパスはエラーを報告しています。eval()に含まれるコードの中にES 6の文法があるので、IEはサポートしていません。インターネット上の多くの資料を調べたらBabel-polyfillを使って解決すると言われています。
IEはES 6文法をサポートしていません。

Vuex requires a Promise polyfill in this browser

「Promise」未定義
以上の現象はIEがPromiseをサポートしない、つまりES 6文法をサポートしないということです。IEホワイトスクリーンとSCRIPT 1002エラーが発生したのは、このためです。今処理するのも比較的に簡単で、ネット上の大部分の資源はすべて解決案を探し当てることができて、babel-polyfillを使います。
まずはbabel-polyfillをインストールします。


npm install --save-dev babel-polyfill

その後babel.co nfig.jsでpresetsを修正します。内容は以下の通りです。


// presets: [["@vue/app", {useBuiltIns: "entry",}]],//   vue/cli3
presets: [["@vue/cli-plugin-babel/preset", {useBuiltIns: "entry",}]],//   vue/cli4

解決方法一
main.jsの最初の行を紹介します。


import 'babel-polyfill';

解決方法二：
vue cliの公式推奨使用は、package.jsonがcore-jsをインストールしていることが前提です。


import 'core-js/stable';import 'regenerator-runtime/runtime';

解決方法3：
vue.co.nfig.jsに下記のコードを追加します。


configureWebpack: config => { config.entry.app = ["babel-polyfill", "./src/main.js"]; },

現象二：サードパーティプラグインの導入によるもの
プロジェクトでは、長期連結ライブラリsocket.io-clientとvue-sockete.io-extededを使用していますので、main.jsでは、使用方法は以下の通りです。


import VueSocketIOExt from 'vue-socket.io-extended';
import io from 'socket.io-client';
const socket = io(process.env.VUE_APP_IO_URL);
Vue.use(VueSocketIOExt, socket);

この4行のコードを注釈したら、不思議なIEが白スクリーンにならなくなりましたが、業務に必要なIE 11は長い接続を放棄することができません。試してみたところ、socket.io-clientというプラグインがimportを使って導入された時に発生した問題です。
解決方法一：
1、main.jsを以下に調整する。


import VueSocketIOExt from 'vue-socket.io-extended';
const socket = io(process.env.VUE_APP_IO_URL);
Vue.use(VueSocketIOExt, socket);

2、sockete.io-clientをpublic/index.ファイルheadに変更する：


<script src="https://cdn.bootcdn.net/ajax/libs/socket.io/2.3.0/socket.io.slim.js"></script>

解決方法二：
main.jsを保留して第三者のプラグインの導入に対して不変で、vue.com fig.jsのtranpileDependenciesに依存するプラグインを追加するだけでいいです。


transpileDependencies:['socket.io-client'],
// transpileDependencies:['*'],

tranpileDependenciesの役割は、デフォルトではbabel-loaderはすべてを無視します。modulesのファイルです。Babelの明示的な変換に依存したいなら、このオプションで並べばいいです。
地元の環境は正常ですが、生産環境はまだ白画面です。
多言語ファイルを導入した場合、JSONは適切なカンマを使用していないことが分かりました。

私は8行目のコンマを外した後、奇跡的に正常になりました。
また、フロントエンドプロジェクトが導入したファイルがプロジェクトのルートディレクトリにない場合もあります。
ここで、VUEプロジェクトについては、IE 11のホワイトスクリーンでSCRIPT 1002を誤報しました。文法エラーの解決に関する記事はここまで紹介しました。VUE IE 11のホワイトスクリーンエラーの内容については、以前の記事を検索したり、下記の関連記事を見たりしてください。これからもよろしくお願いします。

Linuxでは、IP、DNS、ルートコマンドラインの構成方法を変更します。

Androidは、単一ドメイン名をクリアするクッキーを実現します。