1. 问题出现
使用vue-cli构建的前端项目,开发期间一切正常,上线前夕一部分功能需要通过安卓内嵌浏览器webview来访问,结果直接白屏,浏览器访问正常,使用安卓模拟器根本不行。
2. 尝试更换内嵌浏览器
最开始感觉是浏览器内核问题,更换腾讯TBS后,依然白屏。
3. 尝试各种babel配置
然后又感觉是使用了es6等高级语法的问题,尝试各类babel配置,依然白屏
4. 二分排除法定位问题
将vue代码部分全部删除,只保留静态页面,结果能出现,然后慢慢放开部分代码,最终发现一些引入模块导入后会导致白屏。
看来是引入模块兼容性差导致的,悲催啊。
5. 模拟器与真机测试还不一样
终于解决问题,感觉大功告成,结果上了真机,又白屏了。
再次使用二分法,一部分一部分代码测试,又发现一些引入模块会导致白屏,去掉之后,终于搞定。
前后折腾3天时间…只怪自己缺乏经验啊。
6. 总结
chrome浏览器兼容性太好了,怎么都能跑。
模拟器的兼容性比真机好像还是要好一点,反正我这次有一个模块是模拟器可以跑,真机跑不了。
7. 反思
前端项目,选择模块要慎重!尽量选择大厂出品、大神出品、github高星,否则不知道哪一天就出事,避免踩坑,从选型做起。