使用 Capacitor 将你的 Lovable 应用转成 iOS 和 Android 应用

简介

Lovable 是一款 AI 应用构建器，能在几分钟内将 prompt 转化为可运行的 React 应用。你可以快速在浏览器中发布应用 —— 但如果你想让应用像其他原生应用一样，出现在 App Store 和 Google Play，并常驻在用户的手机主屏幕上呢？

简而言之： 将 Lovable 转换为 iOS 和 Android 的页面 在一个屏幕内总结了完整路径：导出、Capacitor、无需 Mac 的云端构建以及 Live Update。

本指南将带你走完全过程：从 Lovable 导出，使用 Capacitor将 Web App 封装，并通过 Capgo 构建器 在云端构建已签名的 iOS 和 Android 二进制文件（无需 Mac），添加原生功能，并使用 Capgo Live Updates 进行热更新修复布局。.

我们全程使用 Cursor ——如果你不想手动输入，它的 AI 可以为你运行大部分终端命令。

所需时间： 首次操作约需 1–2 小时，主要用于账号设置及等待云端构建。

完成后，你将获得：

• 通过云端构建的 iOS 和 Android 原生应用 —— 主流程无需 Xcode 或 Android Studio
• 在真实设备上运行的应用（通过 TestFlight、直接安装或 Play 内部测试）
• 仅原生应用才能提供的相机功能
• 配置好的 Live Updates，无需经过应用商店审核即可发布 UI 和 CSS 修复

前提条件

费用（仅限公开发布时）：

可选（仅限本地模拟器）：

两者都可以跳过。本指南的主线流程是在云端进行 build，并直接安装到真机上，无需这些工具。

关于 Lovable 与 Frameworks 的简要说明

在开始使用 code 之前，请了解 Lovable 生成的 Web App 类型会影响移动端的封装效果.

长期以来，Lovable 的默认配置是 React + Vite 单页应用 (SPA)。截至 2026 年 5 月，全新的 Lovable 应用可能会使用 TanStack Start 默认使用服务端渲染 (SSR)。 SSR 对 Web 很有用，但 Capacitor 封装的是 静态构建产物 —— 一个包含 HTML、CSS 和 JavaScript 的文件夹，其 index.html 从本质上讲 —— 即直接在设备端的 App 内运行。

SSR 应用需要服务器在每次请求时渲染页面。手机里没有服务器，所以对于 Capacitor，你需要 静态的客户端渲染输出.

操作步骤：

• 从零开始： 让 Lovable 生成一个 单页应用 (SPA) 或让它跳过 SSR，从而得到静态 dist/ 文件夹。
• 如果已使用 TanStack Start (SSR)： 将其配置为预渲染或输出静态 SPA。唯一的硬性要求是包含以下内容的静态 build 文件夹： index.html.
• 旧版 Next.js Lovable 项目： 使用 静态导出 (static export) — 输出目录为 out/ 而不是 dist/.

无论你使用什么框架，只需将 Capacitor 的 webDir 指向该文件夹。对于 Vite SPA，该文件夹是 dist.

第 1 步 — 将您的 Lovable App 导出到 GitHub

Lovable 会在编辑器中保留您的 code，直到您连接 GitHub。

1. 在浏览器中打开您的 Lovable 项目
2. 点击 升级 （右上角）如有需要，然后打开 Git 在左侧菜单中
3. 选择 GitHub，授权 Lovable 并绑定您的账号
4. Lovable 会自动创建仓库并推送您的应用

✅ 成功： 正在访问 github.com/YOUR-USERNAME/your-app 显示您应用的 code。

第 2 步 — 配置 Cursor 并克隆项目

在本地处理 code 之前，您需要一个 code 编辑器。我们推荐使用 Cursor，这是一款可以为您运行终端命令的 AI 驱动编辑器。

下载并安装 Cursor

1. 访问 cursor.sh 并下载适用于您操作系统的版本
2. 按照安装向导安装 Cursor
3. 安装完成后，打开 Cursor

配置 Cursor 进行 AI 开发

为了获得最佳体验，请在开始前配置 Cursor：

1. 购买 Cursor 订阅计划 — 虽然 Cursor 提供免费层级，但 Pro 计划（$20/月）可提供无限 AI 代码补全、Claude 和 GPT-4 访问权限以及命令执行功能
2. 打开 Cursor 设置 通过按下 Command+, (Mac) 或 Ctrl+, (Windows)

