如何解決Vue兼容ie9的問題-創(chuàng)新互聯

這篇文章給大家分享的是有關如何解決Vue兼容ie9的問題的內容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

成都網站建設哪家好，找創(chuàng)新互聯建站！專注于網頁設計、重慶網站建設公司、微信開發(fā)、微信小程序、集團成都企業(yè)網站建設等服務項目。核心團隊均擁有互聯網行業(yè)多年經驗，服務眾多知名企業(yè)客戶；涵蓋的客戶類型包括：成都地磅秤等眾多領域，積累了大量豐富的經驗，同時也獲得了客戶的一致夸獎！

前言

背景情況

  1. vue - 2.5.11

  2. vue-cli 使用模板 webpack-simple

  3. http請求：axios

Vue 官方對于 ie 瀏覽器版本兼容情況的描述是 ie9+，即是 ie9 及更高的版本。經過測試，Vue 的核心框架 vuejs 本身，以及生態(tài)的官方核心插件（VueRouter、Vuex等）均可以在 ie9 上正常使用。

Vue 的作者尤雨溪對于Vue 的學習建議 中有提及為了將項目更好的生態(tài)化/工程化，要盡可能學習及使用新的 ECMAScript 規(guī)范。目前 ES6/ES2015 是可用度和穩(wěn)定度較高的規(guī)范，文檔齊全，國內還有 阮一峰 《ECMAScript 6 入門》 做了大量的文檔翻譯，開發(fā)環(huán)境可謂完善。然而版本較舊的瀏覽器并不支持 es6 規(guī)范，尤其是 ie 瀏覽器，即使是最高的 ie11 版本，對于 es6 規(guī)范也支持得并不全。如此則需要對所有原生不支持 ES6 特性的瀏覽器做兼容性處理。

本文將針對使用 Vue 生態(tài)開發(fā)完成的網站，以 ie9 版本為基礎兼容目標，實現全功能正常使用的全面兼容解決方案。

ES6兼容

在 ie9 的環(huán)境上，es6 的部分新對象、表達式，并不支持，解決方案是使用 babel-polyfill 組件，它可以將 es6 的代碼翻譯成低版本瀏覽器可以識別的 es5 代碼

npm i babel-polyfill --save-dev

安裝完成后，在項目的主入口文件 main.js 的首行就可以直接引用

import 'babel-polyfill';

在項目使用 vue-cli 生成的代碼中，根目錄有一個 .babelrc 文件，這是項目使用 babel 的配置文件。在默認生成的模板內容中，增加 "useBuiltIns": "entry" 的設置內容，這是一個指定哪些內容需要被 polyfill(兼容) 的設置

useBuiltIns 有三個設置選項

  1. false - 不做任何操作

  2. entry - 根據瀏覽器版本的支持，將 polyfill 需求拆分引入，僅引入有瀏覽器不支持的polyfill

  3. usage - 檢測代碼中 ES6/7/8 等的使用情況，僅僅加載代碼中用到的 polyfill

這里推薦設置為 entry ，完整的 .babelrc 內容如下：

{
 "presets": [
 [
  "env",
  {
  "modules": false,
  "useBuiltIns": "entry"
  }
 ],
 "stage-3"
 ]
}

加入這些代碼后，工程里的大部分內容已可兼容到 ie9 版本

Number對象

即使在使用 babel-polyfill 做代碼翻譯后，發(fā)現還是有一些 es6 的新特性并沒有解決，比如說 Number 對象的 parseInt 和 parseFloat 方法

es6 將全局方法 parseInt() 和 parseFloat() ，移植到 Number 對象上面，行為完全保持不變。這樣做的目的，是逐步減少全局性方法，使得語言逐步模塊化。

解決這個問題不需要引入包來解決，同樣在項目主入口文件 main.js 加入以下代碼（代碼盡可能靠前，最好是在引用 babel-polyfill 之后 ）

if (Number.parseInt === undefined) Number.parseInt = window.parseInt;
if (Number.parseFloat === undefined) Number.parseFloat = window.parseFloat;

requestAnimationFrame方法

