安卓webview访问vue工程白屏/无响应/无法加载问题处理

问题出现

使用vue-cli构建的前端项目,开发期间一切正常,上线前夕一部分功能需要通过安卓内嵌浏览器webview来访问,结果直接白屏,浏览器访问正常,使用安卓模拟器根本不行。

尝试更换内嵌浏览器

最开始感觉是浏览器内核问题,更换腾讯TBS后,依然白屏。

尝试各种babel配置

然后又感觉是使用了es6等高级语法的问题,尝试各类babel配置,依然白屏

二分排除法定位问题

将vue代码部分全部删除,只保留静态页面,结果能出现,然后慢慢放开部分代码,最终发现一些引入模块导入后会导致白屏。

看来是引入模块兼容性差导致的,悲催啊。

模拟器与真机测试还不一样

终于解决问题,感觉大功告成,结果上了真机,又白屏了。

再次使用二分法,一部分一部分代码测试,又发现一些引入模块会导致白屏,去掉之后,终于搞定。

前后折腾3天时间…只怪自己缺乏经验啊。

总结

chrome浏览器兼容性太好了,怎么都能跑。

模拟器的兼容性比真机好像还是要好一点,反正我这次有一个模块是模拟器可以跑,真机跑不了。

反思

前端项目,选择模块要慎重!尽量选择大厂出品、大神出品、github高星,否则不知道哪一天就出事,避免踩坑,从选型做起。

发布了326 篇原创文章 · 获赞 238 · 访问量 52万+

猜你喜欢

转载自blog.csdn.net/woshisangsang/article/details/103925646