3. 启用 AI 模型 — 确保已启用 AI 功能：

4. 选择你偏好的模型 — 选择 Claude 或 GPT-4 以获得最佳效果：

5. 允许执行命令 — 允许 Cursor 为你运行命令：

在 Cursor 中克隆你的仓库

1. 在 Cursor 中，按下 Shift+Command+P (Mac) 或 Shift+Ctrl+P (Windows) 以打开命令面板
2. 输入 “clone” 并选择 Git: Clone
3. 粘贴您的 GitHub 仓库 URL： https://github.com/YOUR-USERNAME/your-lovable-app.git
4. 选择保存项目的文件夹

5. Cursor 将 Clone 并打开您的项目

步骤 3 — 安装依赖并本地运行

方法 1：使用 Cursor AI（推荐）

1. 按键打开 Cursor 的 AI 面板 Command+K (Mac) 或 Ctrl+K (Windows)
2. 输入以下命令：

Install Homebrew, Node.js and npm on my system, then install dependencies and run the dev server

AI 会自动检测您的操作系统、安装 Node.js，并运行 npm install，并使用以下命令启动开发服务器 npm run dev.

方法 2：手动安装

按键在 Cursor 中打开终端 Shift+Command+T (Mac) 或 Shift+Ctrl+T (Windows)，然后：

macOS 用户：

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
brew install node
cd your-lovable-app
npm install
npm run dev

Windows 用户：

1. 下载 24 LTS 版 安装程序，请访问 nodejs.org
2. 运行安装程序
3. 打开终端并运行：

cd your-lovable-app
npm install
npm run dev

Lovable 应用通常运行在 http://localhost:8080 或 http://localhost:5173 — 请使用终端输出的具体地址。

按下 Ctrl + C 即可停止开发服务器，继续后续步骤。

✅ 成功： 您的应用已在浏览器中打开，UI 运行正常。

第 4 步 — 准备静态生产构建

在添加原生平台之前，Capacitor 需要进行生产构建。

React + Vite (大多数 Lovable 应用)

方法 1：使用 Cursor AI (推荐)

按下 Command+K (Mac) 或 Ctrl+K (Windows) 并询问：

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

方法 2：手动配置

确认 vite.config.ts 使用相对路径作为 base，以便资源能在原生 WebView 中加载：

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 位于根目录。

旧版 Next.js Lovable 项目

如果你的仓库使用 Next.js，请询问 Cursor：

Add a static export script to package.json and configure next.config.js for mobile export with Capacitor

或者参考 将你的 Next.js 应用转换为移动端 以获取完整的 next.config 配置，然后使用 webDir: 'out' 在 Capacitor 中，而不是使用 dist.

✅ 成功： 静态构建文件夹已存在 (dist/ 或 out/)，包含 index.html.

第 5 步 — 添加 Capacitor 与 Native Platforms

Capacitor 为您的 Web 应用封装真实的 iOS 和 Android 外壳 —— 无需重写代码。

方法 1：使用 Cursor AI（推荐）

按下 Command+K (Mac) 或 Ctrl+K (Windows) 并询问：

Install Capacitor CLI, initialize it for my app with webDir dist, and add iOS and Android platforms

AI 会询问您的 应用名称 和 Bundle ID (例如 com.yourcompany.myapp).

方法 2：手动安装

npm install @capacitor/core @capacitor/cli
npx cap init

出现提示时：

请选择一个你真正拥有的 Package ID。 Bundle ID 是全球唯一的。从一开始就使用你控制的域名的反向域名 ID —— 以后如果想修改，意味着需要进行全局查找替换 ios/ 和 android/ 并重新构建。

npm run build
npm install @capacitor/ios @capacitor/android
npx cap add ios
npx cap add android
npx cap sync

配置 Capacitor

方法 1：使用 Cursor AI（推荐）

询问 Cursor：

Update capacitor.config.ts to use dist as webDir and set up for HTTPS

对于 Next.js 静态导出，让它使用 out 来代替。

方法 2：手动配置

import type { CapacitorConfig } from '@capacitor/cli';

const config: CapacitorConfig = {
  appId: 'com.yourcompany.myapp',
  appName: 'My Lovable App',
  webDir: 'dist',
  server: {
    androidScheme: 'https',
  },
};

