1.为了能够支持ES6新语法，安装babel-polyfill。
（1）npm install babel-polyfill --save复制代码
（2）修改webpack.base.conf.js
修改前entry: { main:'./src/main',},复制代码
修改后entry: { main: ["babel-polyfill","./src/main"],},
2.兼容dataset
这是ie10及以下不支持dataset导致的，而iview的transfer-dom.js使用了这个属性
解决办法：在main.js加入如下代码
//这是ie10及以下不支持dataset导致的，而iview的transfer-dom.js使用了这个属性
if (window.HTMLElement) {
if (Object.getOwnPropertyNames(HTMLElement.prototype).indexOf('dataset') === -1) {
Object.defineProperty(HTMLElement.prototype, 'dataset', {
get: function () {
var attributes = this.attributes; // 获取节点的所有属性
var name = [];
var value = []; // 定义两个数组保存属性名和属性值
var obj = {}; // 定义一个空对象
for (var i = 0; i < attributes.length; i++) { // 遍历节点的所有属性
if (attributes[i].nodeName.slice(0, 5) === 'data-') { // 如果属性名的前面5个字符符合"data-"
// 取出属性名的"data-"的后面的字符串放入name数组中
name.push(attributes[i].nodeName.slice(5));
// 取出对应的属性值放入value数组中
value.push(attributes[i].nodeValue);
}
}
for (var j = 0; j < name.length; j++) { // 遍历name和value数组
obj[name[j]] = value[j]; // 将属性名和属性值保存到obj中
}
return obj; // 返回对象
},
});
}
}
3.降级依赖版本
如果遇到以下错误：
错误1：“webpackJsonp”未定义
解决方案：更改webpack-dev-server版本为2.71或更低
npm install --save-dev webpack-dev-server@2.7.1复制代码
4.兼容requestAnimationFrame（ie9）
ie9是不支持requestAnimationFrame的，如果你使用了出现错误，那也没关系，往下看就行了。
解决方案：添加以下代码到main.js
// window.requestAnimationFrame多浏览器兼容问题补丁
// 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）
错误信息：无法获取未定义或 null 引用的属性“add”
无法获取未定义或 null 引用的属性“remove”
如果你查看sourceMap发现了classList().add或classList.remove()等等，那肯定是classList的问题了。
解决方案：添加以下代码到main.js
//解决iview在IE9中list方法报错的问题
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.如果请求采用axios，设置axios传参数格式为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删除操作无法触发数据变动监听
解决办法：加入ie9input事件垫片
（1）安装：npm install --save ie9-oninput-polyfill
（2）main.js里：
import oninputPolyfillfrom 'ie9-oninput-polyfill'
Vue.use(oninputPolyfill);
9.在IE9中,iview的table组件，在数据未加载出来之前，当table内容列数超过table最大宽度时，页面会不停闪烁。
解决方法：强制给table组件的.ivu-table-tip添加overflow-x: scroll;
//ie9 闪烁兼容
.ivu-table-tip{
overflow-x: scroll;
}
10.在IE9中,iview的select组件，当选项过多（选项少时，无此bug），出现滚动条时（overflow:auto），下拉列表的样式bug。
解决问题根据：https://segmentfault.com/a/1190000014639150
解决方法：全局加一个样式
/* ie9 样式兼容*/
.ivu-select-dropdown{
min-width:100%;
display:inline-block;
left:0 !important;
width:auto !important;
}
11.ie9上vue-cli打包的css加载不了（https://www.jianshu.com/p/2c0dafb4455c）
npm install --save-dev css-split-webpack-plugin
在webpack.prod.conf.js里
const CSSSplitWebpackPlugin= require('css-split-webpack-plugin').default;
...
//css 分开打包
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仍然报语法错误，请检查index.html是否加了meta，如下：
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
最重要的检查项目的更目录是否有babel的配置文件.babelrc,如果没有，请在根目录新建文件名为“.babelrc”的文件，内容如下：
{
"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"]
}
}
}
相关问题链接：https://www.jianshu.com/p/13d5350c6d16
相关链接：https://juejin.im/post/5b94f141f265da0ada5222dc
](https://upload-images.jianshu.io/upload_images/12250765-8c5a1116165401bd.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
