vue項目兼容ie
一、兼容ES6
Vue 的核心框架 vuejs 本身，以及官方核心插件（VueRouter、Vuex等）均可以在 ie9 上正常使用。但ie不兼容es6，所以需要安裝插件將「Promise」等高級語法轉換成ie可以識別的es5。
報錯：ReferenceError: 「Promise」未定義，頁面空白
報錯：app.js文件報錯頁面空白，可能是缺少配置文件.babelrc
一、 babel-polyfill
npm install babel-polyfill –save
在main.js中的最前面引入import ‘babel-polyfill’（註：必須引入在最前面，保證所有es6語法都會被解析）
下載完成後找到build文件夾下的webpack.base.conf.js下的一段代碼
module.exports = {
entry: {
app: ‘./src/main.js’
},
替換為
module.exports = {
context: path.resolve(__dirname, ‘../’),
entry: {
app: [“babel-polyfill”, “./src/main.js”],
}
二、如果引入 babel-polyfill還有一些高級語法沒有被編譯，配置 .babelrc文件，官網如下： //www.babeljs.cn/ 根據項目選擇引入什麼插件，以及如何配置，詳情查看官網。
檢查根目錄下是否有.babelrc文件，如沒有自行創建。
.babelrc是Babel的配置文件，放在項目根目錄下，使用Babel的第一步就是配置這個文件，該文件主要是對預設（presets）和插件（plugins）進行配置
創建.babelrc文件的方法：
1.新建一個文件
2.右鍵-重新命名-輸入.babelrc. （開頭和結尾一共兩個點）
3.添加配置代碼，
{
”presets”: [
[“env”, {
”modules”: false,
”useBuiltIns”: “entry”
}],
”stage-2″
]
}
配置代碼解讀:
(1) modules該參數的含義是：啟用將ES6模塊語法轉換為另一種模塊類型。將該設置為false就不會轉換模塊。默認為 『commonjs』.
這樣做的目的是：以前我們需要使用babel來將ES6的模塊語法轉換為AMD, CommonJS，UMD之類的模塊化標準語法，但是現在webpack都幫我做了這件事了，所以我們不需要babel來做，因此需要在babel配置項中設置modules為false，因為它默認值是commonjs, 否則的話，會產生衝突。
(2) useBuiltIns是指定哪些內容需要被 polyfill(兼容) 的設置，有三個設置選項
false – 不做任何操作
entry – 根據瀏覽器版本的支持，將 polyfill 需求拆分引入，僅引入有瀏覽器不支持的polyfill
usage – 檢測代碼中 ES6/7/8 等的使用情況，僅僅加載代碼中用到的 polyfill
(3) stage-2官方預設(preset), 有兩種，一個是按年份(babel-preset-es2017)，一個是按階段(babel-preset-stage-0)。 這主要是根據TC39 委員會ECMASCRPIT 發佈流程來制定的。
因此到目前為止 有4個不同的階段預設：stage-0,1,2,3以上每種預設都依賴於緊隨的後期階段預設，也就是說stage-0是包括stage-1的，以此類推。
因此 stage-0包含stage-1/2/3的內容。所以如果我們不知道需要哪個stage-x的話，直接引入stage-0就好了。
目前一般是使用stage2 (//babeljs.io/docs/en/babel-preset-stage-2) 該特性規範己經被起草，將會被納入標準里.
配置完以上兩項後，基本可以解決頁面空白的問題。
三、網上還有一些其他注意事項，比如安裝了新的功能性插件e-chart,地圖,或者static目錄下有其他js文件(有es6語法) 等，IE 會報錯。
這是由於這些第三方插件的底層也有es6代碼，沒有被編譯，個人實踐後認為是由於沒有將babel-polyfill引入在頁面最頂部導致的。但如引入在頂部還報錯，請參考以下解決方案：
1.找到webpack.base.config.js
2.
{
test: /\.js$/,
loader: ‘babel-loader’,
include: [
resolve(‘src’),
resolve(‘test’),
resolve(‘static’),
resolve(‘node_modules/webpack-dev-server/client’)
resolve(‘node_modules/echarts’)
]
}
二、兼容axios
一、如果只需要兼容axios的話，可以只用 es6-promise ，不引用babel-polyfill，安裝方法如下：
npm install es6-promise –save
import promise from ‘es6-promise’;
promise.polyfill();
二、IE瀏覽器緩存問題，導致axios接口不重新請求，頁面內容不刷新
解決方案： axios請求上加時間戳，使每次都是參數不同的新請求
1、找到項目中對axios進行封裝的文件
2.找到post和get方法，修改裏面的參數，以post請求為例，原參數為data: …param,改為如下第7行所示
//post請求
post(url, param) {
return new Promise((resolve, reject) => {
axios({
method: ‘post’,
url,
data: {
t: Date.parse(new Date()),
…param
},
cancelToken: new CancelToken(c => {
cancel = c
})
}).then(res => {
resolve(res)
}).catch((error) => {
reject(error);
})
})
}
3.問題分析：
這個頁面不刷新的問題，一開始以為是v-router的緩存機制導致的，嘗試在每次跳轉路由時加時間戳，但並沒有解決問題，最後才發現是axios的問題。
由此反向推理，如果將axios加上時間戳，不能解決問題，請重新檢查是否有v-router的，或者請求方式為history，等緩存機制的影響。
