問題描述

vue項目在非IE內(nèi)核的瀏覽器中顯示正常，在IE內(nèi)核瀏覽器中報錯，并顯示空白。報錯如下：
SCRIPT5022:? [vuex] vuex requires a Promise polyfill in this browser.
SCRIPT5009: “Promise”未定義.

報錯原因

Babel 默認(rèn)只轉(zhuǎn)換新的 JavaScript 句法（syntax），而不轉(zhuǎn)換新的 API ，比如 Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise 等全局對象，以及一些定義在全局對象上的方法（比如 Object.assign）都不會轉(zhuǎn)碼。為了解決這個問題，我們使用一種叫做 Polyfill（代碼填充，也可譯作兼容性補(bǔ)丁）的技術(shù)。

簡單地說，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"]} };

提示：部分開發(fā)者說要直接引入node_modules中的js文件路徑才有效：

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

測試結(jié)果

本地測試IE瀏覽器Edge正常了，但是IE10及以下版本又出現(xiàn)了上面的報錯，沒關(guān)系，將項目打包放在服務(wù)器就都沒問題了。

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

總結(jié)

以上是生活随笔為你收集整理的vue项目在IE中显示空白，报错：vuex requires a Promise polyfill in this browser的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。