Vue兼容ie9+

首先说明一下我在这里使用的是vue-cli3创建的项目，不同版本的配置可能略有差异，不过一切以官方文档的为准，在这里先贴出vue-cli文档链接，因为文档说明还是挺详细的。https://cli.vuejs.org/zh/guide/browser-compatibility.html#browserslist

进入正题，这里说明一下本文实现兼容应用的是Babel7.4.0之前的版本，7.4.0版本前转码主要应用到的工具还是@Babel/polyfill，由于Babel默认只转换新的javascript语法，不支持新的Api（如Set，Map，Promise），所以还需要引入cors.js，这个项目中没有使用到Generator函数所以不需要引入regenerator-runtime，首先用vue-cli3创建的项目package.json文件中有browserslist这个字段或是在项目根目录有一个.browserslistrc文件，这里是用来指定可用浏览器的范围，关于指定浏览器版本配置可以参考这里https://github.com/browserslist/browserslist。顺便贴出目前我的配置。

配置.browserslistrc

> 1%    //通过全局使用情况统计信息选择的浏览器版本(个人理解为支持99%现代浏览器)
last 2 versions  //每个浏览器的最后两个版本
not ie <= 8  //不支持ie8及以下

可以在终端运行npx browserslist查询当前已选择了那些浏览器

一个用vue-cli创建的项目中默认会使用@vue/babel-preset-app，我们可以在node_modules > @vue > babel-preset-app > package.json文件中看到配置了core.js，

image.png

需要注意的是vue-cli默认创建的项目中使用的是core-js2.6版本的，而使用npm下载的默认为3.+版本，使用3.+版本运行vue项目会出现报错core包不完整，vue-cli会按照core.js2.+版本的加载方式去转码，而core.js3.+版本中modules文件夹中子文件名称统一前缀为es，core.js2.+中分为es5，es6，es7这几个模块，再去编译就会出现错误

配置babel.config.js

module.exports = {
  presets: [
    [
      '@vue/app',  //这里引用的则是node_modules中vue-cli对cors.js的配置
      {
        useBuiltIns: 'entry'  
        /*useBuiltIns提供了三个值 entry, usage,false,
          entry: 会自动根据 .browserslistrc替换成浏览器不兼容的所有 polyfill，
                  需要在入口文件手动添加 import '@babel/polyfill'。
          usage: 根据配置的浏览器兼容，以及你代码中用到的 API 来进行 polyfill，实现了按需添加
          false: 此时不对 polyfill 做操作。如果引入 @babel/polyfill，则无视配置的浏览器兼容，引入所有的 polyfill
          */
      }
    ]
  ],
}

配置vue.config.js

module.exports = {
  //默认情况下 babel-loader 会忽略所有 node_modules 中的文件。
  //如果你想要通过 Babel 显式转译一个依赖，可以在这个选项中列出来
  transpileDependencies: [
    'iview',
    'tree-table-vue',
    'apexcharts'
  ],
  //configureWebpack可以在该选项提供一个对象，
  //该对象将会被 webpack-merge 合并入最终的 webpack 配置
  configureWebpack: {
      entry: ['@babel/polyfill', './src/main.js']
  }
}

没有在entry入口文件进行配置@babel/polyfill网页打开发现很多es6新的Api是不支持的。

此文章作为学习和记录，如果有问题或是不对的地方欢迎各位大佬指出，感激不尽！