目錄
一、關(guān)于 sockjs-client 依賴包
二、關(guān)于 highlight 依賴包
三、關(guān)于 swiper 依賴包
四、IE 不支持 ES6 語(yǔ)法
五、第三方插件引入導(dǎo)致
六、本地環(huán)境正常，生產(chǎn)環(huán)境仍舊白屏
這篇文章主要介紹了 Vue?項(xiàng)目在 IE 瀏覽器顯示白屏并報(bào)錯(cuò) SCRIPT1002: 語(yǔ)法錯(cuò)誤 的案例
一、關(guān)于 sockjs-client 依賴包
Bug 背景 ：接手一個(gè)新項(xiàng)目 ，npm run dev 啟動(dòng)服務(wù)器之后默認(rèn)打開(kāi)的是 谷歌瀏覽器 ，?
后來(lái)發(fā)現(xiàn)項(xiàng)目在 IE 瀏覽器?打開(kāi)后?白屏 ， F12 打開(kāi)控制臺(tái)后報(bào)錯(cuò)信息顯示如下 ：
SCRIPT1002：語(yǔ)法錯(cuò)誤
文件：app.js，行：207536，列：23
點(diǎn)擊報(bào)錯(cuò)信息后展示（當(dāng)時(shí)的報(bào)錯(cuò)沒(méi)有截圖，用的別人的圖）
? ? 像這種根本就沒(méi)法排查錯(cuò)誤 ，就很惱火?。?/p>
百度了一堆 ，全是抄來(lái)抄去，關(guān)鍵是還沒(méi)有能解決問(wèn)題的 ，萬(wàn)能的谷歌走起
? ? 其實(shí)對(duì)于這個(gè)問(wèn)題很明顯就是?語(yǔ)法錯(cuò)誤?，就是 IE 不支持?的問(wèn)題 ，IE 垃圾 。。
既然是語(yǔ)法的問(wèn)題 ，那就是?編譯的問(wèn)題?，那么咱們就直接編譯對(duì)應(yīng)的包 ，
但是那是哪個(gè)包呢 ？
重點(diǎn)來(lái)了：點(diǎn)開(kāi)報(bào)錯(cuò)信息?，會(huì)發(fā)現(xiàn) 斷點(diǎn) 在的地方就是 報(bào)錯(cuò)的地方 ，
那肯定就是這里的問(wèn)題了，但是這是編譯后的代碼，怎么排查是哪個(gè)包呢 ？
突然發(fā)現(xiàn) 上面的注釋?不就是這個(gè) 包的名字 嗎 ？？？
恍然大悟 ，猶如發(fā)現(xiàn)新大陸 ！
./node_modules/_js-base64@3.6.2@js-base64.js
就是他了，此圖不是我的報(bào)錯(cuò)信息，我的報(bào)錯(cuò)信息是
一個(gè)關(guān)于 sockjs-client 依賴包?的原因 ，
經(jīng)過(guò)排查 ， 是因?yàn)?sockjs-client 版本太低了（@1.5.0）， 版本升級(jí)一下就好了 命令是 ： $ npm install sockjs-client@1.5.1 -D ， 運(yùn)行一下 ， 重啟一下就好了但是自行檢查過(guò)程中并沒(méi)有在 package.json 文件中找到?sockjs-client 這個(gè)依賴包
后來(lái)得知?sockjs-client 依賴包 并沒(méi)有顯示在?package.json 文件里面 ，?
而是在 package-lock.json 文件里 , 可以找到?“sockjs-client”: "^1.5.0"，
運(yùn)行完升級(jí)命令之后 ，就會(huì)在?package.json 文件 的 “devDependencies” 下面看到 ：
“sockjs-client”: "^1.5.1" ，
總結(jié)就是 ：?package.json 里面沒(méi)有，就是在?package-lock.json 里面 ???
但是 ， 后來(lái)我試了一下 npm uninstall sockjs-client ，把這個(gè)依賴包卸載后
IE 瀏覽器依舊可以正常打開(kāi)并且顯示不白屏了 ， 就很神奇 。?
也可能是因?yàn)?package-lock.json 里面的配置隨著升級(jí)依賴包時(shí)已經(jīng)改好了吧
需求背景 ： 半年前開(kāi)發(fā)的項(xiàng)目今天再次啟用時(shí) ， 發(fā)現(xiàn)谷歌瀏覽器正常打開(kāi) ， IE 卻
又又又 白屏 了 ？？？ 之前還是好的 ， 哎 ， 沒(méi)辦法 ， 再想辦法解決吧 。。。
而且這回 IE 還有個(gè)“毛病”就是控制臺(tái)在開(kāi)啟狀態(tài)時(shí)進(jìn)入頁(yè)面時(shí) ， 它會(huì)自動(dòng)進(jìn)入斷點(diǎn)模式 ，
1、斷點(diǎn)進(jìn)入的第一個(gè)位置顯示如下圖 ：（此時(shí)頁(yè)面白屏，加載不出來(lái)）
其實(shí)這里大致就能看出來(lái)端倪了 ， 又是?node_modules 里面一個(gè)?關(guān)于 sockjs-client 依賴包
出了問(wèn)題 ， 發(fā)現(xiàn)大多都跟這個(gè)包有關(guān)系哎 。。
2、清理IE瀏覽器緩存后 ， 這里頁(yè)面顯示 無(wú)法顯示此頁(yè) （斷點(diǎn)運(yùn)行結(jié)束）
2-2、斷點(diǎn)運(yùn)行繼續(xù)下一個(gè)位置顯示如下圖：
（ 此時(shí)頁(yè)面其實(shí)是可以加載出來(lái)了 ，但出現(xiàn)報(bào)錯(cuò) ）
控制臺(tái)報(bào)錯(cuò)如下圖所示 ：
SCRIPT5022: SecurityError
文件：sockjs.js，行：1687，列：3
我另一個(gè)前端同事的報(bào)錯(cuò)信息是 ：
SCRIPT1002：語(yǔ)法錯(cuò)誤
解決方案 ：
將 sockjs-client 依賴包版本調(diào)整一下版本（升級(jí)或降級(jí)）
package-lock.json? ?原版本信息如下圖所示 ：
npm install sockjs-client@1.5.1 -D下載安裝完新的依賴包之后 ， 再重新啟動(dòng)項(xiàng)目 ，?
發(fā)現(xiàn) IE 瀏覽器打開(kāi)控制臺(tái)也不會(huì)再自動(dòng)斷點(diǎn)了 ， 頁(yè)面也能夠正常展示無(wú)報(bào)錯(cuò) 。
"devDependencies": { "sockjs-client": "^1.5.1" }
二、關(guān)于 highlight 依賴包
我依稀記得當(dāng)初好像是因?yàn)樵?main.js 文件內(nèi)引用了 highlight 依賴 （一個(gè)高亮插件）
"highlight.js": "^10.7.1" , 我隱約記得是這個(gè)依賴包版本?， 老早之前了 。
所以導(dǎo)致了 IE 瀏覽器打開(kāi)顯示白屏并且控制臺(tái)報(bào)錯(cuò)。
當(dāng)時(shí)解決方案就是 ： 直接刪掉了那個(gè)引用依賴 ， 因?yàn)轫?xiàng)目中也用不到了 ，所以解決了 。
三、關(guān)于 swiper 依賴包
四、IE 不支持 ES6 語(yǔ)法
configureWebpack: config => { config.entry.app = ["babel-polyfill", "./src/main.js"]; },五、第三方插件引入導(dǎo)致
由于項(xiàng)目使用了 長(zhǎng)連接庫(kù) socket.io-client 和 vue-socket.io-extended ，
在 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);我把這四行代碼 注釋掉 之后 ， 神奇的 IE 不白屏了 ，但業(yè)務(wù)需要 IE11 是不能放棄長(zhǎng)連接的 ，
經(jīng)過(guò)嘗試發(fā)現(xiàn)是 socket.io-client 這個(gè) 插件 在使用 import 引入時(shí)導(dǎo)致的問(wèn)題 。
解決方法一 ：
1、將 main.js 調(diào)整為：
import VueSocketIOExt from 'vue-socket.io-extended';
const socket = io(process.env.VUE_APP_IO_URL);
Vue.use(VueSocketIOExt, socket);2、socket.io-client 改為在 public / index.html 文件 head 中引入 ：
<script src="https://cdn.bootcdn.net/ajax/libs/socket.io/2.3.0/socket.io.slim.js"></script>解決方法二 ：
保留 main.js 對(duì)第三方插件的引入不變 ，
只需要在 vue.config.js 的 transpileDependencies 添加要顯示依賴的插件即可 ：
transpileDependencies:['socket.io-client'],
// transpileDependencies:['*'],transpileDependencies?的作用是 ：
默認(rèn)情況下 babel-loader 會(huì)忽略所有 node_modules 中的文件。
如果你想要通過(guò) Babel 顯式轉(zhuǎn)譯一個(gè)依賴 ，可以在這個(gè)選項(xiàng)中列出來(lái)。文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-460548.html
六、本地環(huán)境正常，生產(chǎn)環(huán)境仍舊白屏
文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-460548.html
到了這里，關(guān)于整理各種Vue項(xiàng)目在IE瀏覽器白屏報(bào)錯(cuò) SCRIPT1002:語(yǔ)法錯(cuò)誤的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
