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

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

之前開發新專案時遇到一個問題，利用 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 引入

1
import '@babel/polyfill'

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

transpileDependencies

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

在 vue.config.js 裡面加上transpileDependencies

1
2
3
4

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

換成第二種依然沒用

1
2
3
module.exports = {
  transpileDependencies: [套件名稱],
};

.browserslistrc

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

1
> 1%last 2 versionsnot ie < 11

但…依然無動於衷

mainFields

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

1
2
3
4
configureWebpack: {
 resolve: {
 mainFields: ["module","main"],
 },

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

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

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

1
mainFields: ["main", "module"],

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

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

參考資料

Does not work in IE11 · Issue #268 · fabiospampinato/cash
_Current behavior In IE11, cash does not work bacause of Expected identifier error. This error is caused by remaining…_github.com

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

babel.config.js 需調整為

vue.config.js

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