企业网站banner素材北京网站优化经理

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