一、前言

开发vue项目过程中，在development模式下发现在IE10,、IE11中无法运行，打开控制台发现已经报错。错误信息提示语法错误，打开定位到的报错位置，可以发现是严格模式报错。编译的代码中出现严格模式可能是因为代码中存在es6而没有被转换为es5，而在项目中已经配置了babel；正常情况下是不会出现es6未被转换的情况的。

由于babel配置采用的是vue官方推荐的或者说vue官方默认的方案，那么是不是这个方案存在什么问题呢。

打开vue-cli官方文档，在其文档中看到这样的描述：

image

可以看到，默认情况下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中的依赖项的依赖项导致的。报错位置信息示例，如图。

QQ截图20210525121544.jpg

QQ截图20210525121637.jpg

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 所以最终的包大小可能会增加。