解决vue项目在development模式下ie11、ie10 出现语法错误的问题

一、前言

开发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中的依赖项的依赖项导致的。报错位置信息示例，如图。

配置如下： 

const Terser = require('terser-webpack-plugin')
module.exports = {

    // 此处省略其他配置    

   productionSourceMap: false,
   // node_modules依赖项es6语法未转换问题
   transpileDependencies: [
      'ansi-regex',
      'strip-ansi',
      'vue-router'
   ]
}

3、配置babel。笔者项目中使用的babel.config.js方式。

module.exports = {
   presets: [
      ['@vue/app', { useBuiltIns: 'entry' }]
   ]
}

4、在入口文件中导入polyfill。

在入口文件中添加 import '@babel/polyfill'。这会根据 browserslist 目标导入所有 polyfill，这样你就不用再担心依赖的 polyfill 问题了。

在完成以上配置后就不用再担心依赖的polyfill问题了，不过因为包含了一些没有用到的 polyfill 所以最终的包大小可能会增加。

参考资料：https://segmentfault.com/q/1010000017997366

                  https://cli.vuejs.org/zh/guide/browser-compatibility.html#usebuiltins-usage