vue-cli4+vue2兼容安卓7(h5嵌入app)，一步步排查发现问题并且解决(vue白屏)

1、最近在做一个项目使用vue重构(h5嵌入安卓app)，我们的系统最低版本安卓7，然后就遇到问题了，刚开始打包前两天还好好的，就过了2天就突然一发布就不行了。

①首先我想到公司搬家导致的内网访问不了，然后我找运维配上白名单，不行。
②然后我就排查是不是依赖导致的，我检查了可以访问的vue项目的依赖一模一样的。除了我新项目使用了history模式，然后我就切换模式，结果还是不行。然后我就用之前可以访问的项目的架构直接进行部署，依然不行，然后我又用之前的那个项目部署一次发现那个项目也不能用了。奇怪了这就。
③到了这里我们肯定想到是哪个依赖出问题了，而且肯定是core-js跟es6-promise这些插件的问题，然后我就使用cdn方式引入也不行。
④接下来我就在看依赖的过程中心乱如麻，太多了依赖，最后我只能先，使用谷歌浏览器找到报错的地方，因为我使用vconsole打印始终执行不到那块，只能使用webview调试的方式解决。
2、webview调试
①首先我们使用数据线链接手机或者移动设备，打开开发者模式，各种手机不同可以百度。
②用谷歌浏览器访问 chrome://inspect/#devices 或者直接在浏览器输入about:inspect 选中【Discover USB Devices】前面的复选框

③然后我们点击inspect会跳转到一个新的页面如果打开就正常了，如果白屏的话，我们在host中配置如下

61.91.161.217 chrome-devtools-frontend.appspot.com
61.91.161.217 chrometophone.appspot.com

还不行就链接vpn，可能需要翻墙解决。

3、最终我查到了问题了，是由于一个…mapstate({[‘loading’]})这个影响的不过最主要还是 …这个对象展开运算符导致的错误，es6没转换成es5的语法。最终排查可能是近期es6-promise更新导致的。由于时间原因还没有实际查探过等有空我深入看看。

vue-cli4+vue2兼容安卓7(h5嵌入app)，一步步排查发现问题并且解决(vue白屏)相关推荐

vue cli4 vue2 多页面打包配置与坑点
前言: 一直以来都没用上多页面打包,这次遇到个业务特殊情况,想到用多页面打包的方案来解决,于是按照vue cli 官方文档在自己的项目上配置跑了一下,果然一跑就是一堆问题.只能说事情总是比我们想象的要 ...
h5 video 手机显示第一帧_解决h5嵌入app后video标签poster不能显示视频第一帧（表现为空白）...
这里我们先来描述一下问题,页面中使用了video标签,按照video标签的官方介绍下图介绍: 没有设置poster的情况下在浏览器中我们可以看到视频的第一帧,页面效果如下图左图所示:但是嵌入App后, ...
android 监听 h5 window,H5嵌入APP后，通过window.WebViewJavascriptBridge原生APP与H5之间交互...
下面从H5的角度记录交互思路: 1:安卓环境和ios环境稍微有点不同,需要根据navigator.userAgent判断一下当前环境 2:仍然是APP环境不同,安卓需要进行兼容性判断,如果不存在win ...
H5嵌入APP的联合登录的解决方案
什么是联合登录因为公司产品的发展,会与第三方的一些商户进行对接,商户APP提供入口,进入我们的H5页,从而提供服务. 而商户希望用户在其APP进行账户登录后,进入H5页不再进行登录,所以我们的H5需 ...
iframe嵌入页面白屏_BFCache 与浏览器前进后退白屏
什么是BFCache back-forward cache, 为浏览器前进/后退时准备的缓存官方解释提到了 nsIDOMWindow ,那什么是 nsIDOMWindow 呢? This inter ...
解决vue多个路由共用一个页面的问题
解决vue多个路由共用一个页面的问题参考文章: (1)解决vue多个路由共用一个页面的问题 (2)https://www.cnblogs.com/bootdo/p/11640844.html (3) ...
解决vue axios跨域请求发送两次问题
解决vue axios跨域请求发送两次问题参考文章: (1)解决vue axios跨域请求发送两次问题 (2)https://www.cnblogs.com/wordblog/p/12171875. ...
解决vue页面刷新或者后退参数丢失的问题
解决vue页面刷新或者后退参数丢失的问题参考文章: (1)解决vue页面刷新或者后退参数丢失的问题 (2)https://www.cnblogs.com/myfate/p/11573824.html ...
解决vue addRoutes多次添加路由重复问题。
解决vue addRoutes多次添加路由重复问题. 参考文章: (1)解决vue addRoutes多次添加路由重复问题. (2)https://www.cnblogs.com/hsdying/p/ ...

vue-cli4+vue2兼容安卓7(h5嵌入app)，一步步排查发现问题并且解决(vue白屏)

vue-cli4+vue2兼容安卓7(h5嵌入app)，一步步排查发现问题并且解决(vue白屏)相关推荐

最新文章

热门文章