Vue使用babel-polyfill兼容IE解決白屏及語法報錯問題
使用babel-polyfill兼容IE解決白屏及語法報錯
vue elementUI項目使用webpack打包上線后，服務(wù)器環(huán)境下IE報語法錯誤及白屏
在最近的項目中，在使用webpack打包后發(fā)布，有用戶反饋使用IE瀏覽器訪問會白屏，這就不能忍受了，經(jīng)過排查發(fā)現(xiàn)，發(fā)生這個錯誤應(yīng)該是有文件沒有由ES6轉(zhuǎn)ES5語法造成，而IE不兼容該語法
既然問題找到了，那解決起來應(yīng)該就容易了，然后事實上并沒有我想的那么簡單，話不多說，直接開始。
首先，通用的方式就是，項目中引入babel-polyfill，安裝方法可以自行百度
在這里我直接上命令：
npm i --save babel-polyfill （或者使用如果安裝有cnpm就用cnpm）
第一步:引入babel-polyfill
引入babel-polyfill的方式無非有以下幾種
1.在main.js的頂部直接使用 import ‘babel-polyfill’
2.在vue.config.js中，直接在chainWebpack內(nèi)添加以下代碼，只需要引入一處即可
chainWebpack: config => {
config.entry('main').add('babel-polyfill')
config.entry.app = ['babel-polyfill', './src/main.js']
}
第二步:在babel.config.js中設(shè)置entry
module.exports = {
presets: [['@vue/app', { 'useBuiltIns': 'entry', polyfills: ['es6.promise', 'es6.symbol'] }]]
第三步:如果除了項目還引入了其他插件而該插件內(nèi)部也存在ES6寫法
則需要將這些插件的ES6轉(zhuǎn)換成ES5
使用transpileDependencies直接將需要轉(zhuǎn)換的插件放入
transpileDependencies: ['element-ui', 'echarts', 'highcharts', 'highcharts-3d', 'screenfull', 'oidc-client', 'vuex-oidc']
VUE CLI官方文檔中對transpileDependencies的解釋是，默認(rèn)情況下 babel-loader 會忽略所有 node_modules 中的文件。
如果你想要通過 Babel 顯式轉(zhuǎn)譯一個依賴，可以在這個選項中列出來，他接受字符串或者正則表達(dá)式
https://cli.vuejs.org/zh/config/#transpiledependencies
如果引入的包比較多，可以根據(jù)package.json中引入包慢慢調(diào)試，直到將所有存在ES6語法的插件全部換成ES5
在開發(fā)的過程中遇到過一個問題，就是，如果使用cnpm安裝依賴，有可能會導(dǎo)致transpiledependencies無效
具體原因還沒有去深究，不過我的做法是，直接將node_modules全部刪掉后，重新使用npm i安裝所有依賴后，再次重新打包，目前問題已解決~
總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
下面小編就為大家分享一篇vue實現(xiàn)圖片滾動的示例代碼(類似走馬燈效果)，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
這篇文章主要介紹了vue內(nèi)置組件Transition的詳解,簡單地說，就是當(dāng)元素發(fā)生變化，比如消失、顯示時，添加動畫讓它更自然過渡，它是vue內(nèi)置組件，不需要引入注冊就可以直接使用，本文通過實例代碼介紹的非常詳細(xì)，需要的朋友可以參考下2023-09-09
Vue3音頻組件開發(fā)與使用指南(包括播放控制、進(jìn)度條)
本文將詳細(xì)介紹如何在Vue3項目中開發(fā)一個功能完整的音頻播放組件,包括播放控制、進(jìn)度條、時間顯示以及多音頻實例管理等功能,本文通過實例演示給大家介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧2025-08-08
vue3?defineExpose的使用及應(yīng)用場景分析
Vue3中defineExpose用于向父組件暴露子組件的屬性和方法,尤其在script setup語法中,需顯式聲明以實現(xiàn)組件間交互,可控制暴露內(nèi)容,避免過度暴露,同時注意響應(yīng)式數(shù)據(jù)解包與測試影響,本文給大家介紹vue3?defineExpose的使用,感興趣的朋友一起看看吧2025-06-06
Vue中關(guān)閉當(dāng)前頁面的方法與原生JavaScript類似,都是通過window對象的close方法實現(xiàn),這篇文章主要介紹了Vue關(guān)閉當(dāng)前頁面的方法,需要的朋友可以參考下2023-09-09
本文詳細(xì)介紹了如何在Vue項目中集成和使用富文本編輯框,并分享了一些實踐經(jīng)驗,介紹了為什么需要富文本編輯框,Vue中常用的富文本編輯器,以及如何安裝、配置和使用Vue-Quill-Editor,本文還提供了一些基本的配置示例,幫助開發(fā)者在實際項目中根據(jù)需求進(jìn)行更多探索和定制2024-10-10
這篇文章主要介紹了Element input樹型下拉框的實現(xiàn)代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-12-12
優(yōu)雅的elementUI table單元格可編輯實現(xiàn)方法詳解
這篇文章主要介紹了優(yōu)雅的elementUI table單元格可編輯實現(xiàn)方法詳解，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-12-12
這篇文章主要介紹了關(guān)于Vue單元測試的幾個坑，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-04-04
這篇文章主要介紹了快速修改antd?vue單個組件的默認(rèn)樣式方式，具有很好的參考價值，希望對大家有所幫助。2022-08-08