1、版本兼容性问题

  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' //放在最顶部，确保全面加载。

  1. http网络请求(跨域)

http 组件使用 axios，xios 对 ie9 版本以下跨域由前端项目打包的解决方案 webpack 代理webpack 的 devServer.proxy的功能实现。

devServer: {
        public: "",
// 代理
 
        proxy: {
"/api": {
                target: process.env.VUE_APP_USE_IP,
                changeOrigin: true,
            },
        },
    },
  1. 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()
    }
  1. ：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"),
}
  1. 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;