Vue.js在WKWebView中显示空白页面问题排查求助

Vue.js页面在WKWebView中显示空白，已添加webView(_:didFailProvisionalNavigation:withError:)和webView(_:decidePolicyFor:decisionHandler:)两个代理方法排查错误，但未捕获到任何错误信息。

相关代码 #

import UIKit
import WebKit

class ViewController: UIViewController, WKNavigationDelegate {
    
    @IBOutlet weak var container: UIView!
    @IBOutlet weak var textField: UITextField!
    @IBOutlet weak var logTextView: UITextView!
    
    var webView: WKWebView?
    var javascript: Javascript?
    
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view, typically from a nib.
        
        var webFrame = self.container!.frame
        webFrame.origin.x = 0
        webFrame.origin.y = 0
        
        // Create a configuration for the preferences
        
        
        let config = WKWebViewConfiguration()
        config.defaultWebpagePreferences.allowsContentJavaScript = true
       
        self.webView = WKWebView(frame: webFrame, configuration: config)
        self.webView?.configuration.preferences.setValue(true, forKey: "allowFileAccessFromFileURLs")

        self.container!.addSubview(webView!)
        
        let testUrl: URL! = Bundle.main.url(forResource: "index", withExtension: "html", subdirectory: "dist")
       
        self.webView!.loadFileURL(testUrl, allowingReadAccessTo: testUrl)
        self.javascript = Javascript(webView: self.webView!)
        self.webView?.navigationDelegate = self
    }
    func webView(_ webView: WKWebView, didFailProvisionalNavigation navigation: WKNavigation!, withError error: Error) {
        print(error.localizedDescription)
    }
    
    func webView(_ webView: WKWebView, decidePolicyFor navigationResponse: WKNavigationResponse,
                 decisionHandler: @escaping (WKNavigationResponsePolicy) -> Void) {
        
        if let response = navigationResponse.response as? HTTPURLResponse {
            print(response.statusCode)
            if response.statusCode == 401 {
                // ...
            }
        }
        decisionHandler(.allow)
    }
}

排查建议 #

• 修正Vue打包的publicPath配置
  Vue CLI默认打包的publicPath为/，本地文件协议(file://)加载时会导致资源路径错误，需改为相对路径：
  在项目根目录的vue.config.js中添加或修改：

module.exports = {
  publicPath: './'
}

重新打包后替换Xcode项目中的dist文件夹。

• 调整文件访问权限路径
  loadFileURL的allowingReadAccessTo参数应传入dist目录的URL，而非单个index.html的URL，确保WebView有权限访问目录下的所有资源：

guard let distUrl = Bundle.main.url(forResource: "dist", withExtension: nil),
      let testUrl = distUrl.appendingPathComponent("index.html") else {
    print("无法找到dist目录或index.html")
    return
}
self.webView!.loadFileURL(testUrl, allowingReadAccessTo: distUrl)

• 补充代理方法捕获更多细节
  当前代理未覆盖所有加载场景，添加以下方法获取更全面的加载状态：

// 页面加载完成回调，验证是否渲染成功
func webView(_ webView: WKWebView, didFinish navigation: WKNavigation!) {
    print("页面加载完成")
    // 执行JS获取页面内容，确认是否有渲染结果
    webView.evaluateJavaScript("document.body.innerHTML") { result, error in
        if let htmlContent = result as? String {
            print("页面渲染内容：\(htmlContent)")
        } else if let err = error {
            print("获取页面内容失败：\(err.localizedDescription)")
        }
    }
}

// 捕获页面加载过程中的错误
func webView(_ webView: WKWebView, didFail navigation: WKNavigation!, withError error: Error) {
    print("页面加载错误：\(error.localizedDescription)")
}

// 打印所有请求URL，排查资源加载路径
func webView(_ webView: WKWebView, decidePolicyFor navigationAction: WKNavigationAction, decisionHandler: @escaping (WKNavigationActionPolicy) -> Void) {
    if let requestUrl = navigationAction.request.url {
        print("请求资源：\(requestUrl.absoluteString)")
    }
    decisionHandler(.allow)
}

• 确认WKWebView配置有效性
  确保JavaScript权限和文件访问权限配置正确，建议在创建配置时直接设置：

let preferences = WKPreferences()
preferences.setValue(true, forKey: "allowFileAccessFromFileURLs")

let config = WKWebViewConfiguration()
config.defaultWebpagePreferences.allowsContentJavaScript = true
config.preferences = preferences

self.webView = WKWebView(frame: webFrame, configuration: config)

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