Ionic Capacitor资源URL无法打开：真机运行白屏且出现404错误

我之前也碰到过一模一样的情况，真机上启动页过后就白屏，Chrome调试全是ES2015相关文件的404错误，给你几个亲测有效的排查和解决方向：

1. 先确认Angular构建是否生成了完整资源 #

首先排查构建环节有没有漏掉文件：

• 打开项目根目录的tsconfig.json，检查compilerOptions里的target字段，如果是es2015，可以先改成es5（适配更多旧型号设备）；
• 执行完整的生产构建命令，确保资源正确输出：

ionic build --prod

构建完成后去www目录下看看，有没有runtime-es2015.js、polyfills-es2015.js这些文件。如果没有，就清理缓存重新构建：

ionic build --prod --clean

2. 同步Web资源到Android项目 #

如果www目录文件齐全，但Android项目里找不到，大概率是资源没同步过去：

• 如果你用的是Capacitor，直接执行同步命令，它会自动把www里的内容复制到Android项目的app/src/main/assets/www目录：

ionic cap sync android

• 要是手动操作的话，也可以直接把www文件夹的所有内容复制到Android项目的app/src/main/assets/www里，覆盖原有文件。

3. 检查Android WebView的资源访问配置 #

有时候WebView的权限设置会阻止本地资源加载：

• 打开Android项目的AndroidManifest.xml，确保有这两个权限：

<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />

• 另外在WebView的配置代码里，要允许访问本地文件：

webView.getSettings().setAllowFileAccess(true);
webView.getSettings().setAllowContentAccess(true);

4. 排查Base Href路径配置 #

打开项目根目录的index.html，检查<base href="/">这个配置。如果是本地打包，这个路径是对的，但如果你的项目有自定义部署路径，需要改成相对路径（比如<base href="./">），避免资源请求路径错误。

5. 更新依赖版本解决兼容性问题 #

旧版本的Ionic或Capacitor可能存在打包资源的bug，尝试更新到稳定版：

npm install @ionic/angular@latest @capacitor/core@latest @capacitor/android@latest

更新完成后重新执行构建和同步命令。

按这些步骤走下来，基本能解决资源404导致的白屏问题。

内容的提问来源于stack exchange，提问作者Dominik Stier