安装相关依赖(core-js)
yarn add core-js
main.js引入
// vue cli官方推荐使用,前提是package.json安装了core-js:
import 'core-js/stable';
import 'regenerator-runtime/runtime';
配置browserslist
通过browserslist来指定项目的目标浏览器范围,编译时会根据配置的目标浏览器来有针对性的转义
.browserslistrc
配置要兼容的浏览器,符合下面搜索条件的所有浏览器都可以自动兼容进行前缀等注入兼容。
内容如下
> 1%
last 2 versions
not ie < 10
配置babel.config.js
通过修改babel.config.js
的相关配置来结合上面进行babel转义的配置;
内容如下:
// presets: [["@vue/app", {useBuiltIns: "entry",}]],// 此为vue/cli3
presets: [["@vue/cli-plugin-babel/preset", {useBuiltIns: "entry",}]],// 此为vue/cli4
关于 useBuiltIns 的配置,三个可选项[false,'entry','usage']
1."useBuiltIns": false
(此时不对 polyfill 做操作。如果引入 @babel/polyfill,则无视配置的浏览器兼容,引入所有的 polyfill。)
-
"useBuiltIns": "entry","corejs": 2
(根据配置的浏览器兼容,引入浏览器不兼容的 polyfill。需要在入口文件手动添加import '@babel/polyfill'
,会自动根据 browserslist 替换成浏览器不兼容的所有 polyfill。
这里需要指定 core-js 的版本, 如果 "corejs": 3, 则import '@babel/polyfill'
需要改成下面这样:)
// 在main.js的头部
import 'core-js/stable';
import 'regenerator-runtime/runtime'; -
"useBuiltIns": "usage",
(usage 会根据配置的浏览器兼容,以及你代码中用到的 API 来进行 polyfill,实现了按需添加。)
修改vue.config.js配置
修改transpileDependencies
相关配置项
node_modules里的依赖默认是不会编译的,会导致es6语法在ie中的语法报错,所以需要在vue.config.js中使用transpileDependencies属性配置node_modules中指定哪些文件夹或文件需要编译.
...
module.exports = {
transpileDependencies: ['*'] // 需要编译的依赖包名
}
..
遇到的问题
-
core-js很多依赖找不到
原因:可能是core-js版本过低,或者babel.config.js里面的presets配置跟cli版本不符合
- 语言文字配置文件语法错误导致ie下白屏
原因:由于项目采用单独的public目录下的语言js文件进行多语言切换,该js不会被打包,所以定义语言文字时使用了const关键字,导致ie不被支持,使用var关键字声明即可