介绍
Base44 是一款使用AI生成全React应用的应用程序构建器，可以从提示生成完整的应用程序。您可以快速在浏览器中部署一个工作产品，但如果您想将其部署到iOS和Android设备上呢？本教程将展示如何使用__CAPGO_KEEP_0__将Base44项目导出并转换为原生移动应用。 Capacitor, 然后将已签名的商店二进制文件发送到 Capgo Builder — 不需要 Mac 即可在 iOS 上运行。
本指南结束时，您的 Base44 应用程序将在 iOS 和 Android 上以原生方式运行，并具有访问设备功能（如相机、存储和推送通知）的权限。
先决条件 & 预计时间
所需时间: 首次设置所需时间为 2-4 小时
系统要求:
- 对于 iOS 云构建: Any OS (Windows, Mac,或 Linux) 上的 Capgo Builder
- 对于 Android 云构建: Any OS
- 存储: 依赖项和构建工件的10GB免费空间
- 内存: 8GB最低
成本:
- Base44导出: Builder计划或更高（用于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 实时更新与 Capgo 构建器配对，仅在 web 层修复而不每次重建原生二进制文件
步骤 1：导出您的 Base44 项目
Base44 允许您在 Builder 计划或更高计划时导出 code 您有两种主要选项选项 A：导出到 __CAPGO_KEEP_0__ (推荐)
Option A: Export to GitHub (Recommended)
- 点击顶部栏中的 "__CAPGO_KEEP_0__"
- 授权 GitHub __CAPGO_KEEP_1__
- __CAPGO_KEEP_0__ Base44 Builder 并创建或连接一个仓库
- Base44 将您的应用程序 code 自动同步到 GitHub (支持计划的双向同步)
查看 Base44 GitHub 集成文档 详细信息。
选项 B: 下载 ZIP
- 点击 Code 顶部栏中打开文件浏览器
- 点击 导出项目为 ZIP 在 code 视图的右上角
- 在您的计算机上解压缩存档
在光标中打开项目
- 访问 cursor.sh 并安装光标
- 克隆您的 GitHub 仓库 (
Git: Clone从命令面板) 或打开解压缩的 ZIP 文件夹 File > 打开文件夹
为了获得最佳的 AI-assisted 工作流程，请启用您的偏好模型并允许在光标设置中执行命令 —— 与我们的 可爱到移动指南中描述的相同设置.
步骤 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 构建器会编译这些目录中的内容。
步骤 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：构建和同步
每次您更改 web 应用：
npm run build
npx cap sync
第 7 步：使用 Capgo Builder（推荐）构建商店准备的二进制文件
模拟器测试是可选的。对于 TestFlight、内部测试和商店提交，请使用 Capgo Builder 在云中编译和签名本机二进制文件。
为什么使用 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。
上传您的Web包进行OTA更新：
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要求 Cursor 将 Share、Camera 或 Push 注册到您的 React 组件中。添加插件后，请运行一个新的 Capgo 构建器 在商店提交之前构建。
步骤 10: 优化生产
应用程序图标和启动屏幕
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 内部，Auth 重定向工作（在真实设备上测试登录）
- 如果您使用 magic-link 或 OAuth 流程，则已配置深度链接
如果您后来迁移到 Base44 的后端，请计划替换 base44.entities.* 并与您的 API 相关的 SDK 调用 — React UI 层通常会保留
常见问题排查
启动时白屏
- 确认
base: './'在 Vite 配置中设置 - 运行
npm run build并检查dist/index.html以相对路径加载资产 - 运行
npx cap sync每次构建后
在Capgo Builder中出现的构建错误
- 提交
ios/并android/在请求云构建之前将代码推送到git - 本地运行
npx cap sync以便将Web资源复制到本机项目 - 新Capacitor插件需要进行一次新的本机构建
Base44中不支持导出
GitHub导出和ZIP下载需要Builder计划或更高 在Base44中升级或从__CAPGO_KEEP_0__视图中复制文件以在较低的等级中使用升级到Builder计划或更高才能在Base44中使用Code导出和ZIP下载
结论
您已导出一个 Base44 生成的 React 应用程序，包裹了 Capacitor，并且有一个明确的路径到通过 Capacitor Builder 签名的 iOS 和 Android 二进制文件——而不需要维护一个本地 Xcode 农场。 Capgo Builder — 无需维护本地 Xcode 农场。
下一步
- Capgo Live Updates: 在等待商店审核之前，通过 __CAPGO_KEEP_0__ Live Updates 直接发布 UI 和副本修复
- Capgo Builder: 在 CI 中自动化发布构建
- 推送通知: 添加并重建使用 __CAPGO_KEEP_0__ Builder
@capacitor/push-notificationsCapgo - 相关指南: 让移动端变得可爱 · Bolt.new 到移动端
注册一个免费的 Capgo 帐户 以启用实时更新和云原生构建。
资源
从 Base44 到原生移动应用继续前进，使用 Capacitor
如果您正在使用 使用Base44构建Capacitor 与__CAPGO_KEEP_0__进行__CAPGO_KEEP_0__ Capgo 在Capgo中查看Capgo Capacitor Plugins by Capgo 在Capgo中查看Capacitor 在Capgo中查看Capgo Capgo 在__CAPGO_KEEP_0__中查看__CAPGO_KEEP_0__ 在Windows上从__CAPGO_KEEP_0__构建iOS
