Vue 2.0在IE11中打开项目页面空白的问题解决


Posted in Javascript onJuly 16, 2017

前言

因为工作的需要,学习Vue2.0也有一段时间,最近在用Vue2.0的官方脚手架工具构建的项目,chrome中跑一直没有问题,但ie11打开出现了bug:

问题

ie11打开vue2.0项目空白,控制台报错 vuex requires a Promise polyfill in this browser;

原因

Babel 默认只转换新的 JavaScript 句法(syntax),而不转换新的 API ,比如 Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise 等全局对象,以及一些定义在全局对象上的方法(比如 Object.assign)都不会转码。为了解决这个问题,我们使用一种叫做 Polyfill(代码填充,也可译作兼容性补丁) 的技术。

简单地说,polyfill即是在当前运行环境中用来复制(意指模拟性的复制,而不是拷贝)尚不存在的原生 api 的代码。

解决

安装babel-polyfill

步骤

npm安装

npm install --save-dev babel-polyfill

在入口文件倒入即可

import 'babel-polyfill'

如果也是用了官方脚手架vue-cli,还需要在webpack.config.js配置文件中做各修改,用

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

替换

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

总结

好了,问题到这就解决了,以上就是这篇文章的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
JavaScript聚焦于第一个字段的代码
Oct 15 Javascript
16个最流行的JavaScript框架[推荐]
May 29 Javascript
JS实现商品倒计时实现代码
May 03 Javascript
jquery遍历筛选数组的几种方法和遍历解析json对象
Dec 13 Javascript
JS中this上下文对象使用方式
Oct 09 Javascript
AngularJS控制器controller给模型数据赋初始值的方法
Jan 04 Javascript
jQuery中layer分页器的使用
Mar 13 Javascript
详解JavaScript中return的用法
May 08 Javascript
bootstrap Table服务端处理分页(后台是.net)
Oct 19 Javascript
最实用的JS数组函数整理
Dec 05 Javascript
使用vue-cli3新建一个项目并写好基本配置(推荐)
Apr 24 Javascript
微信小程序云开发之数据库操作
May 18 Javascript
node.js express中app.param的用法详解
Jul 16 #Javascript
Node.js中流(stream)的使用方法示例
Jul 16 #Javascript
js+html5实现半透明遮罩层弹框效果
Aug 24 #Javascript
Vue Spa切换页面时更改标题的实例代码
Jul 15 #Javascript
Vue应用部署到服务器的正确方式
Jul 15 #Javascript
js+html5实现侧滑页面效果
Jul 15 #Javascript
angular2 ng build部署后base文件路径问题详细解答
Jul 15 #Javascript
You might like
Smarty模板快速入门
2007/01/04 PHP
PHP中基本符号及使用方法
2010/03/23 PHP
codeigniter教程之上传视频并使用ffmpeg转flv示例
2014/02/13 PHP
神盾加密解密教程(二)PHP 神盾解密
2014/06/08 PHP
php递归函数怎么用才有效
2018/02/24 PHP
基于laravel-admin 后台 列表标签背景的使用方法
2019/10/03 PHP
比较简单的一个符合web标准的JS调用flash方法
2007/11/29 Javascript
JavaScript高级程序设计(第3版)学习笔记10 再访js对象
2012/10/11 Javascript
node.js中的http.response.setHeader方法使用说明
2014/12/14 Javascript
javascript RegExp 使用说明
2016/05/21 Javascript
JS中正则表达式只有3种匹配模式(没有单行模式)详解
2016/07/28 Javascript
jquery插件bootstrapValidator数据验证详解
2016/11/09 Javascript
基于JQuery实现的跑马灯效果(文字无缝向上翻动)
2016/12/02 Javascript
JS正则子匹配实例分析
2016/12/22 Javascript
JS简单获取当前日期和农历日期的方法
2017/04/17 Javascript
Node 自动化部署的方法
2017/10/17 Javascript
vue项目中使用tinymce编辑器的步骤详解
2018/09/11 Javascript
浅谈JS中几种轻松处理'this'指向方式
2019/09/16 Javascript
详解微信小程序中var、let、const用法与区别
2020/01/11 Javascript
如何在postman中添加cookie信息步骤解析
2020/06/30 Javascript
jQuery实现飞机大战小游戏
2020/07/05 jQuery
Vue.js桌面端自定义滚动条组件之美化滚动条VScroll
2020/12/01 Vue.js
Django异步任务之Celery的基本使用
2019/03/23 Python
Python 实现大整数乘法算法的示例代码
2019/09/17 Python
基于Python批量生成指定尺寸缩略图代码实例
2019/11/20 Python
jupyter notebook 恢复误删单元格或者历史代码的实现
2020/04/17 Python
python实现在线翻译
2020/06/18 Python
分享一枚pycharm激活码适用所有pycharm版本我的pycharm2020.2.3激活成功
2020/11/20 Python
CSS3文本换行word-wrap解决英文文本超过固定宽度不换行
2013/10/10 HTML / CSS
大学校务公开实施方案
2014/03/31 职场文书
奥林匹克运动会口号
2014/06/19 职场文书
公司离职证明范本(汇总)
2014/09/10 职场文书
后备干部推荐材料
2014/12/24 职场文书
2016年教师节慰问信
2015/12/01 职场文书
正确使用MySQL update语句
2021/05/26 MySQL
MySQL数据库如何使用Shell进行连接
2022/04/12 MySQL