Convert Your Lovable App to iOS and Android with Capacitor

简介

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

本指南将全面介绍：从可爱中导出，.wrap web 应用程序 Capacitor本指南将全面介绍：从可爱中导出，.wrap web 应用程序 Capgo Builder （无需 Mac），添加一个真正的本机功能，并通过无线更新推送一个布局修复 Capgo Live Updates.

我们使用 Cursor 整个过程中 — 它的 AI 可以运行大多数终端命令，如果您不想手动输入它们。

所需时间： 大约需要1–2小时，主要是账户设置和等待云端构建。

最终结果包括：

• 从云端构建的原生iOS和Android应用程序——不需要在主路径上使用Xcode或Android Studio
• 在真实设备上运行的应用程序（TestFlight、直接安装或Play内测）
• 仅原生应用程序才能提供的工作摄像头功能
• 实时更新配置，以便UI和CSS修复可以不经过商店审查即可发布

前提条件

发布成本（仅限公开发布）：

npm

您可以跳过这两者。 本教程的主要路径在云端构建并在真实设备上安装，而无需模拟器。

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

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

很长时间以来，Lovable的默认设置是 React + Vite单页面应用（SPA）截至2026年5月，新Lovable应用可能使用 TanStack 从服务端渲染 (SSR) 开始 由默认。 SSR 对 web 很好，但 Capacitor 包含一个 静态构建 ——一个包含 HTML、CSS 和 JavaScript 的文件夹，根目录有一个 index.html 在其根部 —— 的文件夹。该文件夹将在设备上运行的应用程序中发送。

一个 SSR 应用程序期望在每个请求上由服务器渲染页面。手机里没有服务器，所以对于 Capacitor 你想要 静态，客户端渲染的输出.

要做什么：

• 从头开始： 要求 Lovable 一个 单页应用 (SPA) 或跳过 SSR 以便你得到一个静态 dist/ 文件夹。
• 已在 TanStack Start (SSR) 中： 配置它以预渲染或输出静态 SPA。唯一的硬性要求是包含静态构建文件夹的文件夹。 index.html.
• Legacy Next.js Lovable 项目： 使用 静态导出 — 输出到 out/ 而不是 dist/.

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

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

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

1. 打开你的 Lovable 项目在浏览器中
2. 点击 升级 (右上角) 如果需要,然后打开 Git 在左侧菜单
3. 选择 GitHub并授权 Lovable, 链接你的账户
4. Lovable 创建一个仓库并自动推送你的应用

✅ 成功: 访问 github.com/YOUR-USERNAME/your-app 显示您的应用程序的 code。

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

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

下载并安装 Cursor

1. 访问 <a href="https://cursor.sh">cursor.sh</a> 步骤 2 — 设置游标并克隆您的项目 下载适合你的操作系统的版本
2. 按照安装向导安装Cursor
3. 安装完成后打开Cursor

配置Cursor

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

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

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

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

5. 允许命令执行 — 启用鼠标以为您运行命令:

在鼠标中克隆您的存储库

1. 在鼠标中按 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 tab 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

通常情况下， 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 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/步骤 5 — 添加 __CAPGO_KEEP_0__ 和原生平台 index.html.

Capacitor 包含您的 web 应用程序在真实的 iOS 和 Android 外壳中 — 无需重写。

Capacitor wraps your web app in real iOS and Android shells — no rewrite needed.

按

(Mac) 或 Command+K (Windows) 并询问： Ctrl+K AI 将要求您

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

应用程序名称 or 和 应用程序ID (例如 com.yourcompany.myapp).

方法 2：手动安装

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

当提示时：

选择一个您实际拥有的包 ID。 包 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

No CocoaPods needed. Capacitor 8使用Swift Package Manager自动管理iOS依赖。

✅ Success: ios/ 和 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 您不需要 Mac 或本地 Xcode/Android Studio pipeline 即可交付。

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

__CAPGO_KEEP_0__ Builder

• __CAPGO_KEEP_0__ Builder
• Android Keystore Generator
• iOS UDID Finder — 在 iPhone 上注册您的开发构建

查看 管理凭据 and 在 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

✅ Success: 签名构建完成，您可以在真实设备上安装它。

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

