Convert Your Lovable App to iOS and Android with Capacitor

简介

可爱 是一款AI应用构建器，可以将提示转换为几分钟内工作的React应用。您可以快速在浏览器中发布应用，但如果您想将应用发布到App Store和Google Play，放置在主屏幕上，就像每个本机应用一样，怎么办?

本指南将指导您完成整个过程：从Lovable导出，使用__CAPGO_KEEP_0__将Web应用包装起来，在__CAPGO_KEEP_1__ Builder中构建签名的iOS和Android应用，并通过云将修复推送到设备。 Capacitor, 在云端使用签名的 iOS 和 Android 二进制文件 Capgo Builder __CAPGO_KEEP_0__ Live Updates Capgo Live Updates.

Cursor 通过它 — 它的 AI 可以自动执行大部分终端命令，如果您不想手动输入。 所需时间：

大约 1–2 小时，主要是账户设置和等待云端构建。 最终结果：

一个从云端构建的原生 iOS 和 Android 应用程序 — 不需要在主路径上使用 Xcode 或 Android Studio

• __CAPGO_KEEP_0__
• 在真实设备上运行的应用程序 (TestFlight, 直接安装或 Play 内部测试)
• 仅本机应用程序才能提供的工作摄像头功能
• Live Updates 配置为 UI 和 CSS 修复在不经过商店审查的情况下即可发布

前提条件

成本 (仅发布公共):

Optional (仅限本地模拟器):

您可以跳过这两者。 本指南的主要路径是在云端构建并在真实设备上安装，而不需要它们。

关于可爱的应用和框架的快速说明

在接触 code 之前，需要了解 可爱生成的网页应用类型会影响移动包装.

很长时间以来，Lovable 的默认设置是 React + Vite 单页应用 (SPA)截至 2026 年 5 月，新 Lovable 应用程序可能使用 TanStack Start，带有服务器端渲染 (SSR) SSR 对于 Web 来说很棒，但 Capacitor 包装的是 静态构建 ——包含 HTML、CSS 和 JavaScript 的文件夹 index.html 在设备上运行的应用程序的根部 — 内置于应用程序中。

An SSR app expects a server to render pages on each request. There is no server inside a phone, so for Capacitor you want 静态、客户端渲染的输出.

要做什么：

• 从头开始： 要求Lovable生成 单页应用程序（SPA） 或跳过SSR以获得静态 dist/ 文件夹。
• 已经在TanStack Start（SSR）上： 配置它以预渲染或输出静态SPA。唯一的硬性要求是包含 index.html.
• 遗留Next.js Lovable项目： 使用 静态导出 —— 输出到 out/ 而不是 dist/.

无论您使用哪个框架，都将 Capacitor 指向该文件夹。对于 Vite SPA，文件夹是 webDir 步骤 1 — 将您的可爱应用程序导出到 __CAPGO_KEEP_0__ dist.

可爱将您的 GitHub 在其编辑器中保留，直到您连接 __CAPGO_KEEP_1__

Lovable keeps your code in its editor until you connect GitHub.

1. 点击
2. 升级 (右上角) 如果需要，请打开 在 __CAPGO_KEEP_0__ 中导出 __CAPGO_KEEP_1__ Git 在左侧菜单
3. 选择 GitHub, 授权 Lovable, 并链接您的帐户
4. Lovable 创建一个仓库并自动推送您的应用

✅ 成功: 访问 github.com/YOUR-USERNAME/your-app 展示你的应用的 code.

步骤 2 — 设置游标并克隆你的项目

在本地与你的 code 进行工作之前，你需要一个 code 编辑器。我们推荐 游标,一个可以为你运行终端命令的 AI 驱动编辑器。

下载并安装游标

1. 访问 cursor.sh 并下载适合你的操作系统的版本
2. 按照安装向导安装游标
3. 安装完成后打开游标

配置鼠标指针为AI开发

为了获得最佳体验，请在开始之前配置鼠标指针:

1. 购买鼠标指针计划 —— 虽然鼠标指针提供免费层次，但Pro计划（$20/月）为您提供无限的AI完成项、Claude和GPT-4的访问权限以及命令执行
2. 打开鼠标指针设置 通过按 Command+, (Mac) 或 Ctrl+, (Windows)

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

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

