vue项目在IE中显示空白,报错:vuex requires a Promise polyfill in this browser

问题描述



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及以下版本又出现了上面的报错,没关系,将项目打包放在服务器就都没问题了。


文中表述仅代表个人观点,有问题欢迎留言交流,或关注楼主微信公众号:上班熊的环球梦。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值