详解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，如果需要其它铺垫，可以自行添加。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • vue踩坑记-在项目中安装依赖模块npm install报错

    在维护别人的项目的时候,在项目文件夹中安装npm install模块的时候,报错如下: npm ERR! path D:\ShopApp\node_modules\fsevents\node_modules\abbrev npm ERR! code ENOENT npm ERR! errno -4058 npm ERR! syscall access npm ERR! enoent ENOENT: no such file or directory, access 'D:\ShopApp\nod

  • vue 中使用 watch 出现了如下的报错的原因分析

    报错: Method "watch" has type "object" in the component definition. Did you reference the function Method "watch" has type "object" in the component definition. Did you reference the function correctly? 原因: watch 是一个对

  • vue component 中引入less文件报错 Module build failed

    错误是这样发生的: //在vue component组件中引入less文件 <style lang="less"> @import '@/assets/css/public/layout.less'; </style> 然后就报错了: Module build failed: @import '@/assets/css/public/layout.less'; ^ Can't resolve './@/assets/css/public/layout.less'

  • vue项目中使用vue-i18n报错的解决方法

    vue项目中使用vue-i18n报错的解决方法

    前言 Vue-i18n大家应该都不陌生,Vue-i18n安装的安装方法如下: npm install vue-i18n --save 然而最近在vue项目中使用vue-i18n的时候,居然报错了,通过查找相关的资料终于找到了解决的方法,下面话不多说了,来一起看看详细的介绍吧 发现问题 iview-admin框架克隆到本地,添加路由的时候,稍不注意就会遇到以下情况: Value of key 'xxx' is not string! Cannot translate the value of ke

  • 详解vue 兼容IE报错解决方案

    IE 页面空白 报错信息 此时页面一片空白 报错原因 Babel 默认只转换新的 JavaScript 语法(如箭头函数),而不转换新的 API ,比如 Iterator.Generator.Set.Maps.Proxy.Reflect.Symbol.Promise 等新的对象或者方法. 例如 Promise .新的原生方法如 String.padStart (left-pad) 等.为了解决这个问题,我们使用一种叫做 Polyfill(代码填充,也可译作兼容性补丁)的技术. 简单的说,兼容问题

  • vue安装遇到的5个报错及解决方法

    前言 这篇博文不会教你怎么安装vue,但会告知安装过程中可能遇到的5个问题 5个报错 ①:若使用vue -V查询是否安装vue时提示没有找到指令,可能是你没有安装vue-cli脚手架(vue-cli可快速创建vue项目)          ②:vue安装淘宝镜像时报错,提示无效的配置,必须是完整合法的http地址,原因是我在url前面加了1个空格,这里不要有空格 注:安装淘宝镜像后,需要用到npm的地方都可以用cnpm替换,但建议安装模块和插件用cnpm,打包和启动vue用npm (cnpm是国

  • 详解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,因为

  • 详解iOS14 Widget 开发相关及易报错地方处理

    首先了解下如何创建 Xcode -> File -> New -> Target 找到 Widget Extension 如果你的 Widget 支持用户配置属性,则需要勾选这个(例如天气组件,用户可以选择城市),不支持的话则不用勾选 了解下创建Widget后,系统给我们生成的文件内容 下面这个代码是没有勾选 Include Configuration Intent 的地方 Provider // Provider,顾名思义为小组件提供信息得一个struct struct Provide

  • 详解docker中使用systemctl启动服务报错的解决办法

    docker版本: [root@localhost gae_proxy]# docker version Client: Version: 1.10.3 API version: 1.22 Package version: docker-common-1.10.3-46.el7.centos.10.x86_64 Go version: go1.6.3 Git commit: d381c64-unsupported Built: Thu Aug 4 13:21:17 2016 OS/Arch: l

  • 详解SpringBoot注册Windows服务和启动报错的原因

    Windows系统启动Java程序会弹出黑窗口.黑窗口有几点不好.首先它不美观:其次容易误点导致程序关闭:但最让我匪夷所思的是:将鼠标光标选中黑窗口日志信息,程序竟然不会继续执行,日志也不会继续输出.从而导致页面一直处于请求状态.回车后程序才能正常执行.同时客户希望我们能部署在Windows系统上并且做到开机自动启动.针对以上需求将系统程序注册成Windows服务变得尤为重要. 针对于SpringBoot程序,目前主流的方法是采用winsw,简单方便.可是在开发过程中,针对不同的系统,启动服务可

  • 详解mysql8.0创建用户授予权限报错解决方法

    问题一: 会报错的写法: GRANT ALL PRIVILEGES ON *.*  'root'@'%' identified by '123123' WITH GRANT OPTION; 以下是正确的写法: grant all privileges on *.* to 'root'@'%' ; 可见,在授权的语句中需要去掉 IDENTIFIED BY 'password'; 单独授予某种权限的写法: GRANT SELECT ON oilsystem.input TO 'u5'@'localh

  • 详解Vue Cli浏览器兼容性实践

    浏览器市场占有率 在处理浏览器兼容性问题之前,我们先来看一下现在的浏览器市场份额是怎样的,

  • 一文详解Vue如何整合Echarts实现可视化界面

    一文详解Vue如何整合Echarts实现可视化界面

    目录 一.什么是可视化 二.什么是Echarts 三.Echarts的优点 四.Vue 整合Echarts 下载Echarts依赖 Vue引入Echarts 测试使用Echarts 五.效果图 一.什么是可视化 可视化就是可以通过视觉进行传达的. 再专业一点就可以解释为可视化(Visualization)是利用计算机图形学和图像处理技术,将数据转换成图形或图像在屏幕上显示出来,再进行交互处理的理论.方法和技术. 将数据通俗的在屏幕中展现出来! 二.什么是Echarts 一个纯JavaScript

  • 详解 vue.js用法和特性

    详解 vue.js用法和特性

    前  言 最近用Vue.js做了一个数据查询平台,还做了一个拼图游戏,突然深深的感到了vue的强大. Vue.js是一套构建用户界面(user interface)的渐进式框架.与其他重量级框架不同的是,Vue 从根本上采用最小成本.渐进增量(incrementally adoptable)的设计.Vue 的核心库只专注于视图层,并且很容易与其他第三方库或现有项目集成.另一方面,当与单文件组件和 Vue 生态系统支持的库结合使用时,Vue 也完全能够为复杂的单页应用程序提供有力驱动. Vue.j

  • 详解vue或uni-app的跨域问题解决方案

    常见解决方案有两种 服务器端解决方案 服务器告诉浏览器:你允许我跨域 具体如何告诉浏览器,请看: // 告诉浏览器,只允许 http://bb.aaa.com:9000 这个源请求服务器 $response->header('Access-Control-Allow-Origin', 'http://bb.aaa.com:9000'); // 告诉浏览器,请求头里只允许有这些内容 $response->header('Access-Control-Allow-Headers', 'Author

  • 详解Vue之事件处理

    在Vue进行前端开发中,事件监听是必不可少的功能,本文通过简单的小例子,简述v-on的简单用法,仅供学习分享使用,如有不足之处,还请指正. 监听事件 可以用 v-on 指令监听 DOM 事件,并在触发时运行一些 JavaScript 代码.如下所示: <button v-on:click="counter += 1">Add 1</button> <p>按钮被点击了 {{ counter }} 次.</p> 其中counter为Vue自定

随机推荐