vue-cli4兼容IE11

2,828 阅读1分钟

在官方文档中有提到浏览器兼容性的处理

在package.json中,vue-cli项目使用 @vue/babel-preset-app。它通过 @babel/preset-env 和 browserslist 配置来决定项目需要的 polyfill。 它包含了@babel/polyfill,所以不用再安装。

polyfill 默认值['es6.array.iterator', 'es6.promise', 'es6.object.assign', 'es7.promise.finally'],如果你的项目中需要用到其他es6方法,可以尝试下面方法:

在babel.config.js中开始是这样的

module.exports = {
  presets: ['@vue/cli-plugin-babel/preset']
};

第一步:我们需要在polyfills将需要转换的方法加上

module.exports = {
  presets: [
    [
      '@vue/app',
      {
        useBuiltIns: 'entry',
        polyfills: [
          'es6.array.iterator',
          'es6.promise',
          'es7.promise.finally',
          'es6.symbol',
          'es7.array.includes',
          'es6.string.includes',
          'es6.array.find',
          'es6.array.from',
          'es6.object.assign'
        ]
      }
    ]
  ]
};

第二步:在mains.js中加入

import 'core-js/stable';
import 'regenerator-runtime/runtime';

如果想查看更详细配置说明,可看官方文档 @vue/cli-plugin-babel@vue/babel-preset-app