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