vue兼容低版本chrome

做项目遇到了一些不能轻易升级chrome版本的客户，他们还用着40版本的chrome，所以今天就来说说为了兼容低版本的chrome做了哪些努力。

主要是两件事情：

（1）将自己代码转为es5版本
（2）将node_modules中引用的插件，有需要的部分转为es5版本

转自己的

配置自己的代码我们需要用到一个新的插件babel-polyfill

（1）安装

由于这个需要在你的源码之前使用，我们需要将其安装为dependency而不是dev-dependency。

npm install --save @babel/polyfill

（2）使用

vue.config.js

module.exports = {
  pages: {
    index: {
      // add here ---start---
      entry: ['node_modules/babel-polyfill/dist/polyfill.js', 'src/main.js'],
      // add here ---end---
      template: 'public/index.html',
      filename: 'index.html',
      chunks: ['chunk-vendors', 'chunk-common', 'index'],
    },
  },
};

更多使用请看官方文档

（3）配置

新增babel.config.js文件

将所需要使用的polyfill配置出来

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

转node_modules下指定插件

vue.config.js
新增配置

transpileDependencies: ['your dependency'],

更多使用请看官方文档