详解Vue iview IE浏览器不兼容报错(Iview Bable polyfill)
由于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,如果需要其它铺垫,可以自行添加。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
您可能感兴趣的文章:
- C++继承详解之二——派生类成员函数详解(函数隐藏、构造函数与兼容覆盖规则)
- INF文件详解(32位64位兼容INF)
- Android Material Design 详解(使用support v7兼容5.0以下系统(部分功能))
- Android Material Design 兼容库的使用详解
- 详解如何让InstantClick兼容MathJax、百度统计等
- 【转】http-equiv="X-UA-Compatible" 设置IE浏览器兼容模式详解
- Spring Boot整合ElasticSearch实现多版本兼容的方法详解
- Picasso 详解,完美兼容 OkHttp3.3,缓存优化,支持https
- polyfill处理浏览器API兼容
- ios学习之 IOS6屏幕旋转详解(自动旋转、手动旋转、兼容IOS6之前系统)
- Flex布局新旧混合写法详解(兼容微信)
- curvyCorners详解【一款兼容任何浏览器的生成圆角的js插件】
- INF文件详解(32位64位兼容INF)
- 详解PHP版本兼容之openssl调用参数
- 详解Android沉浸式实现兼容解决办法
- Flex布局新旧混合写法详解(兼容微信)
- IE6,IE7,IE8,IE9,FIREFOX,Chrome等浏览器兼容详解收集
- IOS6屏幕旋转详解(自动旋转、手动旋转、兼容IOS6之前系统) 【转】
- js兼容的placeholder属性详解
- 盒型详解及不同浏览器兼容