Ionic Capacitor运行Android设备出现白屏问题求助

以下是针对你遇到的白屏问题的常见排查方向和解决办法：

1. 网络连通性问题（livereload模式下核心问题） #

因为你使用了-l --external开启livereload，设备需要能正常访问电脑的开发服务器：

• 确认电脑和真机/模拟器处于同一WiFi网络
• 检查电脑防火墙是否允许8100端口（Ionic默认livereload端口）的入站连接
• 运行命令后，终端会输出类似DevApp running at http://192.168.x.x:8100的地址，直接在设备的浏览器中访问这个地址，如果无法加载，说明网络连通性有问题，先解决这个再尝试运行应用

2. Android WebView配置与版本问题 #

• 确保设备上的Android System WebView是最新版本，前往应用商店更新
• 修改capacitor.config.ts，添加必要的WebView配置：

  import { CapacitorConfig } from '@capacitor/cli';
  
  const config: CapacitorConfig = {
    appId: 'com.example.projectname',
    appName: 'projectname',
    webDir: 'www',
    server: {
      androidScheme: 'https',
      cleartextTrafficEnabled: true // 允许明文流量，适配livereload的HTTP连接
    },
    android: {
      webViewDebuggingEnabled: true // 开启WebView调试，方便后续排查
    }
  };
  
  export default config;
  

• 修改后执行ionic build && ionic cap sync android，再重新运行应用

3. 构建产物未同步 #

• 每次修改代码或配置后，必须先执行ionic build生成最新的Web资源，再执行ionic cap sync android将资源同步到Android项目中
• 如果跳过build直接运行ionic cap run，Android项目中的www文件夹可能是旧的或不完整的，导致白屏

4. 查看调试日志定位问题 #

• 打开Android Studio的Logcat，过滤WebView或Chrome关键词，查看是否有加载失败、JS错误等日志
• 开启设备USB调试模式，在电脑的Chrome浏览器中输入chrome://inspect，找到对应的应用并点击inspect，查看控制台的错误信息，这是定位白屏原因最直接的方法

5. 端口占用问题 #

• 检查8100端口是否被其他程序占用：
  • Mac/Linux：执行lsof -i :8100，找到进程后用kill -9 <PID>杀掉
  • Windows：执行netstat -ano | findstr :8100，找到PID后在任务管理器中结束对应进程
• 也可以指定其他端口运行：ionic cap run android -l --external --port 8101

内容的提问来源于stack exchange，提问作者Nguyen Anh