快捷導(dǎo)航

Vue使用babel-polyfill兼容IE解決白屏及語法報錯問題

更新時間：2024年03月07日 10:58:39 作者：Alson_3364

這篇文章主要介紹了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的方式無非有以下幾種

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']
  }

module.exports = {
  presets: [['@vue/app', { 'useBuiltIns': 'entry', polyfills: ['es6.promise', 'es6.symbol'] }]]

則需要將這些插件的ES6轉(zhuǎn)換成ES5

使用transpileDependencies直接將需要轉(zhuǎn)換的插件放入

transpileDependencies: ['element-ui', 'echarts', 'highcharts', 'highcharts-3d', 'screenfull', 'oidc-client', 'vuex-oidc']

VUE CLI官方文檔中對transpileDependencies的解釋是，默認情況下 babel-loader 會忽略所有 node_modules 中的文件。

如果你想要通過 Babel 顯式轉(zhuǎn)譯一個依賴，可以在這個選項中列出來，他接受字符串或者正則表達式

如果引入的包比較多，可以根據(jù)package.json中引入包慢慢調(diào)試，直到將所有存在ES6語法的插件全部換成ES5

在開發(fā)的過程中遇到過一個問題，就是，如果使用cnpm安裝依賴，有可能會導(dǎo)致transpiledependencies無效

具體原因還沒有去深究，不過我的做法是，直接將node_modules全部刪掉后，重新使用npm i安裝所有依賴后，再次重新打包，目前問題已解決~

以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: