如何调试XCode Simulator中显示空白屏的Cordova iOS应用

一、优先解决LaunchStoryboard资源加载报错 #

• 检查项目根目录config.xml里的launch-storyboard相关配置，确认指定的图片名称、路径与实际资源完全匹配（iOS文件系统区分大小写）
• 打开XCode项目的Assets.xcassets，查看LaunchStoryboard对应的资源是否存在、命名是否正确，有没有缺失或格式错误
• 执行cordova clean ios清理旧构建缓存，再重新运行cordova build ios，避免旧资源残留干扰

二、调试Vue内容未注入到#app的问题 #

1. Safari开发者工具深度排查 #

• 开启Safari的“开发”菜单（偏好设置→高级→勾选“在菜单栏中显示开发菜单”），在开发菜单中选择对应模拟器设备，打开应用调试页面
• 查看“控制台”面板的所有报错，重点关注Vue初始化阶段的JS异常、资源加载失败信息
• 在“元素”面板确认div#app存在后，手动复制项目main.js中Vue初始化代码（如new Vue({...}).$mount('#app')）到控制台执行，观察是否报错或渲染内容

2. 验证Cordova构建后的www目录完整性 #

• 找到platforms/ios/www目录，对比Vue项目dist目录的内容，确认所有静态资源（JS、CSS、HTML）是否完整复制
• 检查www/index.html中JS、CSS的引用路径是否正确，是否因依赖升级导致哈希文件名、资源目录结构变化

3. 确认Cordova deviceready事件触发状态 #

• 在www/index.html中添加监听代码，验证事件是否正常触发：

  document.addEventListener('deviceready', function() {
      console.log('deviceready 已触发');
      // 手动执行Vue初始化，测试是否能渲染内容
      new Vue({
          el: '#app',
          render: h => h(App)
      });
  }, false);
  

  若Vue初始化依赖deviceready事件，需确认该事件是否正常触发——依赖升级可能导致Cordova初始化逻辑变化

三、排查依赖升级的兼容性问题 #

• 对比升级前后的package.json，重点检查cordova-plugin-whitelist、vue、vue-cli-plugin-cordova等核心依赖的版本变化，排查是否存在版本不兼容
• 尝试回退部分依赖或babel.config.js配置到升级前状态，逐步定位是哪个依赖或配置引发的异常

四、XCode项目配置检查 #

• 在XCode中确认项目的“Build Settings”→“Deployment Target”与模拟器系统版本匹配，避免版本不兼容
• 查看Info.plist中的NSAppTransportSecurity配置，确保允许加载本地file://协议资源，防止资源被拦截

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