在WKWebView中运行本地React构建产物失败，求解决方法

1. 修复WKWebView加载逻辑错误 #

你当前代码存在两处加载逻辑问题：重复调用加载方法、资源访问权限范围配置错误，修改viewDidLoad中的加载代码如下：

import UIKit
import WebKit

class ViewController: UIViewController, WKUIDelegate, WKNavigationDelegate {

    @IBOutlet weak var webView: WKWebView!

    override func viewDidLoad() {
       super.viewDidLoad()
    
       webView.uiDelegate = self
       webView.navigationDelegate = self
       webView.scrollView.isScrollEnabled = true
    
       // 先获取Web资源根目录地址
       guard let webRootUrl = Bundle.main.url(forResource: "WebPocket", withExtension: nil) else {
           fatalError("WebPocket目录未正确导入项目")
       }
       let indexUrl = webRootUrl.appendingPathComponent("index.html")
       // 给WebView开放整个Web资源根目录的读取权限，才能正常加载同目录下的js、css等静态资源
       webView.loadFileURL(indexUrl, allowingReadAccessTo: webRootUrl)
   }

   // 新增错误回调，可打印加载失败的具体原因
   func webView(_ webView: WKWebView, didFailProvisionalNavigation navigation: WKNavigation!, withError error: Error) {
       print("页面加载失败：\(error)")
   }

   override var prefersStatusBarHidden: Bool {
       return true
   }
}

2. 调整React项目打包配置 #

• 打开React项目根目录下的package.json，添加配置"homepage": "./"，确保打包后的静态资源引用路径都是相对路径，避免绝对路径找不到资源的问题。
• 如果你的项目使用了React Router，必须将BrowserRouter替换为HashRouter，本地file协议不支持BrowserRouter依赖的服务端路由重定向规则。

3. 确认Xcode资源导入规则 #

你将React打包后的build目录重命名为WebPocket导入Xcode时，必须选择「Create folder references」选项，导入后文件夹在Xcode中显示为蓝色。如果选择了默认的「Create groups」，Xcode会将所有文件扁平化处理，直接放到Bundle根目录，破坏React打包产物的目录结构，导致静态资源加载失败。

你之前可以正常加载单个静态HTML文件，是因为单个HTML没有依赖其他子目录的静态资源，所以不受上述配置的影响。

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