小編給大家分享一下Vue中后臺(tái)管理類項(xiàng)目兼容IE9+的示例分析，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

大姚ssl適用于網(wǎng)站、小程序/APP、API接口等需要進(jìn)行數(shù)據(jù)傳輸應(yīng)用場(chǎng)景，ssl證書未來市場(chǎng)廣闊！成為成都創(chuàng)新互聯(lián)公司的ssl證書銷售渠道，可以享受市場(chǎng)價(jià)格4-6折優(yōu)惠！如果有意向歡迎電話聯(lián)系或者加微信：13518219792（備注：SSL證書合作）期待與您的合作！

目前后臺(tái)管理系統(tǒng)前端搭建方式

目前系統(tǒng)是用vue-cli@2.0生成的，UI框架使用的是iview,ajax請(qǐng)求使用的是axois,此外就沒有什么特殊的npm包了。

需要解決的兼容問題

經(jīng)過自己的一番測(cè)試，目前主要有以下的兼容問題:

• 在IE下由于沒有promise，所以axios不能用了；

• 在涉及到flex、fixed、absolute定位時(shí)，IE瀏覽器下的顯示效果有較大的區(qū)別；

• excel表單導(dǎo)出異常；

• 部分使用的npm包中的代碼未經(jīng)編譯會(huì)有一些ES6的語(yǔ)法；

• vue-router路由失效；

• IE自動(dòng)緩存ajax請(qǐng)求結(jié)果。

如何解決這些問題

解決第一個(gè)問題需要在項(xiàng)目中引入babel-polyfill， 我的處理方式時(shí)在build->webpack.base.config.js文件中的添加一下的配置：

解決第二個(gè)問題則需要自己寫一些兼容性比較好的樣式，在這里我就不做過多的解釋了；

第三個(gè)問題的解決過程比較的曲折，系統(tǒng)的下載是同過接口返回文件流的形式進(jìn)行下載的，可以看下我原來的代碼，原先通過axios的攔截器來獲取響應(yīng)內(nèi)容的格式，然后進(jìn)行下載，但是在IE的兼容測(cè)試過程中發(fā)現(xiàn)了一個(gè)問題，那就是axios在chrome和IE下的表現(xiàn)不一致，具體哪里一致可以簡(jiǎn)單的說下：

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);
};
// 攔截二進(jìn)制響應(yīng)流
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這個(gè)屬性是不存在的，就算存在了，在進(jìn)行文件下載時(shí)也會(huì)出現(xiàn)異常，后臺(tái)看到很多人都出現(xiàn)了這樣的問題，怎么辦，我相信這個(gè)問題一定是可以解決的，雖然沒有搜到合適的方案，但是一個(gè)網(wǎng)友提示這一切的問題都是使用了第三方封裝的ajax請(qǐng)求，那為什么不自己手寫一個(gè)原生的ajax請(qǐng)求呢？切換思路后發(fā)現(xiàn)，果然是可以的，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 瀏覽器進(jìn)行下載
  window.navigator.msSaveBlob(blob, filename)
  } else {
  // 非瀏覽器進(jìn)行下載
  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('導(dǎo)出錯(cuò)誤')
 }
 }

 xhr.send()
}

第四個(gè)問題同樣還是一些webpack打包的問題，在vue-cli2.0生成的項(xiàng)目中，哪些js會(huì)使用babel-loader是這樣配置的：

我們可以看到，其針對(duì)3個(gè)文件加的js代碼使用babel-loader，將需要使用babel-loader的npm包添加到其中即可。 第五個(gè)問題百度可以搜到，其中我比較推薦的解決方案如下：

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個(gè)問題是過了一段時(shí)候發(fā)現(xiàn)的，IE會(huì)自動(dòng)的緩存請(qǐng)求的結(jié)果，那么對(duì)系統(tǒng)中的一些操作是有影響的，比如說是在數(shù)據(jù)保存完成之后回到列表頁(yè)的刷新，取到的數(shù)據(jù)是緩存中的數(shù)據(jù)。怎么辦，我們可以在axios的請(qǐng)求攔截器中自動(dòng)為請(qǐng)求地址添加時(shí)間戳，保證每次的請(qǐng)求的地址是不一樣的。

以上是“Vue中后臺(tái)管理類項(xiàng)目兼容IE9+的示例分析”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

本文標(biāo)題：Vue中后臺(tái)管理類項(xiàng)目兼容IE9+的示例分析-創(chuàng)新互聯(lián)
文章URL：http://chinadenli.net/article32/ccjppc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站導(dǎo)航、搜索引擎優(yōu)化、小程序開發(fā)、微信小程序、外貿(mào)網(wǎng)站建設(shè)、服務(wù)器托管

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)