使用WKWebView加载Ionic Vue项目出现空白屏问题求助

问题背景 #

使用Ionic + Vue开发的页面，通过原生WKWebView加载本地编译后的文件时，页面始终空白。调试可见WKWebView已渲染出<div id="app"></div>，但Ionic相关脚本未执行，且WKWebView的didFail/didFailProvisionalNavigation错误回调无任何输出。其他编译后的纯Vue项目可正常加载，疑似Ionic项目编译或WKWebView加载逻辑存在问题。

已完成的排查：

• 加载其他正常编译的Vue项目，WKWebView显示正常
• 加载Vue初始化项目，仍显示空白
• 截图显示疑似JS文件未加载成功

一、排查Ionic+Vue项目的编译配置 #

由于纯Vue项目可正常加载，优先检查Ionic项目的编译输出配置：

1. 修正基础路径配置
   若使用Vite（Ionic Vue默认构建工具），需确保vite.config.ts中base设为相对路径：

   // vite.config.ts
   import { defineConfig } from 'vite'
   import vue from '@vitejs/plugin-vue'
   import ionic from '@ionic/vite-plugin'
   
   export default defineConfig({
     base: './', // 关键：使用相对路径，避免绝对路径导致本地加载失败
     plugins: [ionic(), vue()]
   })
   

   若使用Vue CLI，修改vue.config.js的publicPath：

   // vue.config.js
   module.exports = {
     publicPath: './'
   }
   

   该配置错误会导致编译后的HTML中JS/CSS资源使用绝对路径，WKWebView加载本地文件时无法定位资源。

2. 验证编译后的资源路径
   查看编译输出目录（通常为dist或www）：

   • 确认index.html中引用的JS、CSS文件路径为相对路径（如./assets/js/app.xxx.js），而非绝对路径（/assets/js/app.xxx.js）
   • 确认所有资源文件完整存在，无缺失

二、修正WKWebView的本地加载逻辑 #

针对你提供的Swift代码，优化以下点：

1. 扩大文件访问权限范围
   当前allowingReadAccessTo仅设为index.html所在的vue目录，若Ionic资源存于子目录，可能导致权限不足。可改为允许访问整个Bundle资源目录：

   func navigateTo(url urlString: String) {
     guard let filePath = Bundle.main.path(forResource: "index", ofType: "html", inDirectory: "vue") else {
       print("🧑‍💻 Unable to load local html file")
       return
     }
   
     print("🧑‍💻 Ionic bundle path: \(filePath)")
   
     let baseURL = URL(fileURLWithPath: filePath)
     // 改为访问整个Bundle资源目录
     let resourceDir = Bundle.main.resourceURL!
     self.mWebKitView.stopLoading()
     self.mWebKitView.loadFileURL(baseURL, allowingReadAccessTo: resourceDir)
   }
   

2. 确认资源打包配置

   • 在Xcode中检查编译后的Ionic资源（整个vue目录）是否已添加到Copy Bundle Resources
   • 确保资源目录的Target Membership已勾选当前目标项目

3. 监听JS控制台日志
   现有错误回调未捕获到JS层面的问题，添加控制台日志监听以获取详细报错：

   // 初始化WKWebView时配置
   override func viewDidLoad() {
     super.viewDidLoad()
     let config = WKWebViewConfiguration()
     let userContentController = WKUserContentController()
     // 添加控制台消息监听
     userContentController.add(self, name: "jsConsole")
     config.userContentController = userContentController
     // 注入脚本捕获console.log/error
     let consoleScript = WKUserScript(source: """
       console.log = function(msg) {
         window.webkit.messageHandlers.jsConsole.postMessage('LOG: ' + msg);
       };
       console.error = function(msg) {
         window.webkit.messageHandlers.jsConsole.postMessage('ERROR: ' + msg);
       };
     """, injectionTime: .atDocumentStart, forMainFrameOnly: true)
     config.userContentController.addUserScript(consoleScript)
     // 初始化WKWebView
     self.mWebKitView = WKWebView(frame: view.bounds, configuration: config)
     view.addSubview(self.mWebKitView)
   }
   
   // 实现WKScriptMessageHandler协议
   extension YourViewController: WKScriptMessageHandler {
     func userContentController(_ userContentController: WKUserContentController, didReceive message: WKScriptMessage) {
       if message.name == "jsConsole" {
         print("JS Console Output: \(message.body)")
       }
     }
   }
   

   此方法可捕获JS加载失败、语法错误等细节，定位核心问题。

三、其他排查方向 #

• 验证Ionic初始化逻辑
  检查main.ts中Ionic与Vue的初始化代码是否正确，可添加日志确认执行流程：

  // main.ts
  import { createApp } from 'vue'
  import { createIonicApp } from '@ionic/vue'
  import App from './App.vue'
  
  console.log('Starting Ionic app initialization')
  const app = createIonicApp({
    // 配置项
  })
  app.mount('#app')
  console.log('App mounted successfully')
  

  通过上述JS控制台监听查看日志是否输出。

• 本地Safari测试
  将编译后的index.html及资源文件放到本地，用Safari打开测试。若Safari也显示空白，说明是前端项目问题；若正常显示，则继续排查WKWebView的配置差异。

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