Vue中iviewIE浏览器不兼容报错怎么办

这篇文章给大家分享的是有关Vue中iview IE浏览器不兼容报错怎么办的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。

成都创新互联专注于古县企业网站建设,响应式网站建设,商城网站建设。古县网站建设公司,为古县等地区提供建站服务。全流程定制开发,专业设计,全程项目跟踪,成都创新互联专业和态度为您提供的服务

由于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,如果需要其它铺垫,可以自行添加。

感谢各位的阅读!关于“Vue中iview IE浏览器不兼容报错怎么办”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识,如果觉得文章不错,可以把它分享出去让更多的人看到吧!

网页题目:Vue中iviewIE浏览器不兼容报错怎么办
标题来源:https://www.cdcxhl.com/article14/phojde.html

成都网站建设公司_创新互联,为您提供全网营销推广面包屑导航搜索引擎优化网站内链网站排名静态网站

广告

声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联

搜索引擎优化