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

最近项目进入到了第三方集成的环节，集成第三方监控非要用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文件中的添加一下的配置：

 

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

第三个问题的解决过程比较的曲折，系统的下载是同过接口返回文件流的形式进行下载的，可以看下我原来的代码，原先通过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是这样配置的：

我们可以看到，其针对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下也只能说是正常。希望对大家的学习有所帮助，也希望大家多多支持。