原因：出于某種需要置鼻，項目需要兼容萬惡的ie瀏覽器圆裕。
說說環(huán)境：我用的是vue-cli2陋桂， babel版本為7.7.2逆趣，vue-echarts版本為4.0.4。
1嗜历、直接在ie中訪問項目頁面宣渗，一片空白，控制臺各種報錯秸脱。呵呵落包，開心...此刻，報錯信息根本不重要摊唇，因為所有的css樣式居然一個都沒有被加載咐蝇。最后在同事幫助下，找到問題：postcss.config.js文件中指定的ie版本號為： not ie < 9巷查，而我的ie瀏覽器版本為ie11有序。于是修改為：not ie <= 11。到此樣式總算是有了岛请。
2旭寿、ie對ES6及其以上的高級語法支持不足。經(jīng)資料查證崇败，需安裝badel轉(zhuǎn)ES5盅称。我使用了@babel/polyfill
? a肩祥、npm i -D @babel/polyfill
? b、main.js文件中引入@babel/polyfill缩膝，代碼如下：
? ? import "@babel/polyfill"
? c混狠、在webpack.config.base.js入口文件處配置@babel/polyfill。代碼如下：
? ? entry: ['@babel/polyfill', resolve('src/main.js')]
? d疾层、在inedx.html文件中添加meta将饺，代碼如下：（也可指定瀏覽器版本）
? ? <meta http-equiv="X-UA-Compatible" content="ie=edge,chrome" />
3、再次在ie中打開痛黎，依然空白予弧。控制臺有各種報錯信息湖饱。查看報錯文件掖蛤，還是es6語法問題。怎么回事琉历？坠七！不科學(xué)。查看文件路徑：src - assets/src - assets - static旗笔。嗯彪置？意思是這個目錄下的文件并不會被轉(zhuǎn)ES5?驗證后貌似是這樣∮瘢苦逼了拳魁，手動轉(zhuǎn)，幸而代碼并不多撮弧。終于潘懊，手動轉(zhuǎn)好了。（后面才知道贿衍，babel提供了工具授舟。可查看阮一峰的教程：http://www.ruanyifeng.com/blog/2016/01/babel.html?20170213113809或者上官網(wǎng)自行了解：https://www.babeljs.cn/docs/贸辈。不認真看官網(wǎng)释树，活該手動轉(zhuǎn)。）
4擎淤、再次在ie中打開奢啥，依然空白。此時控制臺依然報錯嘴拢。萬幸桩盲，只有一行錯誤信息。呵呵席吴，就這一行赌结，另我頭大捞蛋。多方驗證后，矛頭指向了我全局引入的vue-echarts姑曙，版本為4.0.4襟交。翻閱vue-echarts文檔，需要在webpack.config.base.js文件中進行配置伤靠。（include中添加 resolve('node_modules/vue-echarts')，resolve('node_modules/resize-detector'啼染。resize-detector在vue-echarts已經(jīng)引入因此無需再install）代碼如下：
? ? ? ? ? {
? ? ? ? test: /\.js$/,
? ? ? ? loader: 'babel-loader',
? ? ? ? include: [
? ? ? ? ? resolve('src'),
? ? ? ? ? resolve('node_modules/vue-echarts'),
? ? ? ? ? resolve('node_modules/resize-detector')
? ? ? ? ]
? ? ? }
5宴合、再次在ie中打開，依然空白迹鹅。此時控制臺依然報錯卦洽。還是那一行錯誤信息。什么鬼斜棚？配置無效阀蒂？盛怒之下，我注釋掉了vue-echarts組件弟蚀，刷新頁面蚤霞。頁面終于加載出來了，開心义钉。但為啥配置了沒效果呢昧绣？無解。最后我把vue-echarts版本降到3.1.3捶闸。頁面也可以加載出來夜畴，但代碼中用到4.0.4版本的屬性、方法就沒法用了删壮。于是恢復(fù)到4.0.4版本贪绘。
6、最后將矛頭指向了配置babel的配置文件央碟，各種嘗試后税灌，無果。最后在官網(wǎng)上看到這樣一段描述
這太重要了硬耍，如果要編譯node_modules下的文件就使用babel.config.js文件垄琐，并且官網(wǎng)建議使用babel.config.json格式。Babel本身正在使用它经柴。于是將.babelrc文件替換為babel.config.js文件狸窘，重啟項目。ie加載正常坯认。babel.config.js代碼如下：
module.exports = function (api) {
? api.cache(true);
? const presets = [
? ? [
? ? ? '@babel/preset-env'
? ? ]
? ];
? const plugins = [
? ? '@babel/plugin-proposal-object-rest-spread',
? ? '@babel/plugin-proposal-class-properties',
? ? '@babel/plugin-transform-runtime',
? ? 'transform-vue-jsx'
? ];
? return {
? ? presets,
? ? plugins
? };
};
結(jié)語：經(jīng)過這件事終于意識到翻擒，認真看官網(wǎng)真的氓涣，真的，真的很重要陋气。如果你也在為這樣的問題煩惱劳吠，希望這篇文章對你能有所幫助。
