详解vue 兼容IE报错解决方案


Posted in Javascript onDecember 29, 2018

IE 页面空白

报错信息

详解vue 兼容IE报错解决方案

详解vue 兼容IE报错解决方案

此时页面一片空白

报错原因

Babel 默认只转换新的 JavaScript 语法(如箭头函数),而不转换新的 API ,比如 Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise 等新的对象或者方法。

例如 Promise 、新的原生方法如 String.padStart (left-pad) 等。为了解决这个问题,我们使用一种叫做 Polyfill(代码填充,也可译作兼容性补丁)的技术。

简单的说,兼容问题一般是IE 对于es6 的部分新对象、表达式,语法并不支持,解决方案是使用 babel-polyfill 来正常使用ES6。

Polyfill 是什么

举个例子,有些旧浏览器不支持 Number.isNaN方法,Polyfill就可以是这样的:

if(!Number.isNaN) {
  Number.isNaN = function(num) {
    return(num !== num);
  }
}

Polyfill就是类似这样解决API的兼容问题

解决方案

1、使用babel-polyfill

引入 babel-polyfill

npm i -S babel-polyfill

如何使用

使用它时需要在你应用程序的入口点顶部或打包配置中引入。

在main.js 引入

import 'babel-polyfill'

或者在config中的 webpack.base.conf.js中 修改配置

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

2、在index.html 加入以下代码(非必须)

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

3、babel-loader 中指定模块转码

增加了poly-fill还是报错,这一般是使用了第三方的ui框架、库、插件等,并且这些ui框架、库、插件底层有es6的语法。

找到webpack.base.conf.js 中的babel-loader

比如我这里用了element-ui 跟 v-charts 修改成如下:

{
    test: /\.js$/,
    loader: 'babel-loader',
    include: [
     resolve('src'),
     resolve('test'),
     resolve('node_modules/webpack-dev-server/client'),
     resolve('node_modules/v-charts/src'),
     resolve('node_modules/vue-awesome'),
     resolve('node_modules/element-ui/packages'),
     resolve('node_modules/element-ui/src')
    ]
}

4、打包问题

如果是webpack代码打包出错,一般到 github webpack Issues中可以找到答案

这个错误是因为webpack-dev-server 版本问题

详解vue 兼容IE报错解决方案

5、Babel 配置 .babelrc文件

.babelrc是Babel的配置文件,放在项目根目录下。一般情况下.babelrc文件不需要修改,如果以上都做了,还是报错,可以看下官网文档来配置下该文件

详解vue 兼容IE报错解决方案

在项目使用 vue-cli 生成的代码中,根目录有一个 .babelrc 文件。在默认生成的模板内容中,增加 "useBuiltIns": "entry",这是一个指定哪些内容需要被 polyfill(兼容) 的设置

useBuiltIns 有三个设置

  • false - 不做任何操作
  • entry - 根据浏览器版本的支持,将 polyfill 需求拆分引入,仅引入有浏览器不支持的polyfill
  • usage - 检测代码中 ES6/7/8 等的使用情况,仅仅加载代码中用到的 polyfill
{
 "presets": [
  ["env", {
   "modules": false,
   "useBuiltIns": "entry"
  }],
  "stage-2"
 ],
 "plugins": ["transform-runtime", "transform-vue-jsx"],
 "env": {
  "test": {
   "presets": ["env", "stage-2"],
   "plugins": ["istanbul"]
  }
 }
}

具体相关可以查看Babel官网:https://www.babeljs.cn/

总结

1、用vue 写的项目最多可以兼容到IE9 及以上版本

2、使用babel-polyfill

3、在babel-loader中指定需要转码的第三方的ui框架、库、插件路径

4、配置 .babelrc文件

5、Babel 是一个厉害的东西https://www.babeljs.cn/

补充:

问题:ie浏览器autoprefixer自动补全css前缀无效

解决方法:

ie发现使用内联样式,autoprefixer无法生效,所以需要写到style标签内。

问题:ie10打开包语法错误,如图所示

详解vue 兼容IE报错解决方案

解决方法

点击app.js,跳转到报错的位置,如图

详解vue 兼容IE报错解决方案

发现最后一行有个import的文件,所以锁定到错误肯定是在引入的这个文件内。

把common.js打开,检查语法,发现有个变量定义用了ES6的语法let。所以引入的文件,插件没有起作用。

