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

vue elementUI項目使用webpack打包上線后，服務器環(huán)境下IE報語法錯誤及白屏

在最近的項目中，在使用webpack打包后發(fā)布，有用戶反饋使用IE瀏覽器訪問會白屏，這就不能忍受了，經過排查發(fā)現，發(fā)生這個錯誤應該是有文件沒有由ES6轉ES5語法造成，而IE不兼容該語法

既然問題找到了，那解決起來應該就容易了，然后事實上并沒有我想的那么簡單，話不多說，直接開始。

首先，通用的方式就是，項目中引入babel-polyfill，安裝方法可以自行百度

在這里我直接上命令：

npm i --save babel-polyfill （或者使用如果安裝有cnpm就用cnpm）

第一步:引入babel-polyfill

引入babel-polyfill的方式無非有以下幾種

1.在main.js的頂部直接使用 import ‘babel-polyfill’

2.在vue.config.js中，直接在chainWebpack內添加以下代碼，只需要引入一處即可

chainWebpack: config => {
    config.entry('main').add('babel-polyfill')
    config.entry.app = ['babel-polyfill', './src/main.js']
  }

第二步:在babel.config.js中設置entry

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

第三步:如果除了項目還引入了其他插件而該插件內部也存在ES6寫法

則需要將這些插件的ES6轉換成ES5

使用transpileDependencies直接將需要轉換的插件放入

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

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

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

https://cli.vuejs.org/zh/config/#transpiledependencies

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

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

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

總結

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

最新評論