如果您有 Mac 或想要在云构建之前进行模拟器测试:

For iOS

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

Open the iOS project in Xcode

方法 2：手动命令

npx cap open ios

第一次 Xcode 设置:

1. 从设备下拉菜单中选择模拟器（例如 iPhone 15）
2. For real devices: enable 自动管理签名 并选择您的Apple开发者团队
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. 在设备管理器中创建一个模拟器（例如Pixel 6，API 33+）
3. 点击绿色 ▶️ 运行按钮 — 第一次构建需要 5–15 分钟

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

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

步骤 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 或 3000 在 Capacitor 中， npm run dev 如果这是您想要的

3. 打印。

npx cap copy

✅ 实时重载已启用 Edits to your web code hot-reload on the device or simulator.

您对 Web 的编辑将在设备或模拟器上实时重载。

A Capacitor plugin lets JavaScript call real device features. We’ll add the Camera plugin so users can snap a photo — something a browser tab cannot do reliably.

方法 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 Builder 才能在设备上正常工作。

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

步骤 12 — 添加 Capgo Live Updates

每个本地更改通常需要通过应用商店审查。 Capgo Live Updates context":"Page/area：Live updates 产品页面。角色：短的 UI 标签或导航项。见于：页面 live-update.astro。保留 Capgo 产品/品牌和开发者术语完全不变。消息键 `live_update_hero_badge` (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();

提交、推送并运行一个新的Capgo Builder构建，以便更新器SDK在本机shell中可用。

发布后上传Web包:

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

查看 Capgo Live Updates文档.

为了自动上传每次有人点击 发布 在Lovable中，请遵循 从Lovable自动Capgo Live Updates使用GitHub Actions.

✅ 成功: 更新器插件已安装并 notifyAppReady() 在启动时运行。

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

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

许多可爱的应用程序已经处理底部内边距，但使用固定顶部填充（如 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或可爱中询问：

“在手机上，应用内容会在顶部状态栏下运行。添加” env(safe-area-inset-top) “到每个页面头部的顶部填充，保持现有的填充为最小。” max()“使用”

“将修复通过无线更新发送” “— 这是纯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全屏显示”.

第 14 步 — 准备您的应用商店列表

您的应用已构建，安装并可推送即时更新。将应用发布到公共商店主要是 paperwork：

• 应用图标 — iOS 需要 1024×1024px（无透明度），Google Play 需要 512×512px
• 截图 — 苹果要求 iPhone 6.9”（1320×2868px）截图
• 应用名称、副标题、描述、关键词
• 隐私政策 URL — 两家商店都需要，甚至对于免费应用
• 年龄等级 — 每个控制台都有一个问卷
• 数据收集披露 — Apple Privacy Nutrition Labels 和 Google Data Safety

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

“live” 之前的剩余内容：

1. Google Play closed testing (个人帐户创建于 2023 年 11 月 13 日之后): 在生产访问之前，至少 12 个测试者在 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 … 确保 capacitor.config.ts 在dist （对于 Vite， out （对于 Next.js 静态导出）
• “此 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 使用调试模式签名的 APK 被 Google Play 拒绝。 使用带有你的 keystore 的发布构建。
• 部署被拒绝 — 版本已经存在 — 在本地项目中升级版本/构建号并重新构建。

对于 Capgo Builder 问题，请参阅 本地构建故障排除 和 实时更新调试.

结论

您将一个可爱的Web应用转换为本地iOS和Android — 在云中构建而无需Mac，具有实时相机功能和布局修复并通过无线电发送。 这是困难部分完成了。

下一步

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

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

资源

• Lovable 文档
• Capacitor 文档
• Capgo 原生构建
• Capgo — Capacitor 应用实时更新
• 在 Windows 上构建 iOS
• Next.js 静态导出

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

如果您正在使用 将可爱的应用转换为 iOS 和 Android 的 Capacitor 为了计划原生插件工作，连接它到 Capgo 插件目录 Capgo 插件目录中的产品工作流程 Capacitor 由 Capgo 提供的插件 Capacitor 由 Capgo 提供的插件中的实现细节 Capgo 原生构建 为Capgo原生构建中的产品工作流程 从Windows构建iOS 无需Mac即可在云端构建iOS。