本文講一講自己在工作過程中針對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='
學海無涯，往前繼續遊吧！