详解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 相关文章推荐
仿163填写邮件地址自动显示下拉(无优化)
Nov 05 Javascript
jQuery 遍历json数组的实现代码
Sep 22 Javascript
js 链式延迟执行DOME
Jan 04 Javascript
js将控件隐藏及display属性的使用介绍
Dec 30 Javascript
基于iframe实现类似于ajax的页面无刷新
May 31 Javascript
javascript获取重复次数最多的字符
Jul 08 Javascript
javascript关于继承解析
May 10 Javascript
node通过npm写一个cli命令行工具
Oct 12 Javascript
angularjs实现的购物金额计算工具示例
May 08 Javascript
vue v-for循环重复数据无法添加问题解决方法【加track-by='索引'】
Mar 15 Javascript
vue视图不更新情况详解
May 16 Javascript
JS实现简易留言板特效
Dec 23 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
Amazon Prime Video平台《无限住人 -IMMORTAL-》2020年开始TV放送!
2020/03/06 日漫
PHP ignore_user_abort函数详细介绍和使用实例
2014/07/15 PHP
ThinkPHP框架实现的邮箱激活功能示例
2018/06/15 PHP
List the Codec Files on a Computer
2007/06/18 Javascript
弹出层之1:JQuery.Boxy (一) 使用介绍
2011/10/06 Javascript
关于图片按比例自适应缩放的js代码
2011/10/30 Javascript
jquery更换文章内容与改变字体大小代码
2013/09/30 Javascript
javascript 回到顶部效果的实现代码
2014/02/17 Javascript
jQuery拖拽通过八个点改变div大小
2020/11/29 Javascript
js手机号4位显示空格,银行卡每4位显示空格效果
2017/03/23 Javascript
详解vue组件化开发-vuex状态管理库
2017/04/10 Javascript
layer弹窗插件操作方法详解
2017/05/19 Javascript
如何通过非数字与字符的方式实现PHP WebShell详解
2017/07/02 Javascript
微信小程序非swiper组件实现的自定义伪3D轮播图效果示例
2018/12/11 Javascript
js回调函数仿360开机
2019/12/26 Javascript
javascript设计模式 ? 桥接模式原理与应用实例分析
2020/04/13 Javascript
JavaScript变量Dom对象的所有属性
2020/04/30 Javascript
jQuery实现日历效果
2020/09/11 jQuery
nodejs中使用worker_threads来创建新的线程的方法
2021/01/22 NodeJs
Python使用QRCode模块生成二维码实例详解
2017/06/14 Python
利用python批量给云主机配置安全组的方法教程
2017/06/21 Python
python利用正则表达式排除集合中字符的功能示例
2017/10/10 Python
Python cookbook(数据结构与算法)实现优先级队列的方法示例
2018/02/18 Python
使用python来调用CAN通讯的DLL实现方法
2019/07/03 Python
python爬取盘搜的有效链接实现代码
2019/07/20 Python
使用Python的Turtle库绘制森林的实例
2019/12/18 Python
Python实现剪刀石头布小游戏(与电脑对战)
2019/12/31 Python
详解使用canvas保存网页为pdf文件支持跨域
2018/11/23 HTML / CSS
借助HTML5 Canvas API制作一个简单的猜字游戏
2016/03/25 HTML / CSS
全球速卖通西班牙站:AliExpress西班牙
2017/10/30 全球购物
Perfume’s Club意大利官网:欧洲美妆电商
2019/05/03 全球购物
2014村务公开实施方案
2014/02/25 职场文书
2014年稽查工作总结
2014/12/20 职场文书
公司奖励通知
2015/04/21 职场文书
如何制定一份可行的计划!
2019/06/21 职场文书
Spring Boot配合PageHelper优化大表查询数据分页
2022/04/20 Java/Android