最近试了vue项目在IE上运行的效果,结果打开空白屏,经过处理又遇到各种问题,在这里记录一下问题和解决方案,又遇到其它适配问题的朋友也希望可以留言一下问题和解决方案供大家参考,谢谢。
首先是最基本的问题:IE不支持ES6语法,这个就是一上来白屏的问题,看控制台提示语法错误,解决方案:
1、安装babel-polyfill:npm i babel-polyfill -save。
2、main.js中引入:import 'babel-polyfill'。
3、如果还有报语法错误就点击看一下是哪个库中的js报错然后在vue.config.js中单独添加,例如加入是echarts中的js文件报错就添加:transpileDependencies: ['echarts'] 。
上面处理完后一般就可以正常运行了,下面记录一些其他适配问题,也希望大家帮忙补充:
1、正则表达式带来的报错
如果某个界面中使用了正则表达式中包含了 ‘?<=’ 就会报 ‘[Object error] {description: "错误的数量词"} ...’ 类似这样的错误(IE不支持后行断言),想办法用其他方法实现需要的功能。
2、word-break:break-all;不生效
在IE上word-break和word-wrap都需要html元素为块级元素才能生效,所以如果是用了span就不生效,用div可以生效。
3、flex布局子视图换行问题
父元素设置了display:flex,且是纵向布局,里面子视图宽度默认是100%的,给子视图内容设置了换行,在其他浏览器没问题,在IE里面没有换行宽度超出了父视图的宽,给子视图设置width:100%即可。
(持续更新...)