vue-cli解決兼容ie的es6+api問題

官網：https://cli.vuejs.org/zh/guide/browser-compatibility.html#usebuiltins-usage

https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/babel-preset-app

preset-env的配置項中的useBuiltIns屬性可以方便@babel/polyfill的使用。

• useBuiltIns:false(default):此時不對 polyfill 做操作。如果引入 @babel/polyfill，則無視配置的瀏覽器兼容，引入所有的 polyfill。
• useBuiltIns:"entry":根據配置的瀏覽器兼容，引入瀏覽器不兼容的 polyfill。需要在入口文件手動添加 import '@babel/polyfill'，會自動根據 browserslist 替換成瀏覽器不兼容的所有 polyfill。
• useBuiltIns:"usage":不需要在文件頂部手動引入@babel/polyfill，會根據代碼中的使用進行按需添加。

browserslist ：https://github.com/browserslist/browserslist

 

 若依賴的第三包含有es6+的api,可以通過vue.config.js里面添加

 

 

添加ie兼容1

npm i --save @babel/polyfill
  
//在main.js中添加
import '@babel/polyfill';

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

 

添加ie兼容2

//babel.config.js
module.exports = {
  presets: [
      ['@vue/app', {
          polyfills: [
              'es6.promise',
              'es6.symbol'
          ],
          useBuiltIns: 'usage'  //使用usage不用安裝babel/polyfill和引入
      }]
  ]
}

 

 

 

 

babel的polyfills和transform-runtime參考  https://www.jianshu.com/p/b3cf89f44a08