window.requestAnimationFrame 是瀏覽器用于定時循環(huán)操作的一個接口，類似于 setTimeout，主要用途是按幀對網頁進行重繪。

requestAnimationFrame 的優(yōu)勢，在于充分利用顯示器的刷新機制，比較節(jié)省系統(tǒng)資源。顯示器有固定的刷新頻率（60Hz或75Hz），也就是說，每秒最多只能重繪60次或75次，requestAnimationFrame 的基本思想就是與這個刷新頻率保持同步，利用這個刷新頻率進行頁面重繪。此外，使用這個API，一旦頁面不處于瀏覽器的當前標簽，就會自動停止刷新。這就節(jié)省了CPU、GPU和電力。

不過有一點需要注意，requestAnimationFrame 是在主線程上完成。這意味著，如果主線程非常繁忙，requestAnimationFrame 的動畫效果會大打折扣。

window.requestAnimationFrame() 方法告訴瀏覽器您希望執(zhí)行動畫并請求瀏覽器在下一次重繪之前調用指定的函數來更新動畫。該方法使用一個回調函數作為參數，這個回調函數會在瀏覽器重繪之前調用。

有部分第三方組件就使用了這個方法，例如部分文件上傳、圖片處理類的組件；那么在這類型的組件在 ie9 下使用時，會報出

SCRIPT5007: Expected object.

window.requestAnimationFrame() 的最低兼容 ie 版本為 10，那么在 ie9 上做兼容就需要制作 requestAnimationFrame polyfill

(function() {
  var lastTime = 0;
  var vendors = ['ms', 'moz', 'webkit', 'o'];
  for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
    window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame'];
    window.cancelAnimationFrame = window[vendors[x]+'CancelAnimationFrame'] 
                  || window[vendors[x]+'CancelRequestAnimationFrame'];
  }
 
  if (!window.requestAnimationFrame)
    window.requestAnimationFrame = function(callback, element) {
      var currTime = new Date().getTime();
      var timeToCall = Math.max(0, 16 - (currTime - lastTime));
      var id = window.setTimeout(function() { callback(currTime + timeToCall); }, 
       timeToCall);
      lastTime = currTime + timeToCall;
      return id;
    };
 
  if (!window.cancelAnimationFrame)
    window.cancelAnimationFrame = function(id) {
      clearTimeout(id);
    };
}());

Gist：requestAnimationFrame polyfill

這部分代碼同樣是盡可能在網站入口處就執(zhí)行

http網絡請求(跨域)

在大多數的 Web 項目中（以 JavaWeb 為例），網站的頁面和服務（至少是 controller 層）在同一個工程進行開發(fā)和部署，在大前端的新型模式下，我們建議盡可能對網站的前端和后端進行完全分離，前后端分離的好處和意義這里不再贅述。

既然是前后端分離，那么部署也必然是各自獨立部署，不同的訪問路徑，就會產生跨域訪問的問題（同一站點，不同端口號也是跨域）

在此設定背景情況：

  1. 服務端已完整開啟 CROS 跨域支持

  2. http 組件使用 axios

  3. axios 設置 withCredentials 為 true 開啟跨域訪問時攜帶 cookie 數據

高版本瀏覽器（ie10+ 或 chrome, ff）僅需要完成背景情況中的功能，即可支持跨域數據請求功能

axios 進行數據請求時，默認使用 XMLHttpRequest 對象，在檢測到當前請求是跨域訪問時，axios 會測試瀏覽器是否支持 XDomainRequest 對象，若支持則優(yōu)先使用。

ie8 / ie9 的 XMLHttpRequest 對象，不支持跨域訪問，該對象在 ie10 后才原生支持跨域訪問。微軟的解決方案是在 ie8 / ie9 中提供了XDomainRequest(XDR) 對象來進行解決跨域問題，雖然使用該對象可以跨域訪問成功，并返回數據，但它卻依然是一個功能不完整的半成品，它的使用有諸多限制：

  1. XDR 僅支持 GET 與 POST 兩種請求方式

  2. XDR 不支持自定義的請求頭，若服務端使用 header 的自定義參數進行做身份驗證，則不可用

  3. 請求頭的 Content-Type 只允許設置為 text/plain

  4. XDR 不允許跨協議的請求，如果網頁在 HTTP 協議下，就只能請求 HTTP 協議下的接口，不能訪問 HTTPS 接口

  5. XDR 只接受HTTP/HTTPS 的請求

  6. 發(fā)起請求的時候，不會攜帶 authentication 或 cookies

