前言

背景情況

vue - 2.5.11 vue-cli 使用模板 webpack-simple http請求：axios

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

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

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

ES6兼容

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

npm i babel-polyfill --save-dev

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

import 'babel-polyfill';

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

useBuiltIns 有三個設(shè)置選項(xiàng)

false - 不做任何操作 entry - 根據(jù)瀏覽器版本的支持，將 polyfill 需求拆分引入，僅引入有瀏覽器不支持的polyfill usage - 檢測代碼中 ES6/7/8 等的使用情況，僅僅加載代碼中用到的 polyfill

這里推薦設(shè)置為 entry ，完整的 .babelrc 內(nèi)容如下：

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

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

Number對象

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

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

解決這個問題不需要引入包來解決，同樣在項(xiàng)目主入口文件 main.js 加入以下代碼（代碼盡可能靠前，最好是在引用