Base44 to Native Mobile Apps with Capacitor

介绍

Base44 是一种 AI 驱动的应用程序生成器，可以从提示生成完整的 React 应用程序。您可以快速在浏览器中部署一个工作的产品，但如果您想将其部署到 iOS 和 Android 上呢？本教程将展示如何将您的 Base44 项目导出并将其转换为本机移动应用程序 Capacitor然后将签名的商店二进制文件 Capgo Capgo Builder —— 不需要 Mac 即可部署 iOS

通过本教程的结束，您的 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账户）
Android Play 商店: $25一次性（Google Play Developer）
Cursor Pro: $20/月（可选但推荐）

必需软件:

Node.js 18+
一个code编辑器，如 Cursor

为什么将 Base44 应用转换为移动应用?

扩大覆盖范围: 在用户期望的原生应用图标处遇见他们，而不是浏览器标签
原生功能: 通过 Capacitor 插件获取相机、GPS、生物识别和离线存储
应用商店发布: 发布到 Google Play 和 Apple App Store
更快的迭代: 配对 Capgo Live Updates 和 Capgo Builder 以便在每次迭代时不必重建原生二进制文件

步骤 1: 导出您的 Base44 项目

Base44 允许您导出 code 一旦您升级到 Builder 计划或更高 Base44 让您导出 __CAPGO_KEEP_0__ 一旦您升级到 Builder 计划或更高您有两个主要选项。

选项 A：导出到 GitHub (推荐)

打开您的应用程序在 Base44 编辑器中
点击顶部工具栏中的 GitHub 上下文：Capgo 解决方案营销页面。角色：短 UI 标签或导航项。保留 Capgo 产品/品牌和开发者术语完全不变。消息键 `solutions_lovable_to_mobile_stat1_value` (解决方案可爱到移动统计值)。
顶部工具栏中的图标授权 Base44 Builder
Base44会自动同步您的应用程序 code 到 GitHub（支持的计划中支持双向同步）

See Base44 GitHub 集成文档查看更多细节。

选项 B: 下载 ZIP

点击 Code 在顶部工具栏中点击打开文件浏览器
点击 导出项目为 ZIP 在 code 视图的右上角
在计算机上解压压缩包

打开项目

访问 cursor.sh 并安装Cursor
克隆您的GitHub仓库（Git: Clone 从命令面板）或打开提取的ZIP文件夹 文件>打开文件夹

启动Cursor

为了获得最佳的AI辅助工作流程，请启用您的偏好模型并允许命令执行在Cursor设置中 —— 与我们的可爱到移动设备指南.

步骤2：设置开发环境

上下文：关于Capgo页面。角色：UI标签。见于：关于.astro页面。消息键`about_how_step_label`（关于如何步骤标签）。

Base44导出一个标准的React项目。安装依赖项并确认开发服务器正常工作。

Press 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/.

页面/区域：Capgo 页面。角色：UI 标签。见于：about.astro 页面。消息键 `about_how_step_label` (关于如何步骤标签)。

提问指针：

Configure vite.config for Capacitor mobile deployment with base './' and production build to dist

配置 Vite 运行在移动设备上 vite.config.ts 询问指针：

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
  base: './',
  build: {
    outDir: 'dist',
  },
})

context

npm run build

验证一个 dist/ 包含 index.html 和打包资产的

Base44构建输出

步骤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

Capacitor初始化一个Base44应用

提交 ios/ 和 android/ 将Capgo Builder编译的文件夹添加到git中

步骤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 同步完成

第 7 步：使用 Capgo Builder 构建商店准备的二进制文件（推荐）

模拟器测试是可选的。对于 TestFlight、内部测试和商店提交，请使用 Capgo 构建器 以云端方式编译和签名本机二进制文件。

为什么使用 Capgo Builder 构建 Base44 应用?

No Mac 必须安装 iOS — 从 Windows 或 Linux 构建
同样 CLI 你的 AI agent 可以运行 — 适合 vibe-coding 工作流程从 Base44 → GitHub → Cursor
与 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。

上传您的 OTA 更新的 Web 包：

npx @capgo/cli@latest bundle upload --channel production

步骤 8：可选 — 在 Xcode 或 Android Studio 中测试本地

context: About Capgo 页面。角色：UI 标签。见于：关于.astro 页面。消息键 `about_how_step_label` (关于如何步骤标签)。

npx cap open ios      # Xcode + iOS Simulator
npx cap open android  # Android Studio + emulator

Xcode 打开一个 Base44 Capacitor 项目

Xcode 打开 Base44 __CAPGO_KEEP_0__ 项目 Capgo Capgo Builder __CAPGO_KEEP_0__ Builder

