Android WebView加载公网Vue应用白屏但加载谷歌正常问题咨询

排查与解决步骤 #

1. 补充WebView必要配置
   你当前只开启了JavaScript支持，缺少Vue应用运行必备的配置项，在MainActivity的WebSettings配置段添加以下代码：

// 开启DOM存储，Vue应用普遍依赖localStorage等存储能力
webSettings.setDomStorageEnabled(true);
// 允许加载混合内容（HTTPS站点内的HTTP资源），Android 9.0以上默认禁止
webSettings.setMixedContentMode(WebSettings.MIXED_CONTENT_ALWAYS_ALLOW);
// 允许JS自动打开窗口，部分Vue路由跳转逻辑需要
webSettings.setJavaScriptCanOpenWindowsAutomatically(true);

2. 删除MyWebViewClient中的错误代码
   你在shouldOverrideUrlLoading方法里硬编码了url = "https://albert.suments.com/estelares";，这行代码会强制覆盖所有正常的页面跳转请求，直接破坏页面加载逻辑，将这行完全删除即可。

3. 排查HTTPS证书与响应头限制

• 确认你的站点SSL证书是Android系统信任的公共CA签发，若为测试用自签证书，可临时重写MyWebViewClient的onReceivedSslError方法，测试阶段调用handler.proceed()跳过证书校验（生产环境请勿使用，会有安全风险）。
• 检查站点响应头是否存在X-Frame-Options: DENY或X-Frame-Options: SAMEORIGIN配置，该配置会禁止页面被嵌入到非同源的容器中，需要删除或调整该配置。

4. 排查Vue路由配置
   如果你的Vue应用使用了history模式的路由，而非默认的hash模式，需要额外处理WebView的路由拦截逻辑，或者临时将路由切换为hash模式验证是否是路由导致的白屏问题。

5. 开启WebView远程调试定位具体问题
   在MainActivity的onCreate方法中添加以下代码开启WebView远程调试：

WebView.setWebContentsDebuggingEnabled(true);

真机连接电脑后，打开Chrome浏览器访问调试页面，即可看到WebView内的页面控制台报错、资源加载情况，可直接定位具体的白屏原因。

内容的提问来源于stack exchange，提问作者Javier Gonzalez Moncayo