vue-cli3+babel7項目兼容IE 詳情 - 兼容性,babel7,vue-cli3 fashen007 博客

正常來説項目都可以忽略IE，無奈我們還是有一些比較傳統的大企業要用我們的系統，所以還得支持IE10~11;

網上比較多資料都比較舊了，自己擼了一些就不想看了，大部分都是因為不同的babel版本不一樣

正常來説vue-cli3的項目、默認配置會將es6+的轉成e5，在babel.confi.js中加上以下配置即可

module.exports = {
  presets: [
    '@vue/app'
  ]
}

默認忽略node_moudules,但是有些包可能並沒有做好轉化，所以需要我們轉化
vue官方也提供了比較好的屬性transpileDependencies
來將node_modules裏面的部分包加到babel的轉化
如下配置，在vue.config.js中添加


module.exports = {
    // ...省略多餘配置
    transpileDependencies: [''], // node_modules裏面的包名，比如nprogress

}

以上都是比較常規的配置，但是配置過程中會出現報錯

本地跑起來會報錯:

瀏覽器運行報錯:

主要原因是es6的import和commonjs聲明衝突
有人説，在引入包的頁面上，直接將import改成require就可以，
但是實際上還是會報錯
如下:

其實也是有解決方案的
在babel.config.js中多配置一個屬性sourceType就可以

module.exports = {
  presets: [
    '@vue/app'
  ],
  sourceType: 'unambiguous',
}

babel官方描述sourceType
主要有三個值
script: 可以編譯不包含import/export,非嚴格模式
module: 可以編譯ES6+的語法，含import/export
unambiguous:兼容以上二者

fashen007 博客