使用 Capacitor 将你的 Lovable App 转换为 iOS 和 Android 应用

简介

Lovable 是一款 AI 应用构建器，能在几分钟内把 prompt 变成可运行的 React 应用。你可以快速在浏览器中上线 —— 但如果你想让应用上架 App Store 和 Google Play，像其他原生应用一样出现在主屏幕上呢？

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

本指南带你走完整条路径：从 Lovable 导出，封装 Web App 时使用 Capacitor，在云端构建已签名的 iOS 和 Android 二进制文件，借助 Capgo 构建器 （无需 Mac），添加一个真正的原生功能，并通过 OTA 推送布局修复，使用 Capgo Live Update.

我们使用 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 index.html —— 随应用一起打包到设备中。

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

操作如下：

• 从零开始： 让 Lovable 生成一个 单页应用 (SPA) 或跳过 SSR 以获取静态 dist/ 文件夹。
• 已经使用 TanStack Start (SSR)： 将其配置为预渲染或输出静态 SPA。唯一的硬性要求是包含以下内容的静态 build 文件夹： index.html.
• 旧版 Next.js Lovable 项目： 使用 静态导出 — 输出到 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：克隆
3. 粘贴您的 GitHub 仓库 URL： https://github.com/YOUR-USERNAME/your-lovable-app.git
4. 选择保存项目的文件夹

5. Cursor 将克隆并打开您的项目

步骤 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. 从 Firebase Console 下载 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 和原生平台

Capacitor 能将您的 Web App 封装进真实的 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 步 — 提交并推送

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

原生改动通常都要经过应用商店审核。 Capgo Live Update 在几分钟内通过 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 位于原生 shell 中。

发布后上传 Web bundle：

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 采用边缘到边缘渲染，因此你的应用必须尊重 安全区域内边距: 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) ，使用 max()，并保留现有内边距作为最小值。”

3. 通过空中推送发布修复 — 这是纯 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 秒，再次打开。标题栏应位于状态栏下方——无需应用商店审核即可修复。

✅ 成功： OTA bundle 应用后，顶部内容会避开状态栏。

如需进一步调整布局，请参阅 @capgo/tailwind-capacitor 以及 Capacitor 边到边显示.

第 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 与你的框架输出（dist 针对 Vite， out （用于 Next.js 静态导出）。
• “此 App ID … 不可用” — Bundle ID 具有全局唯一性。请选择您控制的反向域名 ID。
• 更改 Bundle ID 后 iOS 构建失败 — 原生项目中的 ID 必须与 Apple App Store Connect 一致。请在整个项目中进行查找并替换， ios/ 以及 android/提交并重新构建。
• 启动时出现白屏 — 设置 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 Update — 无需等待商店审核即可发布 UI 和文案修复
• Capgo 构建器 — 在 CI 中自动化发布构建
• Capgo 插件目录 — 生物识别、推送通知、地理定位等
• 相关指南： Base44 转移动应用 · Bolt.new 转移动应用

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

资源

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

常见问题

如何将 Lovable 应用转换为移动应用？

将 Lovable 项目导出到 GitHub，构建为静态 Web 应用（大多数 Lovable 应用使用 React 和 Vite），添加 Capacitor 并加入 iOS 和 Android 平台，然后同步并构建可直接上架的二进制文件。本指南会逐步讲解，并且 Capgo 构建 可以在云端编译并签名 iOS 和 Android 应用。

我能把 Lovable 项目变成 App Store 和 Google Play 的应用吗？

可以。Capacitor 会把 Lovable 的 Web 构建产物封装进 iOS 和 Android 原生壳，让你保留一套代码库，同时还能添加相机等原生功能。首次上架后， Capgo 实时更新 就能发布 Web 端改动，无需等待新一轮审核。

继续阅读：使用 Capacitor 将 Lovable 应用转换为 iOS 和 Android 应用

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