5. 允许命令执行 — 启用指针以为您运行命令：

在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将克隆并打开您的项目

步骤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安装包 从 下载
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 (最受欢迎的应用)

方法 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 使用相对基准，因此资产在本机 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遗留项目

如果您的仓库使用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/在移动应用中使用Capacitor index.html.

第 5 步 — 添加 Capacitor 和原生平台

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 将要求您输入 应用名称 和 (例如 __CAPGO_KEEP_0__ 初始化 com.yourcompany.myapp).

方法 2：手动安装

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

当提示时：

选择一个您实际拥有的包 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/ 并且（context：Capgo 营销网站。角色：短 UI 标签或导航项。见于：页面 trust.astro。消息键 `and`（And） android/ 文件夹出现，终端显示 Sync finished.

第 6 步 — 检查您的 .gitignore

Capgo 构建器从您的 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 Builder Capacitor 构建器

Set up 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

Capacitor 构建器

• Capacitor 构建器
• Capacitor 构建器
• Capacitor 构建器 Capacitor 构建器

Capacitor 构建器 管理凭据 和 在 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 内部测试轨道或已签名的发布 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 开发者团队
3. 点击 ▶️ Play 按钮 — 第一次构建需要 5–10 分钟

For Android

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

Open the Android project in Android Studio

方法 2：手动命令

npx cap open android

首次 Android Studio 设置：

1. 安装缺少的 SDK 包裹，如果提示
2. 在设备管理器中创建一个模拟器（例如 Pixel 6， API 33+）
3. 点击绿色 ▶️ 运行按钮 — 第一次构建需要 5–15 分钟

使用本地 IDE 进行日常调试。使用 Capgo Builder（推荐） 当您需要签名的发布二进制文件时。

✅ 成功： 应用程序在模拟器或模拟器中打开，显示您的可爱内容。

第 10 步 — 启用实时重载（开发）

通过将本机 shell 指向您的本地开发服务器来加速迭代。

方法 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 或（Capacitor 实时更新替代方案比较页面） 3000 如果这是什么 npm run dev 打印。

3. 应用更改：

npx cap copy

✅ 成功： Edits to your web code hot-reload on the device or simulator.

步骤 11 — 添加本机功能：摄像头

一个 Capacitor 插件让 JavaScript 可以调用真实设备功能。我们将添加摄像头插件，使用户可以拍照 — 这是浏览器标签无法可靠地做到的。

方法 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;
}

添加插件需要一个 通过 __CAPGO_KEEP_0__ Builder 的新本机构建 through Capgo Builder before it works on devices.

✅ 成功: code 相机编译并 npx cap sync 完成无错误。

第 12 步 — 添加 Capgo 实时更新

每次本地更改通常都需要经过应用商店审查。 Capgo 实时更新 上下文:实时更新产品页面。角色:短的 UI 标签或导航项。见于:页面 live-update.astro。保留 Capgo 产品/品牌和开发者术语完全不变。消息键 `live_update_hero_badge` (实时更新英雄徽章)。

将更改推送到您的应用的 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();

Commit, push, and run a new Capgo Builder build so the updater SDK is in the native shell.

提交、推送并运行一个新的 __CAPGO_KEEP_0__ 构建器构建，以便更新器 __CAPGO_KEEP_1__ 在本机 shell 中

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

在发布后上传 Web 包: 查看更多关于此功能的信息：Capgo 实时更新文档.

为了每次有人点击时自动上传此内容， 发布 在Lovable中，请遵循 Automate Capgo Live Updates from Lovable with GitHub Actions.

✅ 成功： Updater插件已安装并在启动时运行。 notifyAppReady() 步骤13 — 使用Live Update修复状态栏间距

在真实的iPhone上，

您的标题可能会 位于 状态栏（时钟和电池）下。现代Capacitor绘制边缘到边缘，因此您的应用程序必须尊严地 安全区域内边距: env(safe-area-inset-top), -bottom, -left, -right.

许多可爱的应用程序已经处理底部内边距，但使用固定顶部填充（如“）”没有顶部内边距。” pt-61. 确认

