vue+element ie兼容性问题
divking
不以谋生而编码，只因热爱而选择
关注
1、版本兼容性问题
vue 只兼容ie8以上版本；
ie8及以下版本不支持Object.defineProperty方法，但这个是vue实现响应式的所必须的，所以从Vue的源码来看根本就无法支持IE8
2、IE 不兼容 axios的promiss对象;
在项目中使用了ES6 promise对象
安装：npm install es6-promise；
3、IE 不兼容es6语法；
IE不支持ES6语法
安装：npm install --save babel-polyfill；
配置：module.exports = { entry: ["babel-polyfill", "./src/main.js"] };
main.js中配置：import 'babel-polyfill' //放在最顶部，确保全面加载。
http网络请求(跨域)
http 组件使用 axios，xios 对 ie9 版本以下跨域由前端项目打包的解决方案 webpack 代理webpack 的 devServer.proxy的功能实现。
devServer: {
public: "",
// 代理
proxy: {
"/api": {
target: process.env.VUE_APP_USE_IP,
changeOrigin: true,
},
},
},
IE浏览器下功能无效
1、dom.click()方法无点击事件进行下载ie认为是漏洞，判断下是不是IE浏览器，然后特殊处理：
let blob = 'xxx' // blob对象
if (!!window.ActiveXObject || 'ActiveXObject' in window) {
window.navigator.msSaveBlob(blob, imgText + '.png')
} else {
let a = document.createElement('a')
a.setAttribute('href', URL.createObjectURL(blob))
a.clock()
}
：IE11 中app.js报语法错误或者缺少‘：’ ‘等
是因为文件里面还有ES6语法，需要转换，修改build/webpack.base.conf.js文件
{
test:/\.js$/,
loader:"babel-loader",
include:[
//把这个⽂件添加进去让他进⾏babel编译
resolve(
"node_modules/_vue-particles
@1.0.9@vue-particles/src/vue-particles"
),
resolve("src"),
resolve("test"),
}
ie11打不开vue项⽬，报错 “对象不⽀持“addEventListener”属性或⽅法
在head标签中加⼊< meta http-equiv=“X-UA-Compatible” content=“IE=EDGE”/>这个属性主要是设置浏览器优先使⽤什么模式来渲染页⾯的。代码IE=edge告诉IE使⽤最新的引擎渲染⽹页,这个在需要兼容IE浏览器的情况下都可以加上这句话。
4、：IE 11 flex:1;样式会出错，跟实际想要的效果不同：
因为IE11 flex:1;会识别为flex:1 1 0;⽽其他浏览器是flex:1 1 auto;
所以改为width:100%;flex:1 1 auto; 或width:100%;flex-grow:1
4、elementui框架在ie9浏览器下的兼容性问题
1、el-select组件内在IE9中会出现下图样式错乱，解决办法：
// select框固定下拉箭头兼容ie9
.el-select .el-input .el-input__suffix .el-icon-arrow-up{
-ms-transform: rotate(180deg)\0;
}
2、IE9中elementui的message提示框会出现样式错乱，解决方法：
// 兼容ie9，使提示框显示正常， \0是让这条代码只在IE9中生效；
.el-message .el-message__content{
display: inline-block\0;
}
3、IE9中el-cascader组件下拉没有水平对齐，解决方法：
// ie9 el-cascader兼容性问题
.el-cascader-menu__list .el-cascader-node .el-cascader-node__postfix,
.el-cascader-menu__list .is-active .el-cascader-node__prefix{
top: 10px\0;
}
4、IE9日期组件样式问题解决方法:
/* 解决IE9 日期组件样式问题 */
.demonstration, .el-date-editor--datetimerange {
display: inline-block !important;
vertical-align: middle;
line-height: 24px;
}
5、IE9的弹性布局flex都会失效，凡是在IE9中使用flex的都需要改成float浮动布局或者使用display: inline-block；属性来纠正。
6、如果要想使某一行代码在IE9中生效那么只需在代码后面添加 \0 ,例如： float: left\0;
申请转载
微信
朋友圈
QQ
图片分享
相关搜索
vuetify和element对比
vue2兼容ie吗
vue不支持ie
vue2支持ie吗
vue不兼容ie
vue怎么兼容ie浏览器
享界S9新车上市，上懂车帝第一时间掌握最新资料！
享界S9新车上市，不到40万起售，快来懂车帝看一手资料吧
懂车帝
懂车帝 的广告
×
评论
欢迎参与讨论
iconiconicon
