為甚麼用vue做的網頁在IE會一片空白?

Published in

Coding Hot Pot

Feb 8, 2021

之前開發新專案時遇到一個問題，利用vue cli建置開發環境，發現用IE 11打開是白茫茫的一片，簡直是晴天霹靂！打開IE開發者工具也沒有任何報錯! 這下真的要靠通靈了，通常沒有線索的錯誤絕對是最難抓bug的...

找了老半天才發現打包出來的chunk-vendor.js裡面居然有let、const、class語法！？老叩叩的瀏覽器根本看不懂ES6語法，到底是甚麼原因會讓ES6沒被轉成ES5呢?

發揮神農氏嘗百草的精神試了多種方法，試到懷疑人生，但幸好最後還是有找到解決方法，以下就把嘗試的幾種作法簡單的列出來

babel polyfill

讓bable來降轉語法，把ES6轉成ES5才能在多數瀏覽器正常運作

yarn add babel-polyfill

然後在main js引入

import '@babel/polyfill'

重新啟動之後，恩… 完全沒有用

babel-loader 會忽略node_module底下的文件，如果需要透過babel編譯的pluging就要在transpileDependencies的陣列底下列出

在vue.config.js裡面加上transpileDependencies

module.exports = {
 transpileDependencies:[/node_modules/套件名稱]
}

換成第二種依然沒用

module.exports = {
 transpileDependencies:[套件名稱]
}

.browserslistrc的設定原本是被列在package.json底下，新版cli的是在根目錄下獨立出一支檔案，針對網頁相容性做設定

> 1%
last 2 versions
not ie < 11

但…依然無動於衷

resolve.mainFields為webpack的其中一項設定

configureWebpack: {
   resolve: {
   mainFields: ["module","main"],
 },

部分第三方的套件會在不同環境下提供兩種版本(ES5&ES6)的js，而module和main個別讀取不同的js，module使用ES6的語法，而main則是ES5，並且依照順序決定優先讀取哪一個

預設為module ，畢竟未來趨勢是以ES6為主流，為了支援比較舊的瀏覽器，對調順序後優先讀取main(ES5)版

將vue.config.js的設定調整為以下

mainFields: ["main', ‘module’],

失敗N次之後，終於成功了 🎉🎉🎉

雖然近期IE已經被微軟放生了，但就我所知某些低階的安卓手機自有的瀏覽器還是有這個問題，相容性問題永遠是前端的一大考驗阿...

參考資料

github.com

2021/03/30 更新 — vue cli 4如果發生一樣的問題

babel.config.js 需調整為

vue.config.js

transpileDependencies: ["@vue", "vue", "vue-router", "vuex"],