1.為了能夠支持ES6新語(yǔ)法晚伙，安裝babel-polyfill。
（1）npm install babel-polyfill --save復(fù)制代碼
（2）修改webpack.base.conf.js
修改前entry: { main:'./src/main',},復(fù)制代碼
修改后entry: { main: ["babel-polyfill","./src/main"],},
2.兼容dataset
這是ie10及以下不支持dataset導(dǎo)致的拿愧，而iview的transfer-dom.js使用了這個(gè)屬性
解決辦法：在main.js加入如下代碼
//這是ie10及以下不支持dataset導(dǎo)致的，而iview的transfer-dom.js使用了這個(gè)屬性
if (window.HTMLElement) {
if (Object.getOwnPropertyNames(HTMLElement.prototype).indexOf('dataset') === -1) {
Object.defineProperty(HTMLElement.prototype, 'dataset', {
get: function () {
var attributes = this.attributes; // 獲取節(jié)點(diǎn)的所有屬性
var name = [];
var value = []; // 定義兩個(gè)數(shù)組保存屬性名和屬性值
var obj = {}; // 定義一個(gè)空對(duì)象
for (var i = 0; i < attributes.length; i++) { // 遍歷節(jié)點(diǎn)的所有屬性
if (attributes[i].nodeName.slice(0, 5) === 'data-') { // 如果屬性名的前面5個(gè)字符符合"data-"
// 取出屬性名的"data-"的后面的字符串放入name數(shù)組中
name.push(attributes[i].nodeName.slice(5));
// 取出對(duì)應(yīng)的屬性值放入value數(shù)組中
value.push(attributes[i].nodeValue);
}
}
for (var j = 0; j < name.length; j++) { // 遍歷name和value數(shù)組
obj[name[j]] = value[j]; // 將屬性名和屬性值保存到obj中
}
return obj; // 返回對(duì)象
},
});
}
}
3.降級(jí)依賴版本
如果遇到以下錯(cuò)誤：
錯(cuò)誤1：“webpackJsonp”未定義
解決方案：更改webpack-dev-server版本為2.71或更低
npm install --save-dev webpack-dev-server@2.7.1復(fù)制代碼
4.兼容requestAnimationFrame（ie9）
ie9是不支持requestAnimationFrame的，如果你使用了出現(xiàn)錯(cuò)誤拾因，那也沒(méi)關(guān)系，往下看就行了旷余。
解決方案：添加以下代碼到main.js
// window.requestAnimationFrame多瀏覽器兼容問(wèn)題補(bǔ)丁
// http://paulirish.com/2011/requestanimationframe-for-smart-animating/
// http://my.opera.com/emoller/blog/2011/12/20/requestanimationframe-for-smart-er-animating
// requestAnimationFrame polyfill by Erik M?ller. fixes from Paul Irish and Tino Zijdel MIT license
(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);
};
}
}());
5.兼容classList（ie9）
錯(cuò)誤信息：無(wú)法獲取未定義或 null 引用的屬性“add”
無(wú)法獲取未定義或 null 引用的屬性“remove”
如果你查看sourceMap發(fā)現(xiàn)了classList().add或classList.remove()等等绢记，那肯定是classList的問(wèn)題了。
解決方案：添加以下代碼到main.js
//解決iview在IE9中l(wèi)ist方法報(bào)錯(cuò)的問(wèn)題
if (!('classList' in document.documentElement)) {
Object.defineProperty(HTMLElement.prototype, 'classList', {
get: function () {
var self = this;
function update(fn) {
return function (value) {
var classes = self.className.split(/\s+/g);
var index = classes.indexOf(value);
fn(classes, index, value);
self.className = classes.join(' ');
};
}
return {
add: update(function (classes, index, value) {
if (!~index) classes.push(value);
}),
remove: update(function (classes, index) {
if (~index) classes.splice(index, 1);
}),
toggle: update(function (classes, index, value) {
if (~index) { classes.splice(index, 1); } else { classes.push(value); }
}),
contains: function (value) {
return !!~self.className.split(/\s+/g).indexOf(value);
},
item: function (i) {
return self.className.split(/\s+/g)[i] || null;
},
};
},
});
}
6.如果請(qǐng)求采用axios正卧，設(shè)置axios傳參數(shù)格式為form-data
（1）安裝axios蠢熄，npm install axios --save
(2)main.js 里：
import axiosfrom 'axios';
axios.defaults.headers.post['Content-Type'] ='application/x-www-form-urlencoded';
axios.defaults.headers.get['Content-Type'] ='application/x-www-form-urlencoded';
axios.defaults.transformRequest = [function (data) {
let ret =''
for (let itin data) {
ret +=encodeURIComponent(it) +'=' +encodeURIComponent(data[it]) +'&'
}
return ret
}]
//然后再修改原型鏈
Vue.prototype.$http = axios;
攔截器：
7.解決IE9中不支持foreach的解決方法
//解決IE9中不支持foreach的解決方法
if ( !Array.prototype.forEach ) {
Array.prototype.forEach = function forEach( callback, thisArg ) {
var T, k;
if ( this == null ) {
throw new TypeError( "this is null or not defined" );
}
var O = Object(this);
var len = O.length >>> 0;
if ( typeof callback !== "function" ) {
throw new TypeError( callback + " is not a function" );
}
if ( arguments.length > 1 ) {
T = thisArg;
}
k = 0;
while( k < len ) {
var kValue;
if ( k in O ) {
kValue = O[ k ];
callback.call( T, kValue, k, O );
}
k++;
}
};
}
8.解決IE中，elementUI的input刪除操作無(wú)法觸發(fā)數(shù)據(jù)變動(dòng)監(jiān)聽(tīng)
解決辦法：加入ie9input事件墊片
（1）安裝：npm install --save ie9-oninput-polyfill
（2）main.js里：
import oninputPolyfillfrom 'ie9-oninput-polyfill'
Vue.use(oninputPolyfill);
9.在IE9中,iview的table組件炉旷，在數(shù)據(jù)未加載出來(lái)之前签孔，當(dāng)table內(nèi)容列數(shù)超過(guò)table最大寬度時(shí)，頁(yè)面會(huì)不停閃爍砾跃。
解決方法：強(qiáng)制給table組件的.ivu-table-tip添加overflow-x: scroll;
//ie9 閃爍兼容
.ivu-table-tip{
overflow-x: scroll;
}
10.在IE9中,iview的select組件骏啰，當(dāng)選項(xiàng)過(guò)多（選項(xiàng)少時(shí)，無(wú)此bug）抽高，出現(xiàn)滾動(dòng)條時(shí)（overflow:auto）判耕，下拉列表的樣式bug。
解決問(wèn)題根據(jù)：https://segmentfault.com/a/1190000014639150
解決方法：全局加一個(gè)樣式
/* ie9 樣式兼容*/
.ivu-select-dropdown{
min-width:100%;
display:inline-block;
left:0 !important;
width:auto !important;
}
11.ie9上vue-cli打包的css加載不了（http://www.reibang.com/p/2c0dafb4455c）
npm install --save-dev css-split-webpack-plugin
在webpack.prod.conf.js里
const CSSSplitWebpackPlugin= require('css-split-webpack-plugin').default;
...
//css 分開(kāi)打包
plugins:[
new CSSSplitWebpackPlugin({
size:4000,
filename:'static/css/[name]-[part].[ext]'
}),
]
12.iview 多選框checkbox樣式翘骂，IE10壁熄，IE11樣式bug；tree組件樣式bug碳竟。
修改方法：全局樣式如下更改草丧。
//checkbox
.ivu-checkbox-checked .ivu-checkbox-inner:after {
display:block;
-ms-transform:rotate(45deg)scale(1);/* IE 9 */
-moz-transform:rotate(45deg)scale(1);/* Firefox */
-webkit-transform:rotate(45deg)scale(1);/* Safari 和 Chrome */
}
.ivu-checkbox-indeterminate .ivu-checkbox-inner:after {
display:block;
}
13、如果以上1莹桅，2昌执，14，5，7等兼容配置都加了懂拾，IE仍然報(bào)語(yǔ)法錯(cuò)誤煤禽，請(qǐng)檢查index.html是否加了meta，如下：
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
最重要的檢查項(xiàng)目的更目錄是否有babel的配置文件.babelrc,如果沒(méi)有岖赋，請(qǐng)?jiān)诟夸浶陆ㄎ募麨椤?babelrc”的文件檬果，內(nèi)容如下：
{
"presets": [
"es2015",
["env", {
"modules": false,
"targets": {
"browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
}
}],
"stage-2"
],
"plugins": ["transform-vue-jsx", "transform-runtime"],
"env": {
"test": {
"presets": ["env", "stage-2"],
"plugins": ["transform-vue-jsx", "transform-es2015-modules-commonjs", "dynamic-import-node"]
}
}
}
相關(guān)問(wèn)題鏈接：http://www.reibang.com/p/13d5350c6d16
相關(guān)鏈接：https://juejin.im/post/5b94f141f265da0ada5222dc
](https://upload-images.jianshu.io/upload_images/12250765-8c5a1116165401bd.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
