title: ie踏坑路

前端不归路之兼容性写法，不归路中路之ie

坑一：

error:SyntaxError: Unexpected token import at Array.map (<anonymous>)

报错源 // import Vue from 'vue';

原因：node.js 仅支持部分es6语法 import 不在支持之列

解决方式使用替代：const Vue = require("vue");

可能存在问题：这样修改如果babel.config.js中不加入该文件正常编译会出错，待查证

坑二：

error:SyntaxError: Unexpected token export

at Array.map (<anonymous>)

报错源//export function oneOf (value, validList) {

原因:

解决方法一：export.oneOf = function (value, validList)//无效

解决方法二：module.exports = function (value, validList)//当前使用

解决方法三：a中export default xxx改为 moudle.exports = xxxx

另外，如果在webpack中同一个模块下，使用了import xxx, 再使用module.exports也会出现报错：

Uncaught TypeError: Cannot assign to read only property 'exports' of object

此时，需要把module.exports修改为export default。如果其他很多模块都使用require的方式引入本模块，那么需要在require后面添加.default，或者使用一个中间文件复制本模块，然后在本模块require中间文件，再使用module.exports导出。

坑三：

error：SyntaxError: Unexpected token const

at Array.map (<anonymous>)

报错源：moudle.exports = const MutationObserver = isServer ? false : window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver || false;

原因：const声明位置

解决方法：去掉const

关于iview兼容ie

解决方法：vue.config.js 加入transpileDependencies: ['strip-ansi','ansi-regex','view-design'] //For IE

原因：babel默认没有把node_module中的view-design中的es6语法转成es5,es6和promise语法在ie中不兼容

引发其他问题：引入后再运行开发环境时，所有浏览器打开项目为空白

引发其他问题的可能原因：本地环境配置差异（具体待查明）

解决办法：新建.npmrc文件 package-lock=false 删除node_module文件重新npm install

记录css兼容

position ie(10含以下)无效

解决：background-color:transparent

height:100%无效

解决：加上overflow：hidden；（经试验无效）

flex:ie下兼容效果极差

解决： 目前ie11尚可行 兼容性写法，将兼容写法封装成公共类

写法：

// flex布局兼容写法

.flex{

display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */

display: -moz-box; /* Firefox 17- */

display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */

display: -moz-flex; /* Firefox 18+ */

display: -ms-flexbox; /* IE 10 */

display: flex;

}

.display_inline-flex{

display: -webkit-inline-box;

display: -ms-inline-flexbox;

display: -webkit-inline-flex;

display: inline-flex;

}

.display_inline-flex > *{

display: block;

}

/*伸缩流方向*/

.flex-direction_column{

-webkit-box-orient: vertical;

-ms-flex-direction: column;

-webkit-flex-direction: column;

flex-direction: column;

}

/*主轴对齐*/

.justify-content_flex-center{

-webkit-box-pack: center;

-ms-flex-pack: center;

-webkit-justify-content: center;

justify-content: center;

}

.justify-content_flex-end{

-webkit-box-pack: end;

-ms-flex-pack: end;

-webkit-justify-content: flex-end;

justify-content: flex-end;

}

.justify-content_flex-justify{

-webkit-box-pack: justify;

-ms-flex-pack: justify;

-webkit-justify-content: space-between;

justify-content: space-between;

}

/*侧轴对齐*/

.align-items_flex-start{

-webkit-box-align: start;

-ms-flex-align: start;

-webkit-align-items: flex-start;

align-items: flex-start;

}

.align-items_flex-end{

-webkit-box-align: end;

-ms-flex-align: end;

-webkit-align-items: flex-end;

align-items: flex-end;

}

.align-items_center{

-webkit-box-align: center;

-ms-flex-align: center;

-webkit-align-items: center;

align-items: center;

}

.align-items_baseline{

-webkit-box-align: baseline;

-ms-flex-align: baseline;

-webkit-align-items: baseline;

align-items: baseline;

}

/*伸缩性*/

.flex_auto{

-webkit-box-flex: 1;

-ms-flex: auto;

-webkit-flex: auto;

flex: auto;

}

.flex_1{

width: 0;

-webkit-box-flex: 1;

-ms-flex: 1;

-webkit-flex: 1;

flex: 1;

}

/*显示顺序*/

.order_2{

-webkit-box-ordinal-group: 2;

-ms-flex-order: 2;

-webkit-order: 2;

order: 2;

}

.order_3{

-webkit-box-ordinal-group: 3;

-ms-flex-order: 3;

-webkit-order: 3;

order: 3;

}

//flex兼容写法部分内容结束