Vue 後臺管理類項目兼容IE9+

最近項目進入到了第三方集成的環節,集成第三方監控非要用IE,咋辦?老闆讓我將後臺管理系統的框架兼容下IE,一直都是在chrome下開發的,也不知道IE下是什麼鬼。javascript

目先後臺管理系統前端搭建方式

目前系統是用vue-cli@2.0生成的,UI框架使用的是iview,ajax請求使用的是axois,此外就沒有什麼特殊的npm包了。前端

須要解決的兼容問題

通過本身的一番測試,目前主要有如下的兼容問題:vue

  1. 在IE下因爲沒有promise,因此axios不能用了;
  2. 在涉及到flex、fixed、absolute定位時,IE瀏覽器下的顯示效果有較大的區別;
  3. excel表單導出異常;
  4. 部分使用的npm包中的代碼未經編譯會有一些ES6的語法;
  5. vue-router路由失效;
  6. IE自動緩存ajax請求結果。

如何解決這些問題

  1. 解決第一個問題須要在項目中引入babel-polyfill, 個人處理方式時在build->webpack.base.config.js文件中的添加一下的配置:
  2. 解決第二個問題則須要本身寫一些兼容性比較好的樣式,在這裏我就不作過多的解釋了;
  3. 第三個問題的解決過程比較的曲折,系統的下載是同過接口返回文件流的形式進行下載的,能夠看下我原來的代碼,原先經過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下載文件流可使用如下代碼:java

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是這樣配置的: webpack

咱們能夠看到,其針對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的請求攔截器中自動爲請求地址添加時間戳,保證每次的請求的地址是不同的。ios

總結

以上耗時一天的IE兼容就完成了,目前只能兼容到IE11,IE10,其餘的我已經放棄了,就算再兼容完成後,系統再IE10下的表現也不是特別的好,感受比較卡,再IE11下也只能說是正常。web

相關文章
相關標籤/搜索