Ionic应用调试模式可运行，独立安装包启动白屏问题排查

嘿，我碰到过好几个类似的场景，你的问题其实很典型——ionic serve和带--livereload的ionic run android都正常，说明代码逻辑和插件在开发模式下没问题，但打包成原生包就白屏，核心原因基本都出在生产环境的配置、插件适配或者资源加载路径上，给你整理几个靠谱的排查方案：

1. 先排查新增的webpack.config.js配置 #

你刚加了多环境webpack配置，这大概率是嫌疑对象，重点检查这几点：

• 确认生产环境的publicPath是不是设成了./（相对路径），如果写成绝对路径/，打包后APP加载静态资源会直接找不到，肯定白屏
• 看看是不是开启了过度的代码混淆/压缩，比如TerserPlugin把插件的核心代码给混淆坏了，可以暂时关掉混淆，重新打包测试，要是能正常运行就说明是混淆规则的问题
• 核对webpack的输出目录，确保生产环境打包后的文件都输出到www文件夹，这是Cordova默认读取的资源目录

2. 验证新增插件的生产兼容性 #

音频输出和REST访问插件也可能在打包时掉链子：

• 先试试临时移除这两个插件，执行ionic cordova plugin remove [插件ID]，然后重新ionic cordova build android，如果能正常启动，说明是其中某个插件的问题，再逐个加回来定位具体是哪个
• 检查插件是否支持android-26 SDK，有些旧插件对高版本SDK的权限或API适配不好，比如音频插件可能需要RECORD_AUDIO、MODIFY_AUDIO_SETTINGS权限，REST插件需要INTERNET权限，确认这些权限有没有在AndroidManifest.xml里正确配置
• 试试把插件升级到最新稳定版，或者降级到明确支持android-26的版本，比如有些REST插件的旧版本在高SDK下会出现网络请求失败的情况，导致页面无法初始化

3. 查看WebView日志找具体报错 #

白屏本质是JS代码运行报错了，光猜没用，得看日志：

• 连接设备后执行adb logcat | grep -i chromium，这个命令会过滤出WebView的报错信息，里面会明确告诉你是哪个模块找不到、哪个函数未定义，直接定位问题根源
• 也可以用adb logcat CordovaLog:D *:S查看Cordova相关的日志，看看插件初始化阶段有没有抛出异常

4. 做一次彻底的清理重建 #

你已经清过Cordova缓存，但可能还有残留，试试更彻底的操作：

• 执行ionic cordova clean android清空Cordova的构建文件
• 删除项目根目录的node_modules和package-lock.json，重新npm install
• 直接删掉platforms/android文件夹，再执行ionic cordova platform add android@8.1.0（因为android-26对应的Cordova Android版本是8.x，确保平台版本完全匹配）

5. 检查android-26的适配细节 #

android-26有一些行为变更，可能影响APP启动：

• 确认config.xml里的<preference name="android-targetSdkVersion" value="26"/>是不是正确设置了
• 如果你的REST接口用的是HTTP明文协议，android-26及以上默认禁止明文流量，得在AndroidManifest.xml的<application>标签里加android:usesCleartextTraffic="true"
• 试试安装cordova-plugin-crosswalk-webview，用内置的WebView替代系统WebView，有些设备的系统WebView版本过低，会导致现代JS语法无法运行

按照上面的步骤一步步排查，应该很快就能找到问题所在啦。

内容的提问来源于stack exchange，提问作者Mia Julia