export default config;

构建与同步

方法 1：使用 Cursor AI（推荐）

告诉 Cursor：

Build the production web app and sync it with Capacitor platforms

方法 2：手动命令

npm run build
npx cap sync

您的项目现在如下所示：

your-lovable-app/
├── android/              ← native Android project
├── ios/                  ← native iOS project
├── dist/                 ← built web app (or out/ for Next.js)
├── src/                  ← your Lovable app code
├── capacitor.config.ts
└── package.json

无需 CocoaPods。 Capacitor 8 会自动使用 Swift Package Manager 管理 iOS 依赖。

✅ 成功： ios/ 和 android/ 文件夹已出现，终端显示 Sync finished.

第 6 步 — 检查您的 .gitignore

Capgo Builder 会从您的 Git 仓库进行编译，因此 ios/ 和 android/ 必须提交。一个常见的错误是在仓库根目录忽略了它们。

确认：

• 根目录 .gitignore 忽略 node_modules 和 dist (云端重新构建 dist 在 Web 构建期间)
• ios/ 和 android/ 本身是 不 被忽略的

✅ 成功： git status 显示 ios/ 和 android/ 准备提交（未被忽略）。

第 7 步 — Commit 并 Push

git add .
git commit -m "Add Capacitor and native iOS/Android platforms"
git push

✅ 成功： 你的 GitHub 仓库显示了 ios/ 和 android/ 文件夹。

第 8 步 — 使用 Capgo Builder 构建上架二进制文件

你不需要 Mac 或本地 Xcode/Android Studio pipeline 即可发布应用。 Capgo 构建器 进行编译、签名，并能从云端提交 iOS 和 Android 构建版本。

设置 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

只需保存一次签名凭据。如果需要帮助生成凭据，请使用我们的免费工具：

• iOS 证书生成器
• Android Keystore 生成器
• iOS UDID 查询工具 — 注册您的 iPhone 以进行开发构建

查看 凭据管理 和 在 Windows 上构建 iOS.

请求云端构建

npm run build
npx cap sync
npx @capgo/cli@latest build com.yourcompany.myapp --platform ios --build-mode release
npx @capgo/cli@latest build com.yourcompany.myapp --platform android --build-mode release

构建日志将实时流式传输到您的终端。配置好 App Store Connect 后，iOS 构建可以自动上传到 TestFlight。

安装到真机：

• iOS： TestFlight（推荐）或已注册设备 UDID 的开发构建
• Android: Google Play 内部测试轨道或已签名的 release APK/AAB

✅ 成功： 签名构建完成后，即可将其安装到真机上。

第 9 步 — 可选：在 Xcode 或 Android Studio 中进行本地测试

如果你有 Mac，或者想在云端构建前进行模拟器测试：

适用于 iOS

方法 1：使用 Cursor AI（推荐）

Open the iOS project in Xcode

方法 2：手动执行命令

npx cap open ios

首次 Xcode 设置：

1. 从设备下拉菜单中选择一个模拟器（例如 iPhone 15）
2. 真机：启用 自动管理签名 并选择你的 Apple Developer 团队
3. 点击 ▶️ Play 按钮 — 首次构建需要 5–10 分钟

适用于 Android

方法 1：使用 Cursor AI（推荐）

Open the Android project in Android Studio

方法 2：手动命令

npx cap open android

首次 Android Studio 设置：

1. 如果收到提示，请安装缺失的 SDK 包
2. 在 Device Manager 中创建模拟器（例如 Pixel 6、API 33+）
3. 点击绿色 ▶️ Run 按钮 —— 首次构建需要 5–15 分钟

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

✅ 成功： 应用在模拟器或仿真器中打开，并展示您的 Lovable 内容。

第 10 步 — 启用 Live Reload (开发模式)

通过将原生壳程序指向您的本地开发服务器来加速迭代。

方法 1：使用 Cursor AI（推荐）

告诉 Cursor：

Set up live reload for Capacitor development with my local IP address

方法 2：手动配置

1. 查找您的本地 IP 地址：

# macOS
ipconfig getifaddr en0

# Windows
ipconfig

2. 更新 capacitor.config.ts:

import type { CapacitorConfig } from '@capacitor/cli';

