Vue 在IE中一片空白,解决方案
发布时间:2019-03-25 13:48 星期一
这只企鹅完全可以代表我遇到这个BUG时候的心情。
首先,明确一点,引起这个问题的原因有很多,不能一概而论。
一、Vue-cli 3.0
根据实践,Vue-cli 3.0默认支持ie系列的浏览器,在我使用vue ui 建立的新项目同样可以在IE系列的浏览器上正常显示。所以,出现IE上面一片空白,只能是自己写的文件的问题,网上的一堆配置也没什么用,完全是浪费时间。
本次教程可以针对这个系列的问题有一个完美的解决方法,只是需要较长时间判断。
二、问题简述
Vue-cli 3.0 项目在ie系列浏览器、360兼容模式均无法正常显示,症状为:一片空白。
详情一:360兼容模式一片空白
详情二:APP根节点没有渲染任何Vue相关的东西。
详情三:仅有少量莫名其秒的提示
三、解决方案(二分法)
1.vue入口文件为main.js
剪切main.js中所有代码,
在main.js文件中尝试【参考位置如下】:console.log(123);
尽量靠近最后面
在IE浏览器中能正常打印出来
于是采用二分法,把整个文件的所有行数,直接删除一半代码,两次之后,发现其中一次console.log(123)能正常打印,另一次不能。
经过多次细分之后,终于确定产生这文件的位置了,把路由和import禁掉,发现页面正常显示。
于是,继续到这个组件里面去进行二分法,通过页面是否渲染元素来判断问题所在的位置。最后经过两层组件之后找到了导致IE页面空白的原因,并把其给屏蔽。
至此,结束,重点是二分法,二分法,vue-cli 3.0 生成的项目默认支持IE的,产生这个问题通常是我们引入的东西引起的
问题解决后的页面