微軟雖然提供了解決方案，但卻是不折不扣的雞肋，根本無法勝任系統(tǒng)中各種場景的數據請求需求，至此，axios 對 ie9 的跨域數據請求已無能為力。

完美解決方案：代理(proxy)

雖然 axios 對 ie9 跨域已無能為力，但前端項目打包的解決方案 webpack 提供了一個優(yōu)雅而徹底解決問題的方式：代理

devServer.proxy

webpack 的 devServer.proxy 的功能是由http-proxy-middleware 項目來實現的

實現原理是將目標位置的請求代理為前端服務本地的請求，既然是代理成為本地的請求，就不存在跨域的問題，axios 就會用回 XMLHttpRequest 對象進行數據請求，一切都恢復正常了，header、cookies、content-type、authentication 等內容都被正確傳遞到服務端。

項目中 webpack.config.js 的配置

devServer: {
  historyApiFallback: true,
  noInfo: true,
  overlay: true,
  proxy: {
    '/api': {
      target: 'http://localhost:8081/myserver',
      pathRewrite: {
        '^/api': ''
      }
    }
  }
}

配置中指定了將 http://localhost:8081/myserver 服務的位置代理為本地前端服務的 http://localhost:8080/api。例如需要讀取用戶信息的原請求是 http://localhost:8081/myserver/user/zhangsan，代理后，就變?yōu)?http://localhost:8080/api/user/zhangsan。

即是 /api 的前綴代表了服務端，所以在使用 axios 時，需要對每個服務端請求都增加上 /api 的前綴；通常在項目開發(fā)中，需要對數據請求組件 axios 進行二次封裝，以達到統(tǒng)一設置默認參數，統(tǒng)一數據請求入口等目的，那么此時就只需要在二次封裝的文件里統(tǒng)一調整請求前綴即可。

不過，webpack 的 devServer.proxy 僅在開發(fā)模式下可用，生產模式下無法使用。開發(fā)模式下，調試服務可以讀取 webpack.config.js 中的配置內容進行實時代理，而項目在部署到生產環(huán)境前，需要將工程進行編譯轉換成靜態(tài)的 js 文件，沒有調試服務的支撐自然是無法進行請求代理的。

nginx 配置

雖然 devServer.proxy 的功能僅能工作于開發(fā)模式，那么在生產模式下，自然也是有解決方案的；通常 Vue 的項目在編譯成最終的 js 文件后，僅需要靜態(tài)服務器即可，這其中又以 nginx 為最優(yōu)選擇方案，輕量、高性能、高并發(fā)、反向代理服務等均為其優(yōu)點，這里需要做的數據請求代理的功能就使用到了 nginx 的 反向代理 功能

conf/nginx.conf 文件配置增加以下內容

location /api/ {
  proxy_pass http://localhost:8081/myserver/;
}

該配置同樣是將 http://localhost:8081/myserver/ 的目標服務端位置代理為本地服務的 /api 路徑，如此，生產環(huán)境下的數據請求問題也得以解決

感謝各位的閱讀！關于“如何解決Vue兼容ie9的問題”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！

另外有需要云服務器可以了解下創(chuàng)新互聯scvps.cn，海內外云服務器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務器、裸金屬服務器、高防服務器、香港服務器、美國服務器、虛擬主機、免備案服務器”等云主機租用服務以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應用場景需求。

分享名稱：如何解決Vue兼容ie9的問題-創(chuàng)新互聯
URL地址：http://muchs.cn/article34/eeise.html

成都網站建設公司_創(chuàng)新互聯，為您提供企業(yè)網站制作、手機網站建設、小程序開發(fā)、網站導航、標簽優(yōu)化、外貿網站建設

廣告

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

小程序開發(fā)