没有将ES6转ES5。然后修改了之后,问题解决。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JS类库Bindows1.3中的内存释放方式分析
Mar 08 Javascript
javascript Base类 包含基本的方法
Jul 22 Javascript
javascript oop开发滑动(slide)菜单控件
Aug 25 Javascript
js实现在字符串中提取数字
Nov 05 Javascript
JavaScript forEach()遍历函数使用及介绍
Jul 08 Javascript
高效Web开发的10个jQuery代码片段
Jul 22 Javascript
JS简单获取当前日期时间的方法(如:2017-03-29 11:41:10 星期四)
Mar 29 Javascript
微信小程序之获取当前位置经纬度以及地图显示详解
May 09 Javascript
vue轮播图插件vue-awesome-swiper的使用代码实例
Jul 10 Javascript
基于react后端渲染模板引擎noox发布使用
Jan 11 Javascript
vue-cli3.0如何使用CDN区分开发、生产、预发布环境
Nov 22 Javascript
浅谈vuex中store的命名空间
Nov 08 Javascript
玩转Koa之koa-router原理解析
Dec 29 #Javascript
Bootstrap Paginator+PageHelper实现分页效果
Dec 29 #Javascript
玩转Koa之核心原理分析
Dec 29 #Javascript
如何从0开始用node写一个自己的命令行程序
Dec 29 #Javascript
bootstrap与pagehelper实现分页效果
Dec 29 #Javascript
微信小程序实现滑动切换自定义页码的方法分析
Dec 29 #Javascript
vue实现分页组件
Jun 16 #Javascript
You might like
php解析base64数据生成图片的方法
2016/12/06 PHP
PHP设计模式之工厂模式实例总结
2017/09/01 PHP
Javascript 实现TreeView CheckBox全选效果
2010/01/11 Javascript
jQuery学习5 jQuery事件模型
2010/02/07 Javascript
JavaScript的Date()方法使用详解
2015/06/09 Javascript
JavaScript实现身份证验证代码
2016/02/17 Javascript
实例讲解jQuery EasyUI tree中state属性慎用
2016/04/01 Javascript
JavaScript根据CSS的Media Queries来判断浏览设备的方法
2016/05/10 Javascript
JavaScript必知必会(九)function 说起 闭包问题
2016/06/08 Javascript
JQuery实现图片轮播效果
2017/05/08 jQuery
微信小程序使用Promise简化回调
2018/02/06 Javascript
关闭Vue计算属性自带的缓存功能方法
2018/03/02 Javascript
重学 JS:为啥 await 不能用在 forEach 中详解
2019/04/15 Javascript
vue element中axios下载文件(后端Python)
2019/05/10 Javascript
微信小程序自定义组件components(代码详解)
2019/10/21 Javascript
js常用方法、检查是否有特殊字符串、倒序截取字符串操作完整示例
2020/01/26 Javascript
微信小程序实现音频文件播放进度的实例代码
2020/03/02 Javascript
编程语言Python的发展史
2014/09/26 Python
在python3环境下的Django中使用MySQL数据库的实例
2017/08/29 Python
python使用os.listdir和os.walk获得文件的路径的方法
2017/12/16 Python
详解Python中的正则表达式
2018/07/08 Python
python训练数据时打乱训练数据与标签的两种方法小结
2018/11/08 Python
Python3实现从排序数组中删除重复项算法分析
2019/04/03 Python
pytorch 状态字典:state_dict使用详解
2020/01/17 Python
30行Python代码实现高分辨率图像导航的方法
2020/05/22 Python
微软瑞士官方网站:Microsoft瑞士
2018/04/20 全球购物
英国创新设计文具、卡片和礼品包装网站:Paperchase
2018/07/14 全球购物
介绍java中初始化块的使用
2012/09/11 面试题
连锁酒店店长职责范本
2014/02/13 职场文书
班级德育工作实施方案
2014/02/21 职场文书
公司新年寄语
2014/04/04 职场文书
外语系毕业生求职自荐信
2014/04/12 职场文书
税务职业生涯规划书范文
2014/09/16 职场文书
教师辞职信范文
2015/02/28 职场文书
2016年社区植树节活动总结
2016/03/16 职场文书
win10清理dns缓存
2022/04/19 数码科技