简介
Base44 is an AI-powered app builder that generates full React applications from prompts. You can ship a working product in the browser fast — but what if you want it on iOS and Android? In this tutorial, we show how to export your Base44 project and turn it into native mobile apps with Capacitor, then ship signed store binaries with Capgo 构建器 — iOS 开发无需 Mac。
简而言之： 这篇 Base44 转 iOS 和 Android 指南 在一个页面内总结了完整流程：导出、Capacitor、无需 Mac 的云端构建以及 Live Update。
阅读完本指南后，您的 Base44 应用即可在 iOS 和 Android 上原生运行，并能调用摄像头、存储和推送通知等设备功能。
前提条件与预估耗时
预计耗时: 初次配置需 2-4 小时
系统要求:
- 用于 iOS 云端构建: 运行 Capgo Builder 的任意操作系统 (Windows, Mac 或 Linux)
- 用于 Android 云端构建: 任意操作系统
- 存储空间: 10GB 用于依赖项和构建产物的免费空间
- 内存 (RAM): 最低 8GB
费用:
- Base44 导出: Builder 方案或更高版本 (用于 GitHub 导出和 ZIP 下载)
- iOS App Store: $99/年 (Apple Developer Account)
- Android Play Store: $25 一次性费用 (Google Play Developer)
- Cursor Pro: $20/月 (可选但推荐)
必备软件:
- Node.js 18+
- 一款 code 编辑器，例如 Cursor
为什么要把 Base44 应用转成移动端？
- 扩大覆盖范围: 让用户在期待原生 App 图标的地方见到你，而不是浏览器标签页
- 原生功能：通过 Capacitor 插件调用摄像头、GPS、生物识别和离线存储
- App Store 分发：发布至 Google Play 和 Apple App Store
- 更快的迭代速度：结合使用 Capgo Live Updates 与 Capgo Builder，无需每次都重新构建 Native Build 即可修复 Web 层问题
第 1 步：导出您的 Base44 项目
一旦进入 code，Base44 即可让你进行导出 Builder 计划或更高版本你有两个主要选择。
方案 A：导出至 GitHub（推荐）
- 在 Base44 编辑器中打开您的应用
- 点击 GitHub 顶部栏图标
- 授权 Base44 构建器 并创建或连接仓库
- Base44 会自动将您的应用 code 同步至 GitHub（支持的方案可实现双向同步）
查看 Base44 GitHub 集成文档 了解详情。
选项 B：下载为 ZIP
- 点击 Code 在顶部栏中打开文件浏览器
- 点击 将项目导出为 ZIP 在 code 视图的右上角
- 在电脑上解压该压缩包
在 Cursor 中打开项目
- 访问 cursor.sh 并安装 Cursor
- 克隆你的 GitHub 仓库（
Git: Clone通过命令面板），或用以下方式打开解压后的 ZIP 文件夹 文件 > 打开文件夹
若要获得最佳 AI 辅助工作流体验，请在 Cursor 设置中启用您偏好的模型并允许执行命令 —— 配置方法详见我们的 Lovable 转移动端指南.
步骤 2：搭建开发环境
Base44 导出的是标准的 React 项目。安装依赖并确认开发服务器运行正常。
使用 Cursor AI（推荐）
按下 Command+K (Mac) 或 Ctrl+K (Windows) 并询问：
Install Node.js if needed, install project dependencies, and start the dev server手动设置
cd your-base44-project
npm install
npm run dev
您的 Base44 应用应加载至 http://localhost:5173 (Vite) 或终端中显示的端口。
步骤 3：准备生产环境构建
Capacitor 需要静态 Web 资源。Base44 React 应用通常使用 Vite 并输出到 dist/.
为移动端配置 Vite
询问 Cursor：
Configure vite.config for Capacitor mobile deployment with base './' and production build to dist或手动更新 vite.config.ts ：
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
export default defineConfig({
plugins: [react()],
base: './',
build: {
outDir: 'dist',
},
})测试生产环境构建
npm run build验证 dist/ 文件夹是否存在，并包含 index.html 及打包后的资源。
步骤 4：在 Base44 项目中添加 Capacitor
使用 Cursor AI（推荐）
Install Capacitor CLI, initialize it for my Base44 app with webDir dist, and add iOS and Android platforms手动安装
npm install -D @capacitor/cli
npm install @capacitor/core @capacitor/ios @capacitor/android
npx cap init "Your Base44 App" com.yourcompany.yourapp --web-dir dist
npx cap add ios
npx cap add android
将 ios/ 和 android/ 文件夹提交至 git。Capgo Builder 会编译这些目录中的内容。
步骤 5：配置 Capacitor
更新 capacitor.config.ts:
import type { CapacitorConfig } from '@capacitor/cli'
const config: CapacitorConfig = {
appId: 'com.yourcompany.yourapp',
appName: 'Your Base44 App',
webDir: 'dist',
server: {
androidScheme: 'https',
},
}
export default config考虑尽早添加 @capgo/capacitor-updater 以便在发布后推送 OTA 更新。详见 Capgo Live Updates 文档.
第 6 步：Build 与 Sync
每次修改 Web App 时：
npm run build
npx cap sync
第 7 步：使用 Capgo Builder 构建上架二进制文件（推荐）
Simulator 测试是可选的。对于 TestFlight、内部测试及提交商店，请使用 Capgo 构建器 在云端编译并签名 Native Build。
为什么 Base44 应用推荐使用 Capgo Builder？
- iOS 构建无需 Mac — 支持从 Windows 或 Linux 构建
- 与你的 AI Agent 运行相同的 CLI — 完美契合从 Base44 → GitHub → Cursor 的 vibe-coding 工作流
- 与 Live Updates 搭配 — 通过 OTA 修复 UI 和文案；仅在插件或权限变更时才需重新进行 Native Build
配置 Capgo Builder
npx @capgo/cli@latest login
npx @capgo/cli@latest init
npx @capgo/cli@latest build init --platform ios
npx @capgo/cli@latest build init --platform android签名凭据只需保存一次。查看 凭据管理 和 在 Windows 上构建 iOS.
发起云端构建
npm run build
npx cap sync
npx @capgo/cli@latest build com.yourcompany.yourapp --platform ios --build-mode release
npx @capgo/cli@latest build com.yourcompany.yourapp --platform android --build-mode release构建日志会实时输出到终端。配置好 App Store Connect 后，iOS 构建可自动上传到 TestFlight。
上传 Web bundle 以进行 OTA 更新：
npx @capgo/cli@latest bundle upload --channel production第 8 步：可选 — 在 Xcode 或 Android Studio 中本地测试
如果你有 Mac，或者想在云端 build 前进行模拟器测试：
npx cap open ios # Xcode + iOS Simulator
npx cap open android # Android Studio + emulator
日常调试请使用本地 IDE。在需要 Capgo 构建器 签名发布二进制文件时，请使用
步骤 9：添加 Native 功能
利用设备能力增强你的 Base44 应用：
npm install @capacitor/share @capacitor/camera @capacitor/push-notifications
npx cap sync让 Cursor 将 Share、Camera 或 Push 集成到你的 React 组件中。添加插件后，在提交到商店前运行新的 Capgo 构建器 build。
步骤 10：生产环境优化
App 图标与启动页
npm install -D @capacitor/assets
# Add assets/icon.png (1024x1024) and assets/splash.png (2732x2732)
npx capacitor-assets generate
npx cap syncBase44 后端注意事项
导出的 Base44 应用可能会调用 Base44 托管的后端和 SDK。只要满足以下条件，这在 Capacitor 中通常可以正常工作：
- API 调用使用 HTTPS
- 身份验证重定向在 WebView 内正常工作（请在真机上测试登录）
- 如果使用 magic-link 或 OAuth 流程，需配置 Deep links
如果后续迁移出 Base44 后端，请计划替换 base44.entities.* 并将相关的 SDK 调用更换为你自己的 API —— React UI 层通常可以无缝迁移。
常见问题排查
启动时出现白屏
- 确认
base: './'已在 Vite 配置中设置 - 运行
npm run build并确认dist/index.html使用相对路径加载资源 - 运行
npx cap sync在每次 Web 构建之后
Capgo Builder 中的构建错误
- 提交
ios/和android/在请求云端构建前提交至 Git - 运行
npx cap sync在本地运行，以便将 Web 资源复制到原生项目中 - 新的 Capacitor 插件需要重新进行 Native Build
Base44 不支持导出
GitHub 导出和 ZIP 下载需要 Builder 计划或更高版本。请在 Base44 中升级，或在低级方案中从 Code 视图手动复制文件。
总结
你导出了一个 Base44 AI 生成的 React 应用，使用 Capacitor 进行封装，并通过 Capgo 构建器 —— 无需维护本地 Xcode 设备集群，即可获得清晰的 iOS 和 Android 已签名二进制文件构建路径。
下一步
- Capgo Live Updates：无需等待应用商店审核，即可快速发布 UI 和文案修复
- Capgo 构建器: 在 CI 中自动化发布构建
- 推送通知: 添加
@capacitor/push-notifications并使用 Capgo Builder 重新构建 - 相关指南: 将 Lovable 转换为移动应用 · 将 Bolt.new 转换为移动应用
注册免费的 Capgo 账号 以启用 Live Updates 和云原生构建。
资源
使用 Capacitor 将 Base44 进阶为 Native Mobile Apps
如果你正在使用 用 Capacitor 将 Base44 变成原生移动应用 要规划原生插件工作，请将其连接到 Capgo 插件目录 用于 Capgo 插件目录中的产品工作流， 由 Capgo 提供的 Capacitor 插件 有关 Capgo 编写的 Capacitor 插件实现细节， Capgo Native Build 用于 Capgo Native Builds 的产品工作流，以及 在 Windows 上构建 iOS 用于无需 Mac 的云端 iOS 构建。
