Vue兼容ie9+

Posted 2023-03-27

参考技术A

首先说明一下我在这里使用的是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 。顺便贴出目前我的配置。

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

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

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

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