无法从Bundle加载React Native生成的HTML，JS资源加载失败求助

核心原因 #

HTML中JS资源使用了绝对根路径（/bundles/xxx.js），但WKWebView加载本地file://协议文件时，根路径对应系统磁盘根目录，而非Bundle中HTML所在的目录，导致资源找不到。

具体解决思路 #

• 修正资源路径为相对路径
  把HTML里的<script src="/bundles/xxx.js">改为相对路径，比如src="bundles/xxx.js"或src="./bundles/xxx.js"。更高效的方式是在React Native打包web时，配置webpack的publicPath: './'，让打包产物自动生成相对路径，无需手动修改HTML。

• 扩大读取权限的路径范围
  当前代码仅允许WKWebView访问HTML文件本身，需改为允许访问HTML所在的整个目录：

  let fileUrl = Bundle.main.url(forResource: "index", withExtension: "html")!
  // 获取HTML所在的目录路径
  let folderUrl = fileUrl.deletingLastPathComponent()
  webView.loadFileURL(fileUrl, allowingReadAccessTo: folderUrl)
  

• 检查Bundle资源配置

  • 确保所有JS、CSS等资源已添加到Xcode项目，并勾选了对应Target；
  • 确认Build Phases的Copy Bundle Resources列表中包含这些资源；
  • 保证导入iOS项目的资源目录结构和RN web打包后的结构一致（比如bundles文件夹要和index.html处于同一层级）。

• 验证资源路径有效性
  通过代码打印并检查JS文件是否存在于Bundle中：

  let folderUrl = Bundle.main.url(forResource: "index", withExtension: "html")!.deletingLastPathComponent()
  let jsUrl = folderUrl.appendingPathComponent("bundles/web-4587a25eab359d254810d3f9017eb281.js")
  print("JS文件是否存在:", FileManager.default.fileExists(atPath: jsUrl.path))
  

  若打印false，说明资源未正确加入Bundle或路径有误。

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