vue-cli项目中使用Vue、iview并兼容ie9及以上浏览
2018-07-02 本文已影响596人
5df463a52098
最近在写一个后台管理系统,用的vue-cli的架子,ui框架使用的iview,要求兼容IE9及以上浏览器,但是在ie上会出现多种不兼容问题:
问题一:IE不支持es6
ie浏览器下,页面出不来。
解决方法:
1、安装 babel-polyfill
npm install babel-polyfill
2、引入babel-polyfill
在webpack.base.conf.js中
image.png
修改成:
image.png
问题二:ie10以下,iview的日期组件在选择时间的时候出不来,以及下拉框无法选中的问题
原因是:iview-admin中直接用到了DOM的dataset属性,需要向后兼容
解决方法:
第一种方式:
1、安装element-dataset;
2、在main.js中引入
import ElementDataset from 'element-dataset';
ElementDataset();
第二种方式:
直接在index.html中引入一段js代码
<script>
var isIE = function(){
return (window.navigator.userAgent.indexOf("MSIE")>=1);
}
// 修复IE10及以下版本不支持dataset属性的问题,兼容transfer-dom.js中使用了dataset的问题
if (isIE() && window.HTMLElement) {
if (Object.getOwnPropertyNames(HTMLElement.prototype).indexOf('dataset') === -1) {
Object.defineProperty(HTMLElement.prototype, 'dataset', {
get: function() {
var attributes = this.attributes;
var name = [],
value = [];
var obj = {};
for (var i = 0; i < attributes.length; i++) {
if (attributes[i].nodeName.slice(0, 5) == 'data-') {
name.push(attributes[i].nodeName.slice(5));
value.push(attributes[i].nodeValue);
}
}
for (var j = 0; j < name.length; j++) {
obj[name[j]] = value[j];
}
return obj;
}
});
}
}
</script>
问题三:IE不支持promise
ie下报错:promise未定义
解决方法:
1.安装es6-promise
npm install es6-promise
2.引入es6-promise
在main.js中
import promise from 'es6-promise'
promise.polyfill()
问题四:ie9不支持placeholder属性
解决方法:
1.安装
npm install ie-placeholder
2、引入
在main.js中
import 'ie-placeholder'