详解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 相关文章推荐
用JavaScript调用WebService的示例
Apr 07 Javascript
Extjs学习笔记之九 数据模型(上)
Jan 11 Javascript
jquery下jstree简单应用 - v1.0
Apr 14 Javascript
使用RequireJS优化JavaScript引用代码的方法
Jul 01 Javascript
javascript中setInterval的用法
Jul 19 Javascript
javascript数据结构之二叉搜索树实现方法
Nov 25 Javascript
jQuery基本选择器(实例及表单域value的获取方法)
May 20 Javascript
以WordPress为例讲解jQuery美化页面Title的方法
May 23 Javascript
vue2滚动条加载更多数据实现代码
Jan 10 Javascript
jQuery+vue.js实现的九宫格拼图游戏完整实例【附源码下载】
Sep 12 jQuery
JS计算输出100元钱买100只鸡问题的解决方法
Jan 04 Javascript
JavaScript实现百度搜索框效果
Mar 26 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
上传文件先创建目录 再上传到目录里面去
2010/12/29 PHP
PHP 第二节 数据类型之数组
2012/04/28 PHP
PHP中include()与require()的区别说明
2017/02/14 PHP
PHPExcel实现表格导出功能示例【带有多个工作sheet】
2018/06/13 PHP
可实现多表单提交的javascript函数
2007/08/01 Javascript
JS 实现获取打开一个界面中输入的值
2013/03/19 Javascript
jquery多选项卡效果实例代码(附效果图)
2013/03/23 Javascript
javascript中RegExp保留小数点后几位数的方法分享
2013/08/13 Javascript
Firefox中使用outerHTML的2种解决方法
2014/06/07 Javascript
node.js中的fs.fchmod方法使用说明
2014/12/16 Javascript
浅谈$(document)和$(window)的区别
2015/07/15 Javascript
JS实现选中当前菜单后高亮显示的导航条效果
2015/10/15 Javascript
理解javascript中的MVC模式
2016/01/28 Javascript
基于javascript实现tab选项卡切换特效调试笔记
2016/03/30 Javascript
JavaScript中数组的22种方法必学(推荐)
2016/07/20 Javascript
Bootstrap实现input控件失去焦点时验证
2016/08/04 Javascript
Bootstrap模态框禁用空白处点击关闭
2016/10/20 Javascript
Jquery EasyUI $.Parser
2017/06/02 jQuery
vue.js移动端app实战1:初始配置详解
2017/07/24 Javascript
jQuery实现的页面遮罩层功能示例【测试可用】
2017/10/14 jQuery
vue中使用codemirror的实例详解
2018/11/01 Javascript
vue实现手机号码的校验实例代码(防抖函数的应用场景)
2019/09/05 Javascript
[52:27]2018DOTA2亚洲邀请赛 3.31 小组赛B组 paiN vs Secret
2018/04/01 DOTA
通过数据库向Django模型添加字段的示例
2015/07/21 Python
Python socket网络编程TCP/IP服务器与客户端通信
2017/01/05 Python
Python range、enumerate和zip函数用法详解
2019/09/11 Python
澳大利亚男士西服品牌:M.J.Bale
2018/02/06 全球购物
汽车队司机先进事迹材料
2014/02/01 职场文书
公安四风对照检查材料思想汇报
2014/10/11 职场文书
开展批评与自我批评发言材料
2014/10/17 职场文书
关于感谢信的范文
2015/01/23 职场文书
个人欠条范本
2015/07/03 职场文书
高中地理教学反思
2016/02/19 职场文书
vue中三级导航的菜单权限控制
2021/03/31 Vue.js
Redis 配置文件重要属性的具体使用
2021/05/20 Redis
JavaScript实现简单计时器
2021/06/22 Javascript