详解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 相关文章推荐
判断目标是否是window,document,和拥有tagName的Element的代码
May 31 Javascript
JavaScript 判断浏览器是否支持SVG的代码
Mar 21 Javascript
JavaScript中5种调用函数的方法
Mar 12 Javascript
一张Web前端的思维导图分享
Jul 03 Javascript
简单谈谈JavaScript的同步与异步
Dec 31 Javascript
基于javascript实现彩票随机数生成(升级版)
Apr 17 Javascript
浅谈JS中逗号运算符的用法
Jun 12 Javascript
javascript 闭包详解及简单实例应用
Dec 31 Javascript
浅谈vuex 闲置状态重置方案
Jan 04 Javascript
jQuery实现简单复制json对象和json对象集合操作示例
Jul 09 jQuery
用node开发并发布一个cli工具的方法步骤
Jan 03 Javascript
解决vue项目router切换太慢问题
Jul 19 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
apache配置虚拟主机的方法详解
2013/06/17 PHP
php生成缩略图示例代码分享(使用gd库实现)
2014/01/20 PHP
PHP错误Allowed memory size of 67108864 bytes exhausted的3种解决办法
2014/07/28 PHP
QQ互联一键登录审核不通过的解决方案
2014/09/10 PHP
PHP中的socket_read和socket_recv区别详解
2015/02/09 PHP
codeigniter显示所有脚本执行时间的方法
2015/03/21 PHP
Laravel Intervention/image图片处理扩展包的安装、使用与可能遇到的坑详解
2017/11/14 PHP
学习ExtJS form布局
2009/10/08 Javascript
javascript 面向对象全新理练之原型继承
2009/12/03 Javascript
JavaScript中setInterval的用法总结
2013/11/20 Javascript
JS的参数传递示例介绍
2014/02/08 Javascript
javascript版的in_array函数(判断数组中是否存在特定值)
2014/05/09 Javascript
js+jquery实现图片裁剪功能
2015/01/02 Javascript
js获取checkbox值的方法
2015/01/28 Javascript
Javascript中的Callback方法浅析
2015/03/15 Javascript
利用JS轻松实现获取表单数据
2016/12/06 Javascript
DropDownList控件绑定数据源的三种方法
2016/12/24 Javascript
jQuery实现联动下拉列表查询框
2017/01/04 Javascript
浅析node应用的timing-attack安全漏洞
2018/02/28 Javascript
Javascript中绑定click事件的四种方式介绍
2018/10/26 Javascript
js实现漂亮的星空背景
2019/11/01 Javascript
vue 中几种传值方法(3种)
2019/11/12 Javascript
微信小程序canvas开发水果老虎机的思路详解
2020/02/07 Javascript
Python reshape的用法及多个二维数组合并为三维数组的实例
2020/02/07 Python
python 带时区的日期格式化操作
2020/10/23 Python
canvas绘制表情包的示例代码
2018/07/09 HTML / CSS
西班牙购买隐形眼镜、眼镜和太阳镜网站:Lentiamo.es
2020/06/11 全球购物
阿里巴巴的Oracle DBA笔试题答案-SQL tuning类
2016/04/03 面试题
Discard Protocol抛弃协议的作用是什么
2015/10/10 面试题
若通过ObjectOutputStream向一个文件中多次以追加方式写入object,为什么用ObjectInputStream读取这些object时会产生StreamCorruptedException?
2016/10/17 面试题
优秀团队获奖感言
2014/02/19 职场文书
民政工作个人总结
2015/02/28 职场文书
聘任协议书(挂靠)
2015/09/21 职场文书
详解Java ES多节点任务的高效分发与收集实现
2021/06/30 Java/Android
NGINX 权限控制文件预览和下载的实现原理
2022/01/18 Servers
Win11 BitLocker 驱动器加密
2022/04/19 数码科技