在 viewport-fit=cover 2. 修复顶部标题 index.html:

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

— 使用 来保留网页填充并在凹槽设备上生长: max() In Cursor 或可爱中询问:

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

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

“在移动设备上，应用程序内容在顶部状态栏下运行。将

添加到每个页面标题的顶部填充中，保持现有填充为最小。” env(safe-area-inset-top) 3. 通过无线电发送修复 max()4. 确认

在 —— 这是纯 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 包应用后清除状态栏。

对于更深入的布局工作，请参见 @capgo/tailwind-capacitor 和 Capacitor edge-to-edge display.

__CAPGO_KEEP_0__ 全屏显示

步骤 14 — 准备您的商店列表

• 您的应用已构建，安装并可推送即时更新。将应用发布到公共商店主要是 paperwork： 应用图标：
• 截图 — Apple 需要 iPhone 6.9“ (1320×2868px) 截图
• 应用名称、副标题、描述、关键词
• 隐私政策 URL — 两家商店都需要，包括免费应用
• 年龄等级 context: Solution 页应用示例部分。角色: 短 UI 标签或导航项。见于：组件解决方案/解决方案应用示例.astro。消息键 `solution_app_examples_rating` (解决方案应用示例等级).
• — 每个控制台的问卷 数据收集披露

— Apple 隐私营养标签和 Google 数据安全

Set up app icons and splash screens for my Capacitor app

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

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

“live”前还剩下什么：

1. Google Play关闭测试 (个人账户创建于2023年11月13日之后): 在生产访问之前，至少需要14天连续测试14名测试者。iOS没有等效。
2. 提交审核 — Apple ~3–5天，Google ~3–7天，测试要求满足后

查看我们的 首次应用程序审核指南 查看完整清单

常见错误（和如何修复它们）

• Could not find the web assets directory: ./dist — 运行 npm run build 在 npx cap add 或 npx cap sync确保 webDir in capacitor.config.ts 匹配您的框架输出（对于 Vite，dist 对于 Next.js 静态导出）。 out “此 App ID … 不可用”
• — 应用程序 ID 全球唯一。 选择您控制的反向域 ID。 iOS 构建失败后更改应用程序 ID
• — 本机项目中的 ID 必须与 Apple App Store Connect 匹配。 找到并替换所有 和 ios/ , 提交，重建。 android/启动时白屏
• 和 —— 设置 base: './' 在 Vite 配置中，重建并运行 npx cap sync.
• 状态栏下方的内容 —— 添加 viewport-fit=cover 和 env(safe-area-inset-top) (步骤 13) 内边距
• 已签名的 APK —— Google Play 拒绝调试构建。使用您的 keystore 签署一个发布构建。
• 部署被拒绝 —— 版本已经存在 —— 在本地项目中升级版本/构建号并重建。

对于 Capgo Builder 问题，请参见 原生构建故障排除 和 实时更新调试.

结论

您将可爱的Web应用转换为原生iOS和Android — 在云中构建，无需Mac，具有实时摄像头功能和布局修复，通过无线网络发送。 这是困难部分已经完成。

下一步

• Capgo 实时更新 — 不必等待商店审查就可以将UI和副本修复
• Capgo 构建器 — 在CI中自动化发布构建
• Capgo 插件目录 — 生理学、推送通知、地理位置等
• 相关指南： Base44到移动端 · Bolt.new到移动端

注册一个免费的Capgo账户 以启用实时更新和云原生构建。

资源

• 可爱文档
• Capacitor文档
• Capgo原生构建
• Capgo — 为Capacitor应用提供实时更新
• 在Windows上构建iOS
• Next.js静态导出到移动端

继续从将可爱应用转换为iOS和Android的Capacitor

If you are using Convert Your Lovable App to iOS and Android with Capacitor 以计划本机插件工作，连接它 Capgo 插件目录 为产品工作流程在 Capgo 插件目录 Capacitor 由 Capgo 为实现细节在 Capacitor 由 Capgo Capgo 本机构建 为产品工作流程在 Capgo 本机构建， 从 Windows 构建 iOS 在没有 Mac 的情况下进行云 iOS 构建。