Vue.js項目在IE11白屏報錯的解決方法
一、概述
項目使用vue/cli4腳手架搭建的前端項目，vue版本為2.6.10。但開發(fā)環(huán)境的IE11打開顯示白屏，F(xiàn)12打開顯示：
查明報錯原因是： I.E.不支持ES6語法。
二、解決方案
(一)解決方案1
1、安裝如下的依賴包：
npm install --save-dev babel-polyfill 或 npm install --save @babel-polyfill
2、main.js的第一行引入：
/*記住一定是首行代碼*/ import 'babel-polyfill' 或 import '@babel-polyfill'
3、然后在babel.config.js修改presets，內(nèi)容如下：
// presets: [['@vue/app', {useBuiltIns: 'entry',}]], // 此為vue/cli3。
presets: [['@vue/cli-plugin-babel/preset', {useBuiltIns: 'entry',}]], // 此為vue/cli4。(二)解決方案2
1、vue cli官方推薦使用，前提是package.json安裝了core-js或者安裝：
npm install --save core-js regenerator-runtime
2、其次在main.js首行引入：
import 'core-js/stable' import 'regenerator-runtime/runtime'
(三)解決方案3
在vue.config.js里添加如下代碼：
configureWebpack: config => { config.entry.app = ['babel-polyfill', './src/main.js'];},(四)sockjs-client
還有一種情況是在i.e.打開報錯顯示的sockjs-client錯誤，如下所示：
遇到上述的錯誤，降低sockjs-client的版本，請?zhí)貏e留意依賴描述在package-lock.json里面，也需要降低版本。將版本降低為1.5.1，執(zhí)行命令：
npm i sockjs-client@1.5.1 -D
更新版本完成后在，重新編譯項目，就可以解決上述問題。 留意觀察上面出錯的截圖信息，注釋中其實是可以看到具體是哪個包出現(xiàn)了錯誤，這一點(diǎn)非常有利于具體的定位問題，排查問題。
(五)其他情況
如果上述方法還是沒有解決你們的問題，那就有可能是你們使用了第三方包，因為vue編譯默認(rèn)是不編譯第三方包的（node_modules）, 此時目標(biāo)明確，就好解決問題了，在你的vue.config.js文件中添加配置：
transpileDependencies: [
'包名或使用正則匹配'，
...
]vue-cli4配置vue.config.js：http://www.dbjr.com.cn/article/188130.htm
三、參考資料
https://blog.csdn.net/Dragonfly_w/article/details/123132330
https://blog.csdn.net/qq_41810005/article/details/120185666
到此這篇關(guān)于Vue.js項目在IE11白屏報錯的解決方法的文章就介紹到這了,更多相關(guān)Vue.js IE11白屏報錯內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要給大家介紹如何在vue項目中設(shè)置首頁,本文給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友參考下吧2023-12-12
Vue項目查看當(dāng)前使用的elementUI版本的方法
今天小編就為大家分享一篇Vue項目查看當(dāng)前使用的elementUI版本的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
VUE中如何優(yōu)雅實現(xiàn)爺孫組件的數(shù)據(jù)通信
所謂祖孫組件,也就是3層嵌套的組件,下面這篇文章主要給大家介紹了關(guān)于VUE中如何優(yōu)雅實現(xiàn)爺孫組件的數(shù)據(jù)通信的相關(guān)資料,需要的朋友可以參考下2022-04-04
這篇文章主要為大家詳細(xì)介紹了vue實現(xiàn)抖音時間轉(zhuǎn)盤，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-09-09
Vue中關(guān)于異步請求數(shù)據(jù)未更新的解決
本文將探討Vue中異步請求數(shù)據(jù)未更新的常見原因,并提供解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2025-03-03
詳解win7 cmd執(zhí)行vue不是內(nèi)部命令的解決方法
這篇文章主要介紹了詳解win7 cmd執(zhí)行vue不是內(nèi)部命令的解決方法的相關(guān)資料,這里提供了解決問題的詳細(xì)步驟，具有一定的參考價值，需要的朋友可以參考下2017-07-07
本文為大家介紹Vue中路由的使用方法,包括安裝路由創(chuàng)建路由并導(dǎo)出以及在應(yīng)用實例中使用vue-router的相關(guān)知識,本文結(jié)合實例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友參考下吧2024-02-02
Sentry?是一款功能強(qiáng)大的開源錯誤監(jiān)控服務(wù),廣泛用于追蹤和修復(fù)應(yīng)用中的異常情況,本文將詳細(xì)介紹如何在?Vue?應(yīng)用中集成和使用?Sentry,感興趣的可以了解下2024-11-11
Vue使用echarts散點(diǎn)圖在區(qū)域內(nèi)標(biāo)點(diǎn)
這篇文章主要為大家詳細(xì)介紹了Vue使用echarts散點(diǎn)圖在區(qū)域內(nèi)標(biāo)點(diǎn)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-03-03
這篇文章主要介紹了vue最簡單的前后端交互示例詳解，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-10-10