使用 Capacitor 将 Base44 转换为原生移动应用

简介

Base44 是一款 AI 驱动的应用构建器，可通过提示词生成完整的 React 应用。你可以快速在浏览器中交付可用的产品——但如果你想在 iOS 和 Android 上运行呢？在本教程中，我们将展示如何导出你的 Base44 项目，并使用 Capacitor，然后发布签名的商店二进制文件 Capgo 构建器 — iOS 无需 Mac。

简而言之： 这个 Base44 转 iOS 和 Android 页面一屏概括了完整路径：导出、Capacitor、无需 Mac 的云端构建，以及 Live Updates。

读完本指南，你的 Base44 应用将原生运行在 iOS 和 Android 上，并可访问相机、存储和推送通知等设备功能。

前置条件 & 时间预估

所需时间：首次设置需 2-4 小时

系统要求:

用于 iOS 云端构建：任意操作系统（Windows、Mac 或 Linux），搭配 Capgo Builder
用于 Android 云端构建：任意操作系统
存储空间：10GB 免费空间用于依赖项和构建产物
内存（RAM）：最低 8GB

费用:

Base44 导出：Builder 计划或更高版本（用于 GitHub 导出和 ZIP 下载）
iOS App Store：$99/年（Apple Developer Account）
Android 应用商店：$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 配合使用，无需每次重建原生二进制文件即可修复 Web 层问题

步骤 1：导出你的 Base44 项目

Base44 允许你在相应方案上导出 code Builder 套餐或更高版本。你有两个主要选项。

选项 A：导出到 GitHub（推荐）

在 Base44 编辑器中打开你的应用
点击 GitHub 顶栏中的图标
授权 Base44 Builder 并创建或连接一个仓库
Base44 会自动将您的应用 code 同步到 GitHub（支持的套餐支持双向同步）

查看 Base44 GitHub 集成文档详情。

选项 B：下载为 ZIP

点击 Code 在顶部栏中点击以打开文件浏览器
点击 将项目导出为 ZIP 位于 code 视图的右上角
在电脑上解压该压缩包

在 Cursor 中打开项目

访问 cursor.sh 并安装 Cursor
克隆你的 GitHub 仓库 (Git: Clone 通过命令面板) 或使用以下方式打开解压后的 ZIP 文件夹 文件 > 打开文件夹

启动 Cursor

为了获得最佳的 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 应用正在本地运行

您的 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 及打包后的资源。

Base44 构建输出

第 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

为 Base44 应用初始化 Capacitor

提交 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：构建与同步

每次修改 Web 应用时：

npm run build
npx cap sync

Capacitor 同步完成：Base44 应用

第 7 步：使用 Capgo Builder 构建可上架的二进制文件（推荐）

模拟器测试可选。如需 TestFlight、内部测试和应用商店提交，请使用 Capgo 构建器 在云端编译并签名原生二进制文件。

为什么 Base44 应用要用 Capgo Builder？

iOS 无需 Mac — 可从 Windows 或 Linux 构建
你的 AI 代理也能运行的同一个 CLI — 契合从 Base44 → GitHub → Cursor 的 vibe-coding 工作流
与 Live Updates 搭配使用 — 通过空中更新修复 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 bundle 以进行 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

Xcode 打开 Base44 Capacitor 项目

日常调试请使用本地 IDE。在需要 Capgo 构建器 已签名的发布二进制文件时使用。

第 9 步：添加原生功能

使用设备功能增强您的 Base44 应用：

npm install @capacitor/share @capacitor/camera @capacitor/push-notifications
npx cap sync

让 Cursor 将 Share、Camera 或 Push 集成到您的 React 组件中。添加插件后，运行新的 Capgo 构建器 build 以提交到应用商店。

为 Base44 Capacitor 应用添加的原生功能

第 10 步：优化生产环境

应用图标与启动页

npm install -D @capacitor/assets
# Add assets/icon.png (1024x1024) and assets/splash.png (2732x2732)
npx capacitor-assets generate
npx cap sync

Base44 后端注意事项

导出的 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 build 之后

Capgo Builder 中的构建错误

提交 ios/ 以及 android/ 在请求 cloud build 之前推送到 git
运行 npx cap sync 在本地运行，以便将 web 资源复制到原生项目中
新的 Capacitor 插件需要重新进行 native build

Base44 不支持导出

GitHub 导出和 ZIP 下载需要 Builder 套餐或更高版本。在较低套餐中，请在 Base44 中升级，或从 Code 视图手动复制文件。

总结

你导出了一个 Base44 AI 生成的 React 应用，用 Capacitor 封装，并可通过以下方式顺利获得已签名的 iOS 和 Android 二进制文件： Capgo 构建器 —— 无需维护本地 Xcode 设备集群。

下一步

Capgo Live Update：无需等待应用商店审核，即可快速发布 UI 和文案修复
Capgo 构建器: 在 CI 中自动化发布构建
推送通知: 添加 @capacitor/push-notifications 并使用 Capgo Builder 重建
相关指南: 将 Lovable 转换为移动端应用 · Bolt.new 转移动应用

注册免费的 Capgo 账号以启用 Live Updates 和云端 Native Build。

资源

使用 Capacitor 从 Base44 继续构建原生移动应用

如果你正在使用 使用 Capacitor 将 Base44 转换为原生移动应用 要规划原生插件工作，请将其与 Capgo 插件目录查看 Capgo 插件目录中的产品工作流， Capgo 提供的 Capacitor 插件查看由 Capgo 提供的 Capacitor 插件中的实现细节， Capgo Native Build 用于 Capgo Native Builds 的产品工作流，以及在 Windows 上构建 iOS 用于无需 Mac 的云端 iOS 构建。