VueCli3+vue2.6兼容ie11

一、首先确定babel-polyfill版本号，babel-polyfill 7.4.0以前使用babel/polyfill,之后使用core-js/stable 和 regenerator-runtime。可参考官方文档babel-polyfill官方文档。

二、此处使用core-js＋regenerator-runtime

1、首先打开【package.json】确定是否下载core-js和regenerator-runtime依赖，未下载使用yarn add core-js和yarn add regenerator-runtime命令进行下载，下载完成如下

2、 在【main.js】中引入，core-js版本不同，引入方法不同

（1）core-js3.*以后版本

import 'core-js/stable';

import 'regenerator-runtime/runtime';

（2）core-js3.*以前版本

import 'core-js';

 

 3、打开【babel.config.js】进行配置

presets: [

[

      '@vue/app',

      {

        useBuiltIns: 'entry',

      },

    ],

  ],

 4、打开【package.json】配置browserslist或者【.browserslistrc】文件进行配置

> 1%
last 2 versions
not ie <= 8

5、 在【index.html】中引入proxy.min.js

（1）下载到本地引入

<script src = "<%= BASE_URL %>proxy.min.js"></script>

（2）直接引入proxy.min.js

<script src = "https://cdn.jsdelivr.net/npm/proxy-polyfill@0.3.0/proxy.min.js"></script>

6、 配置【vue.config.js】，这一步比较重要，之前很多次都是在这里出错，因为IE不支持ES6，所以需要将ES6转译成ES5。但是node_modules中的依赖不会进行转译，所以需要手动配置。

（1）因为排查使用了ES6语法需要转译的依赖有点麻烦，所以，先全部转译，看下IE下能否出来效果。在【vue.config.js】中添加下面语句，然后重新编译，等待时间会稍微比较长。

 transpileDependencies: [/node_modules[/\\\\](.*)[/\\\\]/,],

（2）此时打开ie11浏览器应该是可以正常展示了，但是还需要优化，定位到具体的依赖，缩短编译时间。我们可以将这一行配置注释掉，然后根据ie报错进行修改依赖。

1）首先我们将IE设置为调试模式，然后F12进行调试，可以看到报了chunk-vendors.js语法错误，但是无法准确定位到是哪个依赖的错误，所以下面采用比较笨的方法

2） 我们将【package.json】中dependencies中的依赖都添加到transpileDependencies中，然后执行npm ls -g -depth=0将获取到的一级依赖也都添加到transpileDependencies中，再在最前方添加dom7，再重新编译一下。

transpileDependencies: [/node_modules[/\\\\](dom7|@vue|rimraf|webpack|webpack-cli|ant-design-vue|axios|babel-loader|babel-plugin-import|core-js|echarts|jquery|js-base64|less|less-loader|moment|qs|regenerator-runtime|sortablejs|swiper|uuid|video.js|vue|vue-amap|vue-awesome-swiper|vue-i18n|vue-jsonp|vue-router|vue-seamless-scroll|vue-video-player|vuedraggable|vuex|)[/\\\\]/,]

3）此时打开IE应该可以正常显示了，但是需要转译的还是太多，所以我们进行逐步删除排查，最终排查出来结果入下：

  transpileDependencies: [/node_modules[/\\\\](dom7|js-base64|swiper|vue-i18n|)[/\\\\]/,],

ps：其实可以根据报错定位到哪些引入包需要转译，但是由于ie性能问题，经常看不到提示，所以采用了这个笨方法，正常提示如下：可以看到是swiper需要进行转译