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在IE下设置innerHTML时出现未知的运行时错误的解决方法
Jan 12 Javascript
extjs实现选择多表自定义查询功能 前台部分(ext源码)
Dec 20 Javascript
基于jquery打造的百分比动态色彩条插件
Sep 19 Javascript
script的async属性以非阻塞的模式加载脚本
Jan 15 Javascript
js 使FORM表单的所有元素不可编辑的示例代码
Oct 17 Javascript
jquery实现的一个简单进度条效果实例
May 12 Javascript
jQuery实现信息提示框(带有圆角框与动画)效果
Aug 07 Javascript
JavaScript仿支付宝密码输入框
Dec 29 Javascript
Angular 应用技巧总结
Sep 14 Javascript
vue项目总结之文件夹结构配置详解
Dec 13 Javascript
使用sessionStorage解决vuex在页面刷新后数据被清除的问题
Apr 13 Javascript
layui表格内放置图片,并点击放大的实例
Sep 10 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
一个简单实现多条件查询的例子
2006/10/09 PHP
php中删除数组的第一个元素和最后一个元素的函数
2015/03/07 PHP
Thinkphp和onethink实现微信支付插件
2016/04/13 PHP
Laravel5.5新特性之友好报错以及展示详解
2017/08/13 PHP
PHP addslashes()函数讲解
2019/02/03 PHP
张孝祥JavaScript学习阶段性总结(2)--(X)HTML学习
2007/02/03 Javascript
jquery 插件 人性化的消息显示
2008/01/21 Javascript
JavaScript Event学习第九章 鼠标事件
2010/02/08 Javascript
基于JQuery的抓取博客园首页RSS的代码
2011/12/01 Javascript
分享一个自定义的console类 让你不再纠结JS中的调试代码的兼容
2012/04/20 Javascript
前台js改变Session的值(用ajax实现)
2012/12/28 Javascript
jQuery Html控件基本操作(日常收集整理)
2016/03/11 Javascript
Node.js 应用跑得更快 10 个技巧
2016/04/03 Javascript
AngularJs IE Compatibility 兼容老版本IE
2016/09/01 Javascript
jQuery EasyUI tree增加搜索功能的实现方法
2017/04/27 jQuery
Bootstrap框架建立树形菜单(Tree)的实例代码
2017/10/30 Javascript
Nodejs连接mysql并实现增、删、改、查操作的方法详解
2018/01/04 NodeJs
layui select获取自定义属性方法
2018/08/15 Javascript
vue+element-ui表格封装tag标签使用插槽
2020/06/18 Javascript
python实用代码片段收集贴
2015/06/03 Python
Django视图和URL配置详解
2018/01/31 Python
纯python实现机器学习之kNN算法示例
2018/03/01 Python
Python爬虫PyQuery库基本用法入门教程
2018/08/04 Python
python定时按日期备份MySQL数据并压缩
2019/04/19 Python
python2.7的flask框架之引用js&amp;css等静态文件的实现方法
2019/08/22 Python
Python3基于print打印带颜色字符串
2020/07/06 Python
Kangol帽子官网:坎戈尔袋鼠
2018/09/26 全球购物
Elemental Herbology官网:英国美容品牌
2019/04/27 全球购物
村委会主任先进事迹
2014/01/15 职场文书
《曹刿论战》教学反思
2014/03/02 职场文书
保卫钓鱼岛口号
2014/06/20 职场文书
第一节英语课开场白
2015/06/01 职场文书
优秀家长事迹材料(2016推荐版)
2016/02/29 职场文书
MySQL 隔离数据列和前缀索引的使用总结
2021/05/14 MySQL
InterProcessMutex实现zookeeper分布式锁原理
2022/03/21 Java/Android
铁头也玩根德 YachtBoy YB-230......
2022/04/05 无线电