详解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 相关文章推荐
解决 firefox 不支持 document.all的方法
Mar 12 Javascript
Javascript Object.extend
May 18 Javascript
js操作二级联动实现代码
Jul 27 Javascript
腾讯的ip接口 方便获取当前用户的ip地理位置
Nov 25 Javascript
javascript 全选与全取消功能的实现代码
Dec 23 Javascript
jQuery仿Excel表格编辑功能的实现代码
May 01 Javascript
jquery简单实现鼠标经过导航条改变背景图
Dec 17 Javascript
SpringMVC框架下JQuery传递并解析Json格式的数据是如何实现的
Dec 10 Javascript
javascript self对象使用详解
Oct 18 Javascript
JS与jQuery实现ListBox上移,下移,左移,右移操作功能示例
May 31 jQuery
jQuery实现异步上传一个或多个文件
Aug 17 jQuery
使用typescript快速开发一个cli的实现示例
Dec 09 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 Stream_*系列函数
2010/08/01 PHP
dedecms函数分享之获取某一栏目所有子栏目
2014/05/19 PHP
10个简化PHP开发的工具
2014/12/25 PHP
解决ThinkPHP下使用上传插件Uploadify浏览器firefox报302错误的方法
2015/12/18 PHP
PHP 使用 Imagick 裁切/生成缩略图/添加水印自动检测和处理 GIF
2016/02/19 PHP
总结PHP如何获取当前主机、域名、网址、路径、端口和参数等
2016/09/09 PHP
javascript 命名空间以提高代码重用性
2008/11/13 Javascript
JS类的封装及实现代码
2009/12/02 Javascript
javascript调试说明
2010/06/07 Javascript
基于Jquery的动态创建DOM元素的代码
2010/12/28 Javascript
Javascript中找到子元素在父元素内相对位置的代码
2012/07/21 Javascript
Jquery图片滚动与幻灯片的实例代码
2013/04/08 Javascript
js获取所有checkbox的值的简单实例
2016/05/30 Javascript
AngularJS入门教程之与服务器(Ajax)交互操作示例【附完整demo源码下载】
2016/11/02 Javascript
jQuery Datatable 多个查询条件自定义提交事件(推荐)
2017/08/24 jQuery
Vue文件配置全局变量的实例
2018/09/06 Javascript
vue之组件内监控$store中定义变量的变化详解
2019/11/08 Javascript
Node.js中的异步生成器与异步迭代详解
2021/01/31 Javascript
[39:52]2018DOTA2亚洲邀请赛 4.3 突围赛 EG vs Newbee 第一场
2018/04/04 DOTA
解决python3 HTMLTestRunner测试报告中文乱码的问题
2018/12/17 Python
详解python列表(list)的使用技巧及高级操作
2019/08/15 Python
Python使用贪婪算法解决问题
2019/10/22 Python
python学生信息管理系统实现代码
2019/12/17 Python
Python内建序列通用操作6种实现方法
2020/03/26 Python
Python 实现将numpy中的nan和inf,nan替换成对应的均值
2020/06/08 Python
HTTP状态码详解
2021/03/18 杂记
Booking.com德国:预订最好的酒店和住宿
2020/02/16 全球购物
中学家长会邀请函
2014/01/17 职场文书
暑期研修感言
2014/02/17 职场文书
《回乡偶书》教学反思
2014/04/12 职场文书
道路交通事故赔偿协议书
2014/10/24 职场文书
《平移和旋转》教学反思
2016/02/19 职场文书
《兰兰过桥》教学反思
2016/02/20 职场文书
python实现的web监控系统
2021/04/27 Python
Pytorch GPU内存占用很高,但是利用率很低如何解决
2021/06/01 Python
Android开发之WECHAT微信小程序路由跳转的两种形式
2022/04/12 Java/Android