const config: CapacitorConfig = {
  appId: 'com.yourcompany.myapp',
  appName: 'My Lovable App',
  webDir: 'dist',
  server: {
    url: 'http://YOUR_IP_ADDRESS:5173',
    cleartext: true,
  },
};

export default config;

使用端口 8080 或 3000 如果那是 npm run dev 打印的内容。

3. 应用更改：

npx cap copy

✅ 成功： 对您的 Web code 进行编辑，即可在设备或模拟器上实现热重载。

第 11 步 — 添加原生功能：摄像头

Capacitor 插件允许 JavaScript 调用真实的设备功能。我们将添加 Camera 插件，以便用户可以拍照——这是浏览器标签页无法可靠实现的。

方法 1：使用 Cursor AI（推荐）

告诉 Cursor：

Add the Capacitor Camera plugin with iOS and Android permissions and a button to take a photo

方法 2：手动安装

npm install @capacitor/camera
npx cap sync

iOS — 添加到 ios/App/App/Info.plist 在顶层目录内 <dict>:

<key>NSCameraUsageDescription</key>
<string>This app uses the camera to take photos.</string>

Android — 在内部添加 <manifest> 在 android/app/src/main/AndroidManifest.xml:

<uses-permission android:name="android.permission.CAMERA" />

import { Camera, CameraResultType } from '@capacitor/camera';

async function takePhoto() {
  const photo = await Camera.getPhoto({
    quality: 90,
    resultType: CameraResultType.Uri,
  });
  return photo.webPath;
}

添加插件需要 重新进行 Native Build 在设备运行前，先通过 Capgo Builder 进行测试。

✅ 成功： Camera code 编译并 npx cap sync 无错误地完成。

第 12 步 — 添加 Capgo Live Updates

通常每次原生层面的改动都需要经过 App Store 审核。 Capgo Live Updates 在几分钟内通过 OTA 将更改推送到应用的 Web 层（HTML、CSS、JS、图片）。

在你的首个版本中安装更新器 这样在需要发布修复补丁时，你就无需再苦等审核。

npm install @capgo/capacitor-updater
npx cap sync

添加到 capacitor.config.ts:

import type { CapacitorConfig } from '@capacitor/cli';

const config: CapacitorConfig = {
  appId: 'com.yourcompany.myapp',
  appName: 'My Lovable App',
  webDir: 'dist',
  plugins: {
    CapacitorUpdater: {
      autoUpdate: true,
    },
  },
};

export default config;

在应用入口处初始化（例如 src/main.tsx):

import { CapacitorUpdater } from '@capgo/capacitor-updater';

void CapacitorUpdater.notifyAppReady();

提交、推送并运行新的 Capgo Builder 构建，使 SDK 更新器集成到原生壳中。

发布后上传 Web bundles：

npm run build
npx @capgo/cli@latest bundle upload --channel production

查看 Capgo Live Updates 文档.

若要实现每次点击时自动上传，请遵循 发布 在 Lovable 中，请遵循 通过 GitHub Actions 实现 Lovable 的 Capgo Live Updates 自动化.

✅ 成功： 已安装 Updater 插件且 notifyAppReady() 在启动时运行。

第 13 步 — 使用 Live Update 修复状态栏间距

在真实的 iPhone 上，你的页眉可能会位于 下方 状态栏（时钟和电池）之下。现代 Capacitor 采用全屏绘制，因此你的应用必须遵循 安全区域内边距 (safe area insets): env(safe-area-inset-top), -bottom, -left, -right.

许多 Lovable 应用已经处理了底部内边距，但使用了固定的顶部内边距（例如 pt-6）而没有考虑顶部内边距。

1. 确认 viewport-fit=cover 在 index.html:

<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />

2. 修复顶部页眉 — 使用 max() 来保持 Web 内边距，并在带刘海的设备上自动扩展：

/* Before */
padding-top: 1.5rem;

/* After */
padding-top: max(1.5rem, env(safe-area-inset-top));

在 Cursor 或 Lovable 中，可以这样问：

“移动端应用内容会延伸到顶部状态栏下面。请 env(safe-area-inset-top) 使用以下内容，将其添加到每个页面 Header 的顶部 padding 中 max()，并将现有 padding 保留为最小值。”

3. 通过 OTA 发布修复 —— 这只是纯 CSS，无需重新构建原生应用：

