vuecil3＋版本下如何兼容谷歌ie等不支持es6的低版本浏览器

前言

在之前的文章中介绍了如何升级vue老项目到最新版本，不可避免的要面临一个困扰前端开发一生的问题:vuecil4版本下如何兼容谷歌ie等不支持es6的低版本浏览器！

新版本更替，网上很多关于兼容性的文章都是vuecil2时的版本时效性都太差了，只能参考，而且很多文件都没有思考啊，只是单纯的把所有兼容性方法都写了一个遍，造成代码冗余和我强迫症。。。这里讲一下vuecil3+关于兼容性有针对性的、亲测的解决办法！

看完这一篇，希望能解决大家关于兼容性问题的疑问。

废话不多说，开始吧~

正文

vue cil官网在开发时，其实介绍了浏览器兼容性的解决方法：浏览器兼容性，已经可以解决大部分问题，如何配置：

一、 配置browserslist

项目中在package.json同级有个.browserslist文件，没有可自行添加。

> 1%
last 2 versions
not dead
not ie <= 8

这个文件是用来指定项目的目标浏览器，换句话说就是写一些条件来告诉转译工具，只给满足条件的浏览器需要兼容，其他的浏览器就不管了！满足条件的浏览器越少当然编译的包代码越少。
解释一下上述几个条件的含义：

• : > 1% 市面上大于1%使用率的浏览器
• last 2 versions 最新两个版本的浏览器
• not dead 没有废弃的浏览器
• not ie <= 8 ie8以下不管，vue本身就不兼容，如果你们项目用vue还需要兼容ie8以下，我建议离职。

还有很多条件可以限制，可以参考官网：browserslist条件配置

关于限制还有其他的配置方式，这只是其中一种，例如：

• 老版本.babelrc文件中的targets，作用相同

  "presets": [
    ["env", {
   
      "modules": false,
      "targets": {
   
        "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
      }
    }],
    "stage-2"
  ],

• 新版本babel.config.js文件中的targets，作用相同，之后论述。
• 在package.json中的browserslist配置，作用相同。

  "browserslist": [
    "> 1%",
    "last 2 versions",