問題描述

vue專案在非IE核心的瀏覽器中顯示正常，在IE核心瀏覽器中報錯，並顯示空白。報錯如下：
SCRIPT5022:  [vuex] vuex requires a Promise polyfill in this browser.
SCRIPT5009: “Promise”未定義.

報錯原因

Babel 預設只轉換新的 JavaScript 句法（syntax），而不轉換新的 API ，比如 Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise 等全域性物件，以及一些定義在全域性物件上的方法（比如 Object.assign）都不會轉碼。為了解決這個問題，我們使用一種叫做 Polyfill（程式碼填充，也可譯作相容性補丁）的技術。

簡單地說，IE瀏覽器對ES6中的promise無法支援，因此需要通過引入babel-polyfill來正常使用ES6的功能。

解決方法

第一步：安裝babel-polyfill
npm install --save-dev babel-polyfill

第二步：在入口檔案中引入
import 'babel-polyfill';

第三步：修改webpack配置檔案（非必須）
用了官方腳手架vue-cli，還需要在webpack.config.js配置檔案中修改配置。如果使用的是vue-cli+vue webpack模板則在webpack.base.conf.js中增加。

// 修改前

// 修改前
module.exports = {
    entry: {
   	app: './src/main.js'
    }
}

// 修改後

// 修改後
module.exports = {
   entry: {
       app: ["babel-polyfill", "./src/main.js"]
   }
};
 

提示：部分開發者說要直接引入node_modules中的js檔案路徑才有效：

entry: {
    app: ['./node_modules/babel-polyfill/dist/polyfill.js','./src/main.js']
},

測試結果

本地測試IE瀏覽器Edge正常了，但是IE10及以下版本又出現了上面的報錯，沒關係，將專案打包放在伺服器就都沒問題了。

文中表述僅代表個人觀點，有問題歡迎留言交流，或關注樓主微信公眾號：上班熊的環球夢。