介绍
Base44 是一款使用 AI 的应用程序生成器，能够从提示生成完整的 React 应用程序。您可以快速在浏览器中部署一个工作的产品，但如果您想将其部署到 iOS 和 Android 上呢？本教程将展示如何将您的 Base44 项目导出并将其转换为原生移动应用 Capacitor,然后使用 __CAPGO_KEEP_0__ Builder 部署签名的商店二进制文件 Capgo Builder 本教程的最后一步，您的 Base44 应用程序将在 iOS 和 Android 上以原生方式运行，并具有访问设备功能，如摄像头、存储和推送通知的权限
Martin Donadieu
前置条件 & 预计时间
所需时间: 首次设置需要 2-4 小时
系统要求:
- 对于 iOS 云构建: 支持任何操作系统 (Windows, Mac 或 Linux) 的 Capgo 构建器
- 对于 Android 云构建: 支持任何操作系统
- 存储: 依赖项和构建产物所需的 10GB 免费空间
- 内存: 最少 8GB 内存
成本:
- Base44导出: 构建器计划或更高（用于GitHub导出和ZIP下载）
- iOS App Store: $99/年（Apple开发者账户）
- Android Play Store: $25一次性（Google Play开发者）
- Cursor Pro: $20/月（可选但推荐）
必需软件:
- Node.js 18+
- 一个code编辑器，如 光标
为什么将您的Base44应用转换为移动应用?
- 扩大覆盖范围: 在用户期望的原生应用图标处遇到用户，而不是浏览器标签
- 原生功能: 通过Capacitor插件获取摄像头、GPS、生物识别和离线存储
- 应用商店发布: 在Google Play和Apple App Store上发布
- 更快的迭代: 将Capgo Live Updates与Capgo Builder配对，用于web层修复而无需每次重建原生二进制文件
步骤1：导出您的Base44项目
Base44允许您在您进入code后导出 Builder plan 或更高. 您有两个主要选项。
选项 A: 导出到 GitHub (推荐)
- 在 Base44 编辑器中打开您的应用
- 点击顶部栏中的 GitHub 授权
- Base44 Builder 并创建或连接一个仓库 Base44 将自动同步您的应用 __CAPGO_KEEP_0__ 到 __CAPGO_KEEP_1__ (在支持计划下支持双向同步)
- Base44 syncs your app code to GitHub automatically (two-way sync on supported plans)
See Base44 GitHub 集成文档 了解更多细节。
选项 B：下载 ZIP
- 点击 Code 在顶部工具栏中点击打开文件浏览器
- 点击 将项目导出为 ZIP 在 code 视图的右上角点击
- 在计算机上解压压缩包
在 Cursor 中打开项目
- 访问 cursor.sh 并安装Cursor
- 克隆您的GitHub仓库（
Git: Clone从命令面板）或打开提取的ZIP文件夹 File > 打开文件夹
为了获得最佳的AI辅助工作流程，请在Cursor设置中启用您的偏好模型并允许命令执行 —— 与我们的 Lovable to mobile 指南中描述的相同设置.
步骤 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
Ask 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: 将Capacitor添加到您的Base44项目中
使用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 更新以便在发布后进行 OTA 更新。请参阅 Capgo Live Updates 文档.
步骤 6: 构建和同步
每次您更改 web 应用时:
npm run build
npx cap sync
步骤 7: 使用 Capgo Builder 构建商店准备好的二进制文件（推荐）
模拟器测试是可选的。对于 TestFlight、内部测试和商店提交，请使用 Capgo Builder 在云端编译和签名原生二进制文件
Why Capgo Builder 为 Base44 应用程序的原因?
- 不需要 Mac 来编译 iOS — 从 Windows 或 Linux 构建
- CLI 与您的 AI agent 一样 — 适合 Base44 → GitHub → Cursor 的 vibe-coding 工作流
- 与实时更新配对 — 修复 UI 和复制到空中；仅在插件或权限更改时重建本机
设置 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。
上传您的 OTA 更新的 Web 包：
npx @capgo/cli@latest bundle upload --channel production步骤 8：可选 — 在 Xcode 或 Android Studio 中测试本地
如果您有 Mac 或想要在云构建之前使用模拟器进行测试：
npx cap open ios # Xcode + iOS Simulator
npx cap open android # Android Studio + emulator
使用本地 IDE 进行日常调试。使用 Capgo Builder 当您需要签名的发布二进制文件时：
步骤 9：添加本机功能
增强您的 Base44 应用程序：
npm install @capacitor/share @capacitor/camera @capacitor/push-notifications
npx cap sync向 React 组件中添加 Share、Camera 或 Push 等设备功能。添加插件后，请运行一个新 Capgo Builder __CAPGO_KEEP_0__
将 Base44 应用中的本机功能添加到 Base44 __CAPGO_KEEP_0__ 应用中
第 10 步：优化生产环境
npm install -D @capacitor/assets
# Add assets/icon.png (1024x1024) and assets/splash.png (2732x2732)
npx capacitor-assets generate
npx cap sync应用图标和启动屏幕
Exported Base44 apps may call Base44’s hosted backend and SDK. That usually works in Capacitor as long as:
- 导出的 Base44 应用可能会调用 Base44 的托管后端和 API。通常在 __CAPGO_KEEP_1__ 中会正常工作，只要:
- __CAPGO_KEEP_0__ 调用使用 HTTPS
- 在 WebView 内的 Auth 重定向正常工作（在真实设备上测试登录）
如果您使用 magic-link 或 OAuth 流程，则配置了深度链接 base44.entities.* and related SDK calls with your own API — the React UI layer typically carries over.
常见问题排查
应用启动时出现白屏
- 确认
base: './'__CAPGO_KEEP_0__ Builder配置中设置 - 运行
npm run build并检查dist/index.html使用相对路径加载资源 - 运行
npx cap sync每次网页构建后
Capgo Builder构建错误
- 提交
ios/并android/在请求云构建之前，请将项目推送到 GitHub - Run
npx cap sync本地运行以将 Web 资产复制到本机项目 - 新版 Capacitor 插件需要进行一次新的本机构建
Base44 中的 Export 不可用
GitHub 的导出和 ZIP 下载需要 Builder 计划或更高. 在 Base44 中升级或从 Code 视图中手动复制文件（在较低的等级中）
结论
您已导出一个由 Base44 AI 生成的 React 应用程序，使用 Capacitor 包裹，并且有一个明确的路径来通过 Capacitor Builder 获得签名的 iOS 和 Android 二进制文件——无需维护本地 Xcode 农场。 Capgo Builder —
下一步
- Capgo 实时更新: 在商店审核通过之前不用等待就可以发布 UI 和副本修复
- Capgo 构建器: 在 CI 中自动化发布构建
- 推送通知: 添加
@capacitor/push-notifications并使用 Capgo 构建器重新构建 - 相关指南: 将应用程序推送到移动设备 · 将 Bolt.new 推送到移动设备
注册一个免费的 Capgo 帐户 启用实时更新和云原生构建。
资源
从 Base44 到原生移动应用继续前进，使用 Capacitor
如果您正在使用 Base44 to Native Mobile Apps with Capacitor 规划原生插件工作，连接它到 Capgo 插件目录 产品工作流程在Capgo插件目录中 Capacitor由Capgo提供 for the implementation detail in Capacitor Plugins by Capgo, Capgo原生构建 产品工作流程在Capgo原生构建中 在Windows上从Mac构建iOS 在没有Mac的情况下进行云iOS构建
