本文讲一讲自己在工作过程中针对vue-cli3.0项目兼容性配置的学习和应用。
1.browserslist
在 package.json 文件里的 browserslist 字段 (或一个单独的 .browserslistrc 文件)，指定了项目的目标浏览器的范围。
在 package.json 中：
"browserslist": [
"defaults",
"not IE 11",
"not IE_Mob 11",
"maintained node versions",
]
在 .browserslistrc 中：
# 支持的浏览器
defaults
not IE 11
not IE_Mob 11
maintained node versions
这个值会被 @babel/preset-env 和 Autoprefixer 用来确定需要转译的 JavaScript 特性和需要添加的 CSS 浏览器前缀，自动生成兼容目标浏览器的css代码，很好用！vue-cli 3.0默认开启了autoprefixer，所以你把需要兼容的字段写进browserslist就好了。
2.Polyfill
Vue CLI 3.0项目会默认使用 @vue/babel-preset-app，它通过 @babel/preset-env 和 browserslist 配置来决定项目需要的 polyfill，其作用是把ECMAScript 2015+ 版本的代码转换为向后兼容的 JavaScript 语法。
所以我们只需在babel.config.js文件中进行配置presets字段即可
module.exports = {
presets: [
'@vue/babel-preset-app'
]
};
3.现代模式
有了 Babel 我们可以兼顾所有最新的 ES2015+ 语言特性，但也意味着我们需要交付转译和 polyfill 后的包以支持旧浏览器。这些转译后的包通常都比原生的 ES2015+ 代码会更冗长，运行更慢。现如今绝大多数现代浏览器都已经支持了原生的 ES2015，所以因为要支持更老的浏览器而为它们交付笨重的代码是一种浪费。
Vue CLI 提供了一个“现代模式”帮你解决这个问题。以如下命令为生产环境构建：
vue-cli-service build --modern
命令行中输入上述命令，即可得到两套代码，一个现代版的包，面向支持 ES modules 的现代浏览器，另一个旧版的包，面向不支持的旧浏览器。
-
现代版的包会通过
在被支持的浏览器中加载；它们还会使用进行预加载。 -
旧版的包会通过
<script nomodule>加载，并会被支持 ES modules 的浏览器忽略。 -
一个针对 Safari 10 中
<script nomodule的修复会被自动注入。
在生产环境下，现代版的包通常都会表现出显著的解析速度和运算速度，从而改善应用的加载性能。
提示
<script type="module">需要配合始终开启的 CORS 进行加载。这意味着你的服务器必须返回诸如Access-Control-Allow-Origin: *的有效的 CORS 头。如果你想要通过认证来获取脚本，可使将 crossorigin 选项设置为 use-credentials。
同时，现代浏览器使用一段内联脚本来避免 Safari 10 重复加载脚本包，所以如果你在使用一套严格的 CSP，你需要这样显性地允许内联脚本：
Content-Security-Policy: script-src 'self' 'sha256-4RS22DYeB7U14dra4KcQYxmwt5HkOInieXK1NUMBmQI='
学海无涯，往前继续游吧！
