Vue 后台管理类项目兼容IE9+的方法示例


Posted in Javascript onFebruary 20, 2019

最近项目进入到了第三方集成的环节,集成第三方监控非要用IE,咋办?老板让我将后台管理系统的框架兼容下IE,一直都是在chrome下开发的,也不知道IE下是什么鬼。

目前后台管理系统前端搭建方式

目前系统是用vue-cli@2.0生成的,UI框架使用的是iview,ajax请求使用的是axois,此外就没有什么特殊的npm包了。

需要解决的兼容问题

经过自己的一番测试,目前主要有以下的兼容问题:

  • 在IE下由于没有promise,所以axios不能用了;
  • 在涉及到flex、fixed、absolute定位时,IE浏览器下的显示效果有较大的区别;
  • excel表单导出异常;
  • 部分使用的npm包中的代码未经编译会有一些ES6的语法;
  • vue-router路由失效;
  • IE自动缓存ajax请求结果。

如何解决这些问题

解决第一个问题需要在项目中引入babel-polyfill, 我的处理方式时在build->webpack.base.config.js文件中的添加一下的配置:

Vue 后台管理类项目兼容IE9+的方法示例 

解决第二个问题则需要自己写一些兼容性比较好的样式,在这里我就不做过多的解释了;

第三个问题的解决过程比较的曲折,系统的下载是同过接口返回文件流的形式进行下载的,可以看下我原来的代码,原先通过axios的拦截器来获取响应内容的格式,然后进行下载,但是在IE的兼容测试过程中发现了一个问题,那就是axios在chrome和IE下的表现不一致,具体哪里一致可以简单的说下:

const downloadUrl = url => {
 let iframe = document.createElement('iframe');
 iframe.style.display = 'none';
 iframe.src = url;
 iframe.onload = function () {
 document.body.removeChild(iframe);
 };
 document.body.appendChild(iframe);
};
// 拦截二进制响应流
if (res.headers && (res.headers['content-type'] === 'application/vnd.ms-excel;charset=UTF-8' || res.headers['content-type'] === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' || res.headers['content-type'] === 'application/octet-stream;charset=UTF-8')) {
downloadUrl(res.request.responseURL);
return
}

这里面的问题在于在IE浏览器中res.request.responseURL这个属性是不存在的,就算存在了,在进行文件下载时也会出现异常,后台看到很多人都出现了这样的问题,怎么办,我相信这个问题一定是可以解决的,虽然没有搜到合适的方案,但是一个网友提示这一切的问题都是使用了第三方封装的ajax请求,那为什么不自己手写一个原生的ajax请求呢?切换思路后发现,果然是可以的,ajax下载文件流可以使用以下代码:

utils.exportFiles = (type = 'GET', url = null) => {
 var xhr = null
 if (window.XMLHttpRequest) { // Mozilla 浏览器
 xhr = new XMLHttpRequest()
 } else {
 if (window.ActiveXObject) {
  try {
  xhr = new ActiveXObject('Microsoft.XMLHTTP')
  } catch (e) {
  try {
   xhr = new ActiveXObject('Msxml2.XMLHTTP')
  } catch (e) {
  }
  }
 }
 }

 xhr.open(type, url, true)
 xhr.responseType = 'blob'
 if (type === 'POST') {
 xhr.setRequestHeader('Content-type', 'application/json')
 }
 xhr.onload = function (res) {
 var contentDisposition = xhr.getResponseHeader('content-disposition')
 var contentType = xhr.getResponseHeader('content-type')
 var filename = contentDisposition.split(';')[2]
 // eslint-disable-next-line no-eval
 eval(filename)
 filename = decodeURI(filename)
 if (this.status === 201) {
  var blob = this.response
  if (typeof window.navigator.msSaveBlob !== 'undefined') {
  // IE 浏览器进行下载
  window.navigator.msSaveBlob(blob, filename)
  } else {
  // 非浏览器进行下载
  var downloadUrl = document.createElement('a')
  downloadUrl.download = filename
  downloadUrl.style.display = 'none'
  downloadUrl.href = URL.createObjectURL(blob)
  document.body.appendChild(downloadUrl)
  downloadUrl.click()
  URL.revokeObjectURL(downloadUrl.href)
  document.body.removeChild(downloadUrl)
  }
 } else {
  console.log('导出错误')
 }
 }

 xhr.send()
}

第四个问题同样还是一些webpack打包的问题,在vue-cli2.0生成的项目中,哪些js会使用babel-loader是这样配置的:

Vue 后台管理类项目兼容IE9+的方法示例

我们可以看到,其针对3个文件加的js代码使用babel-loader,将需要使用babel-loader的npm包添加到其中即可。 第五个问题百度可以搜到,其中我比较推荐的解决方案如下:

const IE11RouterFix = {
 methods: {
 hashChangeHandler: function () {
  this.$router.push(window.location.hash.substring(1, window.location.hash.length));
 },
 isIE11: function () { return !!window.MSInputMethodContext && !!document.documentMode; }
 },
 mounted: function () { if (this.isIE11()) { window.addEventListener('hashchange', this.hashChangeHandler); } },
 destroyed: function () { if (this.isIE11()) { window.removeEventListener('hashchange', this.hashChangeHandler); } }
}

export default IE11RouterFix

var vm = new Vue({
el: '#app',
router,
store,
mixins: [IE11RouterFix],
components: {
App,
},
template: '<App/>'
});

第6个问题是过了一段时候发现的,IE会自动的缓存请求的结果,那么对系统中的一些操作是有影响的,比如说是在数据保存完成之后回到列表页的刷新,取到的数据是缓存中的数据。怎么办,我们可以在axios的请求拦截器中自动为请求地址添加时间戳,保证每次的请求的地址是不一样的。

总结

以上耗时一天的IE兼容就完成了,目前只能兼容到IE11,IE10,其他的我已经放弃了,就算再兼容完成后,系统再IE10下的表现也不是特别的好,感觉比较卡,再IE11下也只能说是正常。希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery获取自定义属性(attr和prop)实例介绍
Apr 21 Javascript
js获取location.href的参数实例代码
Aug 02 Javascript
jQuery切换网页皮肤并保存到Cookie示例代码
Jun 16 Javascript
jQuery中prevAll()方法用法实例
Jan 08 Javascript
jQuery实现首页顶部可伸缩广告特效代码
Apr 15 Javascript
JQuery球队选择实例
May 18 Javascript
深入理解jQuery事件绑定
Jun 02 Javascript
原生js实现淘宝购物车功能
Jun 23 Javascript
jquery实现侧边栏左右伸缩效果的示例
Dec 19 jQuery
送你43道JS面试题(收藏)
Jun 17 Javascript
vue 在单页面应用里使用二级套嵌路由
Dec 19 Vue.js
js前端设计模式优化50%表单校验代码示例
Jun 21 Javascript
浅谈小程序 setData学问多
Feb 20 #Javascript
9102年webpack4搭建vue项目的方法步骤
Feb 20 #Javascript
微信小程序五子棋游戏AI实现方法【附demo源码下载】
Feb 20 #Javascript
解决element ui select下拉框不回显数据问题的解决
Feb 20 #Javascript
微信小程序五子棋游戏的悔棋实现方法【附demo源码下载】
Feb 20 #Javascript
Vue.js特性Scoped Slots的浅析
Feb 20 #Javascript
微信小程序五子棋游戏的棋盘,重置,对弈实现方法【附demo源码下载】
Feb 20 #Javascript
You might like
解决PHP4.0 和 PHP5.0类构造函数的兼容问题
2013/08/01 PHP
PHP封装的完整分页类示例
2018/08/21 PHP
浅谈PHP之ThinkPHP框架使用详解
2020/07/21 PHP
分享一道笔试题[有n个直线最多可以把一个平面分成多少个部分]
2012/10/12 Javascript
JavaScript 中的日期和时间及表示标准介绍
2013/08/21 Javascript
jquery中使用循环下拉菜单示例代码
2014/09/24 Javascript
Javascript 读取操作Sql中的Xml字段
2014/10/09 Javascript
全面了解javascript中的错误处理机制
2016/07/18 Javascript
微信小程序 点击控件后选中其它反选实例详解
2017/02/21 Javascript
JavaScript基于replace+正则实现ES6的字符串模版功能
2017/04/25 Javascript
详解vue-router 2.0 常用基础知识点之导航钩子
2017/05/10 Javascript
浅谈jQuery框架Ajax常用选项
2017/07/08 jQuery
node.js用fs.rename强制重命名或移动文件夹的方法
2017/12/27 Javascript
微信小程序自定义组件components(代码详解)
2019/10/21 Javascript
Js逆向实现滑动验证码图片还原的示例代码
2020/03/10 Javascript
js实现查询商品案例
2020/07/22 Javascript
在vue-cli3.0 中使用预处理器 (Sass/Less/Stylus) 配置全局变量操作
2020/08/10 Javascript
vue3.0中setup使用(两种用法)
2020/12/02 Vue.js
[00:35]DOTA2上海特级锦标赛 VP战队宣传片
2016/03/04 DOTA
Python中MySQL数据迁移到MongoDB脚本的方法
2016/04/28 Python
Python下载指定页面上图片的方法
2016/05/12 Python
浅谈python的深浅拷贝以及fromkeys的用法
2019/03/08 Python
使用Python和Prometheus跟踪天气的使用方法
2019/05/06 Python
解决python web项目意外关闭,但占用端口的问题
2019/12/17 Python
Python计算指定日期是今年的第几天(三种方法)
2020/03/26 Python
python实现简单坦克大战
2020/03/27 Python
Python+unittest+requests+excel实现接口自动化测试框架
2020/12/23 Python
详解纯CSS3制作的20种loading动效
2017/07/05 HTML / CSS
基于HTML5 的人脸识别活体认证的实现方法
2016/06/22 HTML / CSS
HTML5去掉输入框type为number时的上下箭头的实现方法
2020/01/03 HTML / CSS
爱国卫生月活动总结范文
2014/04/25 职场文书
副校长个人对照检查材料思想汇报
2014/10/04 职场文书
民主评议教师党员自我评价
2015/03/04 职场文书
综合办公室岗位职责
2015/04/11 职场文书
结婚十年感言
2015/07/31 职场文书
python pygame 开发五子棋双人对弈
2022/05/02 Python