vuecil3+版本下,兼容ie等不支持es6的低版本浏览器
vue cil官网在开发时,其实介绍了浏览器兼容性的解决方法:浏览器兼容性,已经可以解决大部分问题,如何配置:
一、 配置browserslist
项目中在package.json同级有个.browserslist文件,没有可自行添加。
.browserslist
> 1%
last 2 versions
not dead
not ie <= 8
这个文件是用来指定项目的目标浏览器,换句话说就是写一些条件来告诉转译工具,只给满足条件的浏览器需要兼容,其他的浏览器就不管了!满足条件的浏览器越少当然编译的包代码越少。
解释一下上述几个条件的含义:
1% 市面上大于1%使用率的浏览器
last 2 versions 最新两个版本的浏览器
not dead 没有废弃的浏览器
not ie <= 8 ie8以下不管,vue本身就不兼容
二、 配置babel.config.js
官方告知:一个默认的 Vue CLI 项目会使用 @vue/babel-preset-app,它通过 @babel/preset-env和 browserslist 配置来决定项目需要的 polyfill。
2.1 vue内置转译工具的作用
1.Vue CLI 项目会使用@vue/babel-preset-app,内置转译插件,不需要单独下载,在网上很常见的@vue/app就是它的简写,基于@babel/env;
2.browserslist前面已经说过了,是指定目标浏览器的条件。
3.@babel/preset-env是整个Babel大家族最重要的一个preset。不夸张地说,在vue环境中的所有配置项仅需要它自己就可以完成现代JS工程所需要的所有转码要求。这里就知道他是babel的一个预设配置插件,用于Babel对ES6语法的转码,在vuecil项目已经内置,不需要单独下载,@babel/env就是它的简写。
作用:默认只转换新的JavaScript语法(syntax),而不转换新的 API。
4.polyfill可以认为也是一个工具。作用:用来转译es6语法转译之外缺失的API工具
API