git add .
git commit -m "Fix top safe area on mobile"
git push
npm run build
npx @capgo/cli@latest bundle upload --channel production

强制关闭设备上的应用，重新打开，等待约 15–30 秒后再打开一次。Header 应该位于状态栏下方 —— 无需应用商店审核即可修复。

✅ 成功： OTA bundle 生效后，顶部内容不再被状态栏遮挡。

如需更深入的布局处理，请参阅 @capgo/tailwind-capacitor 和 Capacitor edge-to-edge 显示.

第 14 步 — 准备应用商店上架信息

您的应用已构建完成且可安装，现在可以推送即时更新了。要在公共商店正式上线，大部分工作都在准备文案资料：

• 应用图标 — iOS 使用 1024×1024px（不可透明），Google Play 使用 512×512px
• 应用截图 — Apple 要求提供 iPhone 6.9” (1320×2868px) 截图
• 应用名称、副标题、描述、关键词
• 隐私政策 URL — 两大商店均要求提供，即使是免费应用也必须提供
• 年龄分级 — 在各自的控制台中填写问卷
• 数据收集披露说明 — Apple 隐私营养标签与 Google 数据安全说明

方法 1：使用 Cursor AI（推荐）

Set up app icons and splash screens for my Capacitor app

方法 2：手动配置

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

上线前的最后步骤：

1. Google Play 封闭测试 (2023 年 11 月 13 日后创建的个人账号)：在申请正式发布前，需至少有 12 名测试人员连续测试 14 天。iOS 无此要求。
2. 提交审核 — 满足测试要求后，Apple 约需 3–5 天，Google 约需 3–7 天。

查看我们的 首次 App 审核指南 以获取完整清单。

常见错误（及解决方法）

• Could not find the web assets directory: ./dist — 运行 npm run build 之前 npx cap add 或 npx cap sync. 请确保 webDir 在 capacitor.config.ts 与您的 framework 输出匹配 (dist Vite 用户， out Next.js 静态导出用户)。
• “此 App ID … 不可用” — Bundle ID 是全局唯一的。请选择您拥有的反向域名 ID。
• 修改 Bundle ID 后 iOS build 失败 — 原生项目中的 ID 必须与 Apple App Store Connect 一致。请执行全局查找并替换， ios/ 和 android/提交并重新构建。
• 启动时出现白屏 — Set base: './' ，重新构建并运行 npx cap sync.
• 内容被状态栏遮挡 — 添加 viewport-fit=cover 和 env(safe-area-inset-top) 内边距 (见步骤 13)。
• APK 使用 debug 模式签名 — Google Play 会拒绝 debug 版本。请使用用 keystore 签名的 release 版本。
• 部署被拒绝 — 版本已存在 — 请提升原生项目的版本号/构建号并重新构建。

有关 Capgo Builder 的问题，请参阅 Native Build 故障排除 和 Live Updates 调试.

总结

你已经将 Lovable Web 应用转化为了 iOS 和 Android 原生应用 —— 无需 Mac 即可在云端构建，实现了真实的相机功能，并通过热更新修复了布局。最难的部分已经完成了。

下一步

• Capgo Live Updates — 无需等待应用商店审核，即可直接发布 UI 和文案修复
• Capgo 构建器 — 在 CI 中实现发布构建自动化
• Capgo 插件目录 — 生物识别、推送通知、地理位置等功能
• 相关指南： 将 Base44 转换为移动应用 · 将 Bolt.new 转换为移动应用

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

资源

• Lovable 文档
• Capacitor 文档
• Capgo Native Build
• Capgo — 为 Capacitor 应用提供 Live Updates
• 在 Windows 上构建 iOS 应用
• 移动端 Next.js 静态导出方案

延伸阅读：使用 Capacitor 将您的 Lovable 应用转换为 iOS 和 Android

如果你正在使用 使用 Capacitor 将你的 Lovable 应用转成 iOS 和 Android 应用 要规划原生插件工作，请将其连接到 Capgo 插件目录 用于 Capgo 插件目录中的产品工作流， 由 Capgo 提供的 Capacitor 插件 有关 Capacitor 插件的实现细节，请参阅 Capgo 编写的内容， Capgo Native Build 用于 Capgo Native Builds 的产品工作流，以及 在 Windows 上构建 iOS 无需 Mac 即可进行云端 iOS 构建。