使用Capacitor打包Svelte前端iOS应用显示空白页求助

1. 核对Capacitor基础配置 #

• 确认capacitor.config.ts中server.webDir指向Svelte的编译输出目录（默认是build），避免路径错误导致资源加载失败：

  export default defineConfig({
    server: {
      webDir: 'build',
      // 调试阶段可开启cleartext，上线后需关闭
      cleartext: true
    }
  });
  

• 检查iOS项目的Info.plist，确保NSAppTransportSecurity下的NSAllowsArbitraryLoads设为YES（调试用，正式发布建议配置具体可信域名）。

2. 调整Svelte渲染时机 #

• Capacitor WebView依赖deviceready事件完成初始化，修改main.js等待该事件后再渲染Svelte应用：

  import App from './App.svelte';
  
  document.addEventListener('deviceready', () => {
    new App({
      target: document.getElementById('app') || document.body
    });
  }, false);
  

• 确保index.html中存在渲染目标元素，且样式设置为全屏可见：

  <style>
    html, body, #app {
      width: 100%;
      height: 100%;
      margin: 0;
      padding: 0;
      overflow: hidden;
    }
  </style>
  <div id="app"></div>
  

3. 排查JS运行错误 #

• 在Xcode控制台过滤JSConsole，查看是否有未捕获的JS错误。若生产编译屏蔽了错误，改用开发模式打包测试：

  npm run build:dev # 对应Svelte项目的开发编译脚本，比如vite build --mode development
  npx cap sync ios
  

• 在app.js中添加关键节点的日志，确认渲染流程是否正常：

  console.log('Render target:', document.getElementById('app'));
  const appInstance = new App({ target: ... });
  console.log('App instance initialized:', appInstance);
  

4. 检查CSS兼容性问题 #

• iOS WebView对部分CSS属性支持有限，比如position: fixed在某些场景下失效，或overflow: hidden导致内容被隐藏，可临时移除这类属性排查。
• 确认全局样式中没有设置body/html的display: none、opacity: 0等隐藏内容的属性。

5. 清理缓存重新构建 #

• 执行以下命令清理旧资源并同步：

  npx cap clean ios
  npm run build
  npx cap sync ios
  

• 在Xcode中执行Product -> Clean Build Folder，再重新编译运行项目。

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