context: 来自 Capgo UI 字符串的 HTML 文本片段（父键 `appflow_credentials_note`）。页面/区域：Appflow 比较/迁移营销复制。角色：支持说明或脚注。见于：页面 alternatives/ionic-appflow.astro。保留 Capgo 产品/品牌和开发者术语的原始形式。消息键 `appflow_credentials_note` (Appflow 凭据说明)。| 页面/区域：Capgo Builder / 原生云构建产品页面。角色：部分或页面标题。见于：页面 native-build.astro。保留 Capgo 产品/品牌和开发者术语的原始形式。消息键 `native_build_builder_title` (原生构建 Builder 标题)。| 页面/区域：Capgo Builder / 原生云构建产品页面。角色：短 UI 标签或导航项。见于：页面 native-build.astro。保留 Capgo 产品/品牌和开发者术语的原始形式。消息键 `native_build_v2_hero_badge` (原生构建 V2 英雄徽章)。| 页面/区域：Capgo Builder / 原生云构建产品页面。角色：短 UI 标签或导航项。见于：页面 native-build.astro。保留 Capgo 产品/品牌和开发者术语的原始形式。消息键 `native_build_v2_share_flow_build` (原生构建 V2 分享流程构建)。

当您需要签名的发布二进制文件时。

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

步骤 9：添加原生功能 Capgo Capgo Builder 在Capacitor中构建并在Capgo中存储提交之前。

将 Base44 应用程序中的本机功能添加到 Capacitor 中

第 10 步：优化生产

context":"Page/area: About Capgo page. Role: UI label. Seen in: page about.astro. Message key `about_how_step_label` (About How Step Label)."

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

App 图标和启动屏幕

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.* 并与您的 API 一起使用相关的 SDK 调用 — 通常，React UI层会保留下来。

并与相关 __CAPGO_KEEP_0 调用自己的 CAPGO_KEEP_1__ — React UI 层通常会保留。

启动时出现白屏

确认 base: './' 在 Vite 配置中设置
运行 npm run build 在每次 web 构建后 dist/index.html 加载 assets 使用相对路径
运行 npx cap sync 在每次 web 构建后

构建错误在 Capgo 构建器

提交 ios/ 并 android/ 到 Git 之前请求云构建
Run npx cap sync 本地运行
新Capacitor插件需要重新构建原生应用

本地运行

GitHub 导出和 ZIP 下载需要 本地运行在 Base44 中升级或手动从 Code 视图中复制文件（适用于较低的等级）。

本地运行

您已导出一个 Base44 生成的 React 应用，包裹了 Capacitor，并且有明确的路径可以通过它获得签名的 iOS 和 Android 二进制文件 Capgo Capgo Builder 本地运行

本地运行

Capgo 实时更新: 实时更新产品页面
Capgo 构建器__CAPGO_KEEP_0__ 构建器
: 构建器: Add @capacitor/push-notifications 使用Capacitor重建并且使用Capgo Builder
: 添加: : 使用 __CAPGO_KEEP_0__ 构建器重新构建 · : 相关指南

资源

从 Base44 到原生移动应用的下一步是使用 Capacitor

如果您正在使用 从 Base44 到原生移动应用的下一步是使用 Capacitor 来规划原生插件工作，连接它到 Capgo 插件目录 Capgo 插件目录中产品工作流程 Capacitor 插件由 Capgo 为 Capacitor 插件的实现细节在 Capgo 中。 Capgo 原生构建为 Capgo 原生构建中的产品工作流程从 Windows 构建 iOS 无需 Mac 即可进行云 iOS 构建

Base44 to Native Mobile Apps with Capacitor

介绍

前提条件 &amp; 时间估计

为什么将 Base44 应用转换为移动应用?

步骤 1: 导出您的 Base44 项目

选项 A：导出到 GitHub (推荐)

选项 B: 下载 ZIP

打开项目

步骤2：设置开发环境

Base44导出一个标准的React项目。安装依赖项并确认开发服务器正常工作。

手动设置

步骤 3：准备生产环境

页面/区域：Capgo 页面。角色：UI 标签。见于：about.astro 页面。消息键 `about_how_step_label` (关于如何步骤标签)。

context

步骤4：将Capacitor添加到您的Base44项目中

使用Cursor AI（推荐）

手动安装

步骤5：配置Capacitor

第 6 步：构建和同步

第 7 步：使用 Capgo Builder 构建商店准备的二进制文件（推荐）

为什么使用 Capgo Builder 构建 Base44 应用?

设置 Capgo Builder

请求云端构建

步骤 8：可选 — 在 Xcode 或 Android Studio 中测试本地

第 10 步：优化生产

context":"Page/area: About Capgo page. Role: UI label. Seen in: page about.astro. Message key `about_how_step_label` (About How Step Label)."

App 图标和启动屏幕

并与相关 __CAPGO_KEEP_0__ 调用自己的 __CAPGO_KEEP_1__ — React UI 层通常会保留。

启动时出现白屏

构建错误在 Capgo 构建器

本地运行

本地运行

本地运行

资源

从 Base44 到原生移动应用的下一步是使用 Capacitor

前提条件 & 时间估计

并与相关 __CAPGO_KEEP_0 调用自己的 CAPGO_KEEP_1__ — React UI 层通常会保留。