快捷導(dǎo)航

Vue.js項(xiàng)目在IE11白屏報(bào)錯(cuò)的解決方法

更新時(shí)間：2023年08月04日 15:43:00 作者：光腳丫思考

本文主要介紹了Vue.js項(xiàng)目在IE11白屏報(bào)錯(cuò)的解決方法,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

一、概述

項(xiàng)目使用vue/cli4腳手架搭建的前端項(xiàng)目，vue版本為2.6.10。但開(kāi)發(fā)環(huán)境的IE11打開(kāi)顯示白屏，F(xiàn)12打開(kāi)顯示：

查明報(bào)錯(cuò)原因是： I.E.不支持ES6語(yǔ)法。

二、解決方案

(一)解決方案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.打開(kāi)報(bào)錯(cuò)顯示的sockjs-client錯(cuò)誤，如下所示：

遇到上述的錯(cuò)誤，降低sockjs-client的版本，請(qǐng)?zhí)貏e留意依賴描述在package-lock.json里面，也需要降低版本。將版本降低為1.5.1，執(zhí)行命令：

npm i sockjs-client@1.5.1 -D

更新版本完成后在，重新編譯項(xiàng)目，就可以解決上述問(wèn)題。留意觀察上面出錯(cuò)的截圖信息，注釋中其實(shí)是可以看到具體是哪個(gè)包出現(xiàn)了錯(cuò)誤，這一點(diǎn)非常有利于具體的定位問(wèn)題，排查問(wèn)題。

(五)其他情況

如果上述方法還是沒(méi)有解決你們的問(wèn)題，那就有可能是你們使用了第三方包，因?yàn)関ue編譯默認(rèn)是不編譯第三方包的（node_modules）, 此時(shí)目標(biāo)明確，就好解決問(wèn)題了，在你的vue.config.js文件中添加配置：

transpileDependencies: [
    '包名或使用正則匹配'，
    ...
  ]

vue-cli4配置vue.config.js：http://chabaoo.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項(xiàng)目在IE11白屏報(bào)錯(cuò)的解決方法的文章就介紹到這了,更多相關(guān)Vue.js IE11白屏報(bào)錯(cuò)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: