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 相关文章推荐
javaScript Array(数组)相关方法简述
Jul 25 Javascript
jQuery的写法不同导致的兼容性问题的解决方法
Jul 29 Javascript
原生js实现给指定元素的后面追加内容
Apr 10 Javascript
黑帽seo劫持程序,js劫持搜索引擎代码
Sep 15 Javascript
javascript如何创建对象
Aug 29 Javascript
浅谈javascript的闭包
Jan 23 Javascript
Angular2学习教程之组件中的DOM操作详解
May 28 Javascript
Vue手把手教你撸一个 beforeEnter 钩子函数
Apr 24 Javascript
详解VueJs中的V-bind指令
May 03 Javascript
Vue自定义弹窗指令的实现代码
Aug 13 Javascript
vue2中使用sass并配置全局的sass样式变量的方法
Sep 04 Javascript
vue开发中遇到的问题总结
Apr 07 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
SONY ICF-F10中波修复记
2021/03/02 无线电
香妃
2021/03/03 冲泡冲煮
yii实现创建验证码实例解析
2014/07/31 PHP
php函数重载的替代方法--伪重载详解
2015/05/08 PHP
PHP正则验证Email的方法
2015/06/15 PHP
Yii2实现自定义独立验证器的方法
2017/05/05 PHP
PHP并发查询MySQL的实例代码
2017/08/09 PHP
php实现简易计算器
2020/08/28 PHP
JavaScript开发人员的10个关键习惯小结
2014/12/05 Javascript
jQuery根据用户电脑是mac还是pc加载对应样式的方法
2015/06/26 Javascript
nodejs修复ipa处理过的png图片
2016/02/17 NodeJs
AngularJS基础 ng-paste 指令简单示例
2016/08/02 Javascript
bootstrap模态框远程示例代码分享
2017/05/22 Javascript
简单实现vue验证码60秒倒计时功能
2017/10/11 Javascript
react中的ajax封装实例详解
2017/10/17 Javascript
浅谈vuejs实现数据驱动视图原理
2018/02/23 Javascript
图解NodeJS实现登录注册功能
2019/09/16 NodeJs
vue使用svg文件补充-svg放大缩小操作(使用d3.js)
2020/09/22 Javascript
在VUE中使用lodash的debounce和throttle操作
2020/11/09 Javascript
Python的Flask框架中实现分页功能的教程
2015/04/20 Python
python3编码问题汇总
2016/09/06 Python
python中利用Future对象回调别的函数示例代码
2017/09/07 Python
简单了解python模块概念
2018/01/11 Python
Python logging模块用法示例
2018/08/28 Python
Python实现的ftp服务器功能详解【附源码下载】
2019/06/26 Python
Python利用神经网络解决非线性回归问题实例详解
2019/07/19 Python
python 多进程队列数据处理详解
2019/12/23 Python
django迁移文件migrations的实现
2020/03/31 Python
numpy矩阵数值太多不能全部显示的解决
2020/05/14 Python
Keras - GPU ID 和显存占用设定步骤
2020/06/22 Python
python中altair可视化库实例用法
2021/01/26 Python
实例讲解HTML5的meta标签的一些应用
2015/12/08 HTML / CSS
送给他或她的礼物:FUN.com
2018/08/17 全球购物
现在输入n个数字,以逗号,分开;然后可选择升或者降序排序;按提交键就在另一页面显示按什么排序,结果为,提供reset
2012/11/09 面试题
网站推广策划方案
2014/06/04 职场文书
Java设计模式中的命令模式
2022/04/28 Java/Android