一、前言
开发vue项目过程中，在development模式下发现在IE10,、IE11中无法运行，打开控制台发现已经报错。错误信息提示语法错误，打开定位到的报错位置，可以发现是严格模式报错。编译的代码中出现严格模式可能是因为代码中存在es6而没有被转换为es5，而在项目中已经配置了babel；正常情况下是不会出现es6未被转换的情况的。
由于babel配置采用的是vue官方推荐的或者说vue官方默认的方案，那么是不是这个方案存在什么问题呢。
打开vue-cli官方文档，在其文档中看到这样的描述：
可以看到，默认情况下useBuiltIns的值为usage，而这种情况下如果项目中引入的依赖包需要特殊的polyfill是无法被检测出来的。那么可以肯定的是问题出自引用的依赖包中的代码包含高版本的es语法的特性而没有被检测出来进行polyfill。
二、解决方案
要解决这个问题可以通过引入****browserslist包含的目标的****所有polyfill。
1、安装babel/polyfill依赖包，如果已经安装过则可以跳过。
安装时执行：npm install --save @babel/polyfill
2、在vue.config.js中配置transpileDependencies。这会为该依赖同时开启语法转换和根据使用情况检测 polyfill。
可以根据控制台中报错的位置查看是哪个依赖报错了，这些依赖不一定是在package.json中引用的也可能是package.json中的依赖项的依赖项导致的。报错位置信息示例，如图。
vue.config.js 配置如下：
//指定babel-polyfill 入口 IE11报语法错误bug修复
configureWebpack: config => {
config.entry.app = ["babel-polyfill", "./src/main.js"];
},
//指定IE下报错的路径，在vue.config.js中配置transpileDependencies。这会为该依赖同时开启语法转换和根据使用情况检测 polyfill
//transpileDependencies: ['node_modules/*'],
transpileDependencies: [
'_pdfjs-dist@2.7.570@pdfjs-dist',
'_jspdf@2.3.1@jspdf'
],
3、配置babel。笔者项目中使用的babel.config.js方式。
module.exports = {
presets: [
['@vue/app', { useBuiltIns: 'entry' }]
]
}
4、在入口文件中导入polyfill。
在入口文件中添加 import '@babel/polyfill'。****这会根据 browserslist 目标导入所有 polyfill，这样你就不用再担心依赖的 polyfill 问题了。
在完成以上配置后就不用再担心依赖的polyfill问题了，不过因为包含了一些没有用到的 polyfill 所以最终的包大小可能会增加。
