Vue+iview+webpack ie浏览器兼容简单处理


Posted in Javascript onSeptember 20, 2019

环境介绍:

  • vue: ^2.5.2
  • iview: ^3.1.0
  • Webpack: ^3.8.1

前情提要:

  • ie 浏览器不支持 ES6 Promise 的语法。
  • ie8 及以下对 html5 标签不兼容(可以通过引入html5shiv包解决,本文不处理IE11的更低版本,故不提及此法)。
  • ie9 以下 对 CSS3 的不兼容,各种不兼容的细节比较多,这里不说明。
  • ie10 及以下浏览器中不支持 dataset 方法(经学习实践发现ie11也是不支持的),而我在项目中使用了 iview, iview 的一些组件用到了这个方法。
  • ie 浏览器是非 webkit 内核,不支持 display: -webkit-box; 和相关样式;
  • Polyfill 是 shim 的一种,但他的 API 是遵循标准的。polyfill 的做法通常是:先检查浏览器是否支持某个标准 API,如果不支持,就使用旧的技术对浏览器做兼容处理,这样就可以在旧的浏览器上使用新的标准 API。比如,旧浏览器不支持 ES6 的 Array.prototype.find 方法,我们想要在项目中使用 Array.prototype.find,只要 polyfill 就行了,而不是封装一个新的方法。

处理过程

1、安装 polyfill 组件,使浏览器兼容 es6 的写法

在终端输入命令

npm install --save babel-polyfill

main.js 头部引入 babel-polyfill, 注意这个放最前面:

import 'babel-polyfill'

或者在项目的 webpack.base.conf.js 中配置:

entry: {

​  app:['babel-polyfill','./src/main.js']

 },

另外,引入的一些模块需要单独引入到 babel 的配置中,不然不起作用(具体为啥我没深究),网上查到用到 echarts-v3 的需要配置,经测试我用到 iview 也是要配置的, 下面代码的 include 中就是我配置的项,这个主要是按需配置的,具体看项目里的情况:

