首先說明一下我在這里使用的是vue-cli3創(chuàng)建的項目咐扭，不同版本的配置可能略有差異，不過一切以官方文檔的為準滑废，在這里先貼出vue-cli文檔鏈接蝗肪，因為文檔說明還是挺詳細的。https://cli.vuejs.org/zh/guide/browser-compatibility.html#browserslist
進入正題蠕趁，這里說明一下本文實現(xiàn)兼容應用的是Babel7.4.0之前的版本薛闪，7.4.0版本前轉(zhuǎn)碼主要應用到的工具還是@Babel/polyfill，由于Babel默認只轉(zhuǎn)換新的javascript語法俺陋，不支持新的Api（如Set豁延，Map，Promise）倔韭，所以還需要引入cors.js术浪，這個項目中沒有使用到Generator函數(shù)所以不需要引入regenerator-runtime，首先用vue-cli3創(chuàng)建的項目package.json文件中有browserslist這個字段或是在項目根目錄有一個.browserslistrc文件寿酌，這里是用來指定可用瀏覽器的范圍胰苏，關(guān)于指定瀏覽器版本配置可以參考這里https://github.com/browserslist/browserslist。順便貼出目前我的配置醇疼。
配置.browserslistrc
> 1% //通過全局使用情況統(tǒng)計信息選擇的瀏覽器版本(個人理解為支持99%現(xiàn)代瀏覽器)
last 2 versions //每個瀏覽器的最后兩個版本
not ie <= 8 //不支持ie8及以下
可以在終端運行npx browserslist查詢當前已選擇了那些瀏覽器
一個用vue-cli創(chuàng)建的項目中默認會使用@vue/babel-preset-app硕并，我們可以在node_modules > @vue > babel-preset-app > package.json文件中看到配置了core.js，
需要注意的是vue-cli默認創(chuàng)建的項目中使用的是core-js2.6版本的秧荆，而使用npm下載的默認為3.+版本倔毙，使用3.+版本運行vue項目會出現(xiàn)報錯core包不完整，vue-cli會按照core.js2.+版本的加載方式去轉(zhuǎn)碼乙濒，而core.js3.+版本中modules文件夾中子文件名稱統(tǒng)一前綴為es陕赃，core.js2.+中分為es5，es6颁股，es7這幾個模塊么库，再去編譯就會出現(xiàn)錯誤
配置babel.config.js
module.exports = {
presets: [
[
'@vue/app', //這里引用的則是node_modules中vue-cli對cors.js的配置
{
useBuiltIns: 'entry'
/*useBuiltIns提供了三個值 entry, usage,false,
entry: 會自動根據(jù) .browserslistrc替換成瀏覽器不兼容的所有 polyfill，
需要在入口文件手動添加 import '@babel/polyfill'甘有。
usage: 根據(jù)配置的瀏覽器兼容诉儒，以及你代碼中用到的 API 來進行 polyfill，實現(xiàn)了按需添加
false: 此時不對 polyfill 做操作亏掀。如果引入 @babel/polyfill忱反，則無視配置的瀏覽器兼容泛释，引入所有的 polyfill
*/
}
]
],
}
配置vue.config.js
module.exports = {
//默認情況下 babel-loader 會忽略所有 node_modules 中的文件。
//如果你想要通過 Babel 顯式轉(zhuǎn)譯一個依賴温算，可以在這個選項中列出來
transpileDependencies: [
'iview',
'tree-table-vue',
'apexcharts'
],
//configureWebpack可以在該選項提供一個對象怜校，
//該對象將會被 webpack-merge 合并入最終的 webpack 配置
configureWebpack: {
entry: ['@babel/polyfill', './src/main.js']
}
}
沒有在entry入口文件進行配置@babel/polyfill網(wǎng)頁打開發(fā)現(xiàn)很多es6新的Api是不支持的。
此文章作為學習和記錄注竿，如果有問題或是不對的地方歡迎各位大佬指出韭畸，感激不盡！
