详解Vue iview IE浏览器不兼容报错(Iview Bable polyfill)


Posted in Javascript onJanuary 07, 2019

由于Iview编译使用到了es6的一些新特性,Internet Explorer所有版本中都会报错,缺少includes、findIxdex等问题。

本人研究涉及到的环境:VueCli3.2 + iview 3.1.5

在IE中不支持ES6的新特性,例如:includes、findIndex……

以下方案可以解决该问题:

1.  Github iview仓储Issues中提到的

改编译范围请用 transpileDependencies: [‘iview'],不要用 include.add,因为默认配置里用了 exclude,在 webpack 中,多个条件同时存在时需要每个条件都满足才执行 rule。

但是加了这个选项后在所有浏览器里都会报错,因为 iView 里这个文件不兼容 ES Module。该文件是用很旧版本的 UMD 格式打包的,新版本 UMD 修复了报错的问题,但没有解决和 ES Module 互操作的问题。在 Webpack 4 中,ES Module 不能和 CommonJS / UMD 混用。

所以这里本质上是 iView 对 Webpack 4 支持的问题,让他们把源码全部转成 ES Module 就好了。
在vue.config.js中添加transpileDependencies: [‘iview']后,可以让bable编译过程中检查iview的代码,自动添加代码中用到的polyfill。

但是由于iview中有一个文件使用的UMD打包,所以编译后的代码还是在运行环境中报错,导致项目无法使用。

该方案虽然解决了ES6语法问题,但是实际使用会报错。

2.  直接给代码添加polyfill

修改bable.config.js使用 useBuiltIns: ‘entry'

module.exports = {presets: [ ['@vue/app', {useBuiltIns:'entry'} ] ]}

在Vue入口文件main中导入bable的polyfill

import'@babel/polyfill';

这种方案bable编译时,会自动导入目标浏览器(browserslist中配置)需要用到的polyfill,可以保证全局代码使用都可以新ES代码。但是,也许有些polyfill会一直用不到,额外增加了编译后的文件体积。

3.  使用balbe env,预置iview中所需要的polyfill(推荐做法)

修改bable.config.js 添加预导入的polyfill。目前我的项目中用到的polyfill有'es6.promise',‘es6.array.find-index',‘es7.array.includes',‘es6.string.includes'

module.exports = { presets: [ ['@vue/app', {
  debug:true,
  polyfills: [ 'es6.promise' , 'es6.array.find-index' , 'es7.array.includes' , 'es6.string.includes' ] 
 } ] ]}

这种方案依然使用Vue项目默认方案,不同的是在项目编译时,会导入polyfills中指定的polyfill,这样既可解决iview在ie中运行报错的问题。

上面中是我目前用到的几polyfill,如果需要其它铺垫,可以自行添加。

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

Javascript 相关文章推荐
JavaScript 模式之工厂模式(Factory)应用介绍
Nov 15 Javascript
网页右键ie不支持event.preventDefault和event.returnValue (需要加window)
Feb 22 Javascript
jquery ajax方式直接提交整个表单核心代码
Aug 15 Javascript
jquery ajax修改全局变量示例代码
Nov 08 Javascript
js简单实现根据身份证号码识别性别年龄生日
Nov 29 Javascript
Node.js中使用计时器定时执行函数详解
Aug 15 Javascript
JavaScript学习心得之概述
Jan 20 Javascript
jQuery实现简单下拉导航效果
Sep 07 Javascript
基于vue的换肤功能的示例代码
Oct 10 Javascript
vue2.0 父组件给子组件传递数据的方法
Jan 15 Javascript
解决vue的 v-for 循环中图片加载路径问题
Sep 03 Javascript
element-ui和vue表单(对话框)验证提示语(残留)清除操作
Sep 11 Javascript
利用React Router4实现的服务端直出渲染(SSR)
Jan 07 #Javascript
Node.js EventEmmitter事件监听器用法实例分析
Jan 07 #Javascript
小程序二次贝塞尔曲线实现购物车商品曲线飞入效果
Jan 07 #Javascript
jQuery实现的别踩白块小游戏完整示例
Jan 07 #jQuery
jQuery判断自定义属性data-val用法示例
Jan 07 #jQuery
jQuery实现的简单歌词滚动功能示例
Jan 07 #jQuery
微信小程序发送短信验证码完整实例
Jan 07 #Javascript
You might like
PHP的博客ping服务代码
2012/02/04 PHP
phpmail类发送邮件函数代码
2012/02/20 PHP
解析htaccess伪静态的规则
2013/06/18 PHP
关于Zend Studio 配色方案插件的介绍
2013/06/24 PHP
PHP中的闭包(匿名函数)浅析
2015/02/07 PHP
jQuery第三课 修改元素属性及内容的代码
2010/03/14 Javascript
表单验证的完整应用案例探讨
2013/03/29 Javascript
js 数组操作之pop,push,unshift,splice,shift
2014/01/29 Javascript
JavaScript 学习笔记之操作符
2015/01/14 Javascript
Vue实现双向绑定的方法
2016/12/22 Javascript
微信小程序 视图容器组件的详解及实例代码
2017/01/19 Javascript
详解微信第三方小程序代开发
2017/06/23 Javascript
JavaScript循环遍历你会用哪些之小结篇
2018/09/28 Javascript
小程序rich-text组件如何改变内部img图片样式的方法
2019/05/22 Javascript
vue将后台数据时间戳转换成日期格式
2019/07/31 Javascript
python小技巧之批量抓取美女图片
2014/06/06 Python
详解Python中time()方法的使用的教程
2015/05/22 Python
利用Python查看目录中的文件示例详解
2017/08/28 Python
Python之批量创建文件的实例讲解
2018/05/10 Python
Python 判断文件或目录是否存在的实例代码
2018/07/19 Python
Python3爬虫爬取英雄联盟高清桌面壁纸功能示例【基于Scrapy框架】
2018/12/05 Python
python代码 输入数字使其反向输出的方法
2018/12/22 Python
python小程序实现刷票功能详解
2019/07/17 Python
python3.8下载及安装步骤详解
2020/01/15 Python
Python如何将图像音视频等资源文件隐藏在代码中(小技巧)
2020/02/16 Python
Python3.6 + TensorFlow 安装配置图文教程(Windows 64 bit)
2020/02/24 Python
python中常见错误及解决方法
2020/06/21 Python
Python中Pyspider爬虫框架的基本使用详解
2021/01/27 Python
使用 CSS3 中@media 实现网页自适应的示例代码
2020/03/24 HTML / CSS
Lookfantastic挪威官网:英国知名美妆购物网站
2017/07/26 全球购物
英国男士时尚网站:Dandy Fellow
2018/02/09 全球购物
公司人力资源的自我评价
2014/01/02 职场文书
2014年帮扶工作总结
2014/11/26 职场文书
通知怎么写?
2019/04/17 职场文书
导游词之襄阳古城
2019/09/27 职场文书
golang switch语句的灵活写法介绍
2021/05/06 Golang