module: {

​  rules: [

​   ...(config.dev.useEslint ? [createLintingRule()] : []),

​   {

​    test: /\.vue$/,

​    loader: 'vue-loader',

​    options: vueLoaderConfig

​   },

​   {

​    test: /\.js$/,

​    loader: 'babel-loader',

​    include: [

​     resolve('src'), 

​     resolve('test'), 

​     resolve('static'),

​     resolve('node_modules/webpack-dev-server/client'),

​     // resolve('node_modules/vue-echarts'),

​     resolve('node_modules/iview/src'),

​     // resolve('node_modules/resize-detector')

​    ]
​   },
}

2、兼容 dataset

我在引入了 babel-polyfill 后还是报错,信息如下图:

Vue+iview+webpack ie浏览器兼容简单处理

搜了半天关于 SCRIPT1003 和 SCRIPT5007 的错误, 发现没有直接的解决办法,就主要是说缺少项目中包含的某个模块的某种方法的引入。于是我就从我主要用到的 iview 入手去查找,发现了有相关的内容。有说到 iview 兼容 IE 需要写一个 dataset 方法才能正常加载。

dataset方法只要能够加载全局使用即可。我是写了一个脚本嵌入 index.html 文件中。代码如下:

<script>
 // dataset 方法兼容 IE 浏览器。ie10及以下不支持dataset
 if (window.HTMLElement) {
  if (Object.getOwnPropertyNames(HTMLElement.prototype).indexOf('dataset') === -1) {
   Object.defineProperty(HTMLElement.prototype, 'dataset', {
    get: function () {
     var attributes = this.attributes // 获取节点的所有属性
     var name = []
     var value = [] // 定义两个数组保存属性名和属性值
     var obj = {} // 定义一个空对象
     for (var i = 0; i < attributes.length; i++) { // 遍历节点的所有属性
      if (attributes[i].nodeName.slice(0, 5) === 'data-') { // 如果属性名的前面5个字符符合"data-"
       // 取出属性名的"data-"的后面的字符串放入name数组中
       name.push(attributes[i].nodeName.slice(5));
       // 取出对应的属性值放入value数组中
       value.push(attributes[i].nodeValue);
      }
     }
     for (var j = 0; j < name.length; j++) { // 遍历name和value数组
      obj[name[j]] = value[j]; // 将属性名和属性值保存到obj中
     }
     return obj // 返回对象
    }
   })
  }
 }
</script>

搞到这里,我的项目就已经可以在 IE 里出现了,也不打算继续支持更低的IE版本,坑太深,果断弃。但是样式还是有问题。这个搞起来也是很麻烦。点了点项目里出现的样式问题,未发现很复杂的,主要一个就是 flex 布局出现混乱,经过调整已经好了。还有就是 -webkit-box 不支持,之前显示数据使用以下方式解决多行溢出省略号显示问题失效了:
overflow: hidden;

display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */

-webkit-box-orient: vertical;

-webkit-line-clamp: 2;

word-break: break-all;

纠结了一下,不想用js 的方式写,也不想用 伪标签(高度不好定,易出现文字被覆盖的情况),也不想特意让后台修改返回的数据,所以决定用比较low的相对保险的截取字符的方式展示。

总结

第一次处理这个问题,很多东西不明白,描述也不大清楚,处理的不全面,还望多交流指正!

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

Javascript 相关文章推荐
JavaScript 组件之旅(三):用 Ant 构建组件
Oct 28 Javascript
jquery 弹出登录窗口实现代码
Dec 24 Javascript
Jquery替换已存在于element上的event的方法
Mar 09 Javascript
Iframe自适应高度绝对好使的代码 兼容IE,遨游,火狐
Jan 27 Javascript
用正则表达式替换图片地址img标签
Nov 22 Javascript
让JavaScript和其它资源并发下载的方法
Oct 16 Javascript
为何JS操作的href都是javascript:void(0);呢
Nov 12 Javascript
Angularjs 创建可复用组件实例代码
Oct 09 Javascript
在Vue methods中调用filters里的过滤器实例
Aug 30 Javascript
详解vue-cli+element-ui树形表格(多级表格折腾小计)
Apr 17 Javascript
vue实现拖拽的简单案例 不超出可视区域
Jul 25 Javascript
微信小程序wx.navigateTo方法里的events参数使用详情及场景
Jan 07 Javascript
微信小程序跳转到其他网页(外部链接)的实现方法
Sep 20 #Javascript
微信用户访问小程序的登录过程详解
Sep 20 #Javascript
解决layUI的页面显示不全的问题
Sep 20 #Javascript
小程序如何获取多个formId实现详解
Sep 20 #Javascript
SSM+layUI 根据登录信息显示不同的页面方法
Sep 20 #Javascript
使用Layui搭建后台管理界面的操作方法
Sep 20 #Javascript
layui问题之模拟table表格中的选中按钮选中事件的方法
Sep 20 #Javascript
You might like
PHP与MySQL开发中页面乱码的产生与解决
2008/03/27 PHP
优化WordPress中文章与评论的时间显示
2016/01/12 PHP
ThinkPHP实现静态缓存和动态缓存示例代码
2017/05/02 PHP
Javascript 验证上传图片大小[客户端]
2009/08/01 Javascript
DD_belatedPNG,IE6下PNG透明解决方案(国外)
2010/12/06 Javascript
简单的代码实现jquery定时器
2014/01/03 Javascript
javascript中setTimeout使用指南
2015/07/26 Javascript
JS实现弹性漂浮效果的广告代码
2015/09/02 Javascript
JavaScript中自带的 reduce()方法使用示例详解
2016/08/10 Javascript
javascript 注释代码的几种方法总结
2017/01/04 Javascript
jQuery基于ajax实现页面加载后检查用户登录状态的方法
2017/02/10 Javascript
javascript实现多张图片左右无缝滚动效果
2017/03/22 Javascript
JS匹配日期和时间的正则表达式示例
2017/05/12 Javascript
axios发送post请求,提交图片类型表单数据方法
2018/03/16 Javascript
javascript实现blob加密视频源地址的方法
2019/08/08 Javascript
Js生成随机数/随机字符串的方法小结【5种方法】
2020/05/27 Javascript
工作中常用js功能汇总
2020/11/07 Javascript
Python的函数的一些高阶特性
2015/04/27 Python
python学习之第三方包安装方法(两种方法)
2015/07/30 Python
python实现红包裂变算法
2016/02/16 Python
Python 字符串操作(string替换、删除、截取、复制、连接、比较、查找、包含、大小写转换、分割等)
2018/03/19 Python
python线程的几种创建方式详解
2019/08/29 Python
在Python中利用pickle保存变量的实例
2019/12/30 Python
Pytorch模型转onnx模型实例
2020/01/15 Python
用python解压分析jar包实例
2020/01/16 Python
Python编程快速上手——Excel表格创建乘法表案例分析
2020/02/28 Python
TensorFlow2.X使用图片制作简单的数据集训练模型
2020/04/08 Python
python3+opencv 使用灰度直方图来判断图片的亮暗操作
2020/06/02 Python
伊利莎白雅顿官网:Elizabeth Arden
2016/10/10 全球购物
来自美国主售篮球鞋的零售商店:KICKSUSA
2017/11/28 全球购物
毕业生的自我评价范文
2013/12/31 职场文书
公司建议书怎么写
2014/05/15 职场文书
先进单位申报材料
2014/12/25 职场文书
公司员工奖惩制度
2015/08/04 职场文书
zabbix agent2 监控oracle数据库的方法
2021/05/13 Oracle
总结Java对象被序列化的两种方法
2021/06/30 Java/Android