打包后的APP白屏怎么办？按这个顺序排查，八成能自己解决
打包流程走完、APK 也装上了，点开却是一片白——这是网页打包里出现频率最高的问题，也是最容易被误判为“工具不行”的问题。
实际情况是：白屏几乎总是页面本身在某个环境下加载失败了，打包工具只是把这 个失败暴露了出来。按下面的顺序排查，大部分情况十分钟内能定位。
第一步：先分清是哪一种白屏
| 现象 | 大概率方向 |
|---|---|
| 完全纯白，一直不动 | 入口文件没找到 / 页面 JS 报错 |
| 白屏后几秒恢复正常 | 加载慢，资源过大或首屏请求超时 |
| 白屏但顶部有标题栏 | 页面已加载，内容区渲染失败 |
| 黑屏 + 提示“无法加载插件” | Flash 相关内容（EXE 侧） |
| 白屏一闪后退出 | 崩溃，通常是内存或权限问题 |
不同现象对应完全不同的原因，先确认属于哪一类，能省掉一半时间。
第二步：用手机浏览器打开同一个页面
这是最有效的一步。
把项目放到局域网里（或用任意静态服务器），用手机浏览器访问同一个入口页面：
- 浏览器里也白屏 → 问题在页面本身，与打包无关，先修页面；
- 浏览器正常、装成 APP 白屏 → 问题在打包侧，继续往下看。
如果项目是纯本地文件，可以把整个目录传到手机，用支持本地文件的浏览器打开 index.html 验证——这一步能立刻区分“路 径问题”和“渲染问题”。
第三步：APK 侧五个高频原因
1. 文件名或目录名含中文
这是最经典的原因。打包工具在处理含中文的路径时，可能跳过部分文件，表现就是“页面在，但样式和脚本都没加载”。
处理：把项目内所有文件名、目录名改为英文或拼音，重新打包。打包前顺手全局搜一遍有没有中文路径。
2. 使用了绝对路径引用资源
<!-- 打包后大概率失效 -->
<script src="/js/app.js"></script>
<img src="/assets/logo.png" />
<!-- 推荐 -->
<script src="./js/app.js"></script>
<img src="./assets/logo.png" />
本地文件在 APK 内是以 file:// 或应用私有目录形式加载的，根路径 / 指向的位置和你的开发服务器不同。相对路径是唯一稳妥的写法。
3. 用了 ES Module，但加载协议不对
<script type="module" src="./main.js"></script>
ES Module 在 file:// 协议下会被浏览器以跨域（CORS）为由拒绝加载，控制台报 Access to script at 'file://...' from origin 'null' has been blocked。表现就是白屏。
处理：改成普通 <script>，或使用打包工具提供的新内核（内部以本地服务器方式加载），或改用构建工具打包成单文件 bundle。
4. 页面在启动时请求外部接口，但被拦截了
如果使 用的是免认证版本，工具会主动阻断所有外网请求。此时页面里的 CDN 资源、接口调用、字体、统计脚本全部失败，首屏依赖这些内容的页面就会白屏。
处理：把 CDN 资源改为本地引用；或改用全功能版本并完成实名认证。
5. 权限缺失导致初始化中断
相机、定位、存储、录音这些能力，如果页面一开始就调用而权限未开，部分框架会直接抛异常中断后续渲染。
处理：在「高级设置 → 权限管理」中按需勾选对应权限；页面侧也应对权限失败做兜底，不要让它阻塞首屏。
第四步：EXE 侧的高频原因
1. 项目过大导致解压超时
绿色版 EXE 启动时需要把资源解压到临时目录。项目超过 1GB 时，解压耗时可能超过内置浏览器的加载超时，表现为部分文件随机加载失败或直接白屏。
处理：
- 改用安装包形式输出；
- 在高级设置中勾选「提升稳定性」；
- 减少不必要的资源（尤其是未压缩的视频与图片）。
2. 内核与页面特性不匹配
页面用了较新的 CSS/JS 特性，而打包时选的 IE 内核不支持。
处理：切换到 Chrome 内核，或改用 WebView2 内核（要求系统有 WebView2 运行时）。
3. Flash 内容导致黑屏
老课件、老游戏依赖 Flash，会提示「无法加载插件」。
处理：改用支持 Flash 的长期支持版本，并在打包时勾选 Flash 支持选项。
4. Windows 7 缺少 WebView2 运行时
用 WebView2 内核打包的 EXE，在未安装运行时的 Win7 上会直接空白或弹错误。
处理：改用 Chrome 内核打包，或在安装包里附带运行时安装引导。
5. 加密或混淆后资源路径错乱
对本地资源做了加密处理后，如果页面里用绝对路径或运行时拼接路径，可能找不到解密后的文件。
处理：确保资源引用是相对路径；先用不加密方式打包验证，确认页面本身没问题后再开启加密。
第五步：把调试信息打开
猜测不如看日志。工具里有两个开关必须打开：
- 调试信息：运行时会展示调试面板与日志，能直接看到 JS 报错；
- 禁止截屏：调试阶段建议先关闭，否则无法截图给他人看错误信息。
对于 Android，还可以用 Chrome 的远程调试：手机开启 USB 调试后，在电脑 Chrome 地址栏输入 chrome://inspect，即可看到 APP 内的 WebView 并打开完整的 DevTools——控制台报错、网络请求失败、资源 404 一目了然。
先看控制台第一条红色报错。白屏几乎不会没有报错，只是错误被藏在了看不见的控制台里。
第六步：常见现象与处理对照表
| 现象 | 最可能原因 | 处理 |
|---|---|---|
| 纯白，控制台 404 | 资源路径错 / 文件没打进去 | 改相对路径、改英文文件名 |
| 白屏，报 CORS 或 module 错误 | ES Module 在 file:// 下加载 | 改普通 script 或换新内核 |
| 白屏，网络请求全红 | 外网被拦截 / 接口跨域 | 本地化资源、换全功能版 |
| 白屏但页面框架已出现 | 首屏数据请求失败 | 加兜底与超时处理 |
| 黑屏 + 插件提示 | Flash 依赖 | 用支持 Flash 的版本 |
| 部分文件随机加载失败 | 项目过大、解压超时 | 安装包形式 + 提升稳定性 |
| 加密后才白屏 | 加密影响路径解析 | 先关闭加密验证 |
还是解决不了怎么办
准备三样东西再找技术支持，能大幅缩短定位时间：
- 最小复现包：把项目精简到能复现白屏的最少文件；
- 截图或日志：控制台第一条报错、 打包时的完整输出；
- 环境信息：手机型号与系统版本、打包工具版本、使用的内核、是否开启加密/混淆。
QQ 交流群：577639123（咨询请直接加群主）；邮箱：leapever@foxmail.com。