Convert Your Lovable App to iOS and Android with Capacitor

介绍

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

本指南将指导您完成完整的路径：从可爱中导出，.wrap web应用程序 Capacitor，在云中构建签名的iOS和Android二进制文件 Capgo 构建器 Capacitor Capgo 实时更新.

我们使用 鼠标指针 在其AI中 — 如果您不愿意手动输入命令，它可以运行大多数终端命令。

所需时间: 第一次大约1-2小时，主要是账户设置和云构建等待。

最后，您将拥有:

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

前提条件

发布到公众的成本（仅此项）:

（仅限本地模拟器）：

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

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

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

很长一段时间，Lovable的默认设置是 一个React + Vite单页应用（SPA）. 从2026年5月开始，新版Lovable应用可能使用 TanStack Start，带有服务器端渲染（SSR） 在默认情况下。SSR 对于 Web 来说是很好的，但Capacitor包裹了一个 静态构建 ——一个包含HTML、CSS和JavaScript的文件夹，带有一个 index.html 根文件夹 —— 将在设备上安装在应用中。

一个SSR应用程序需要在每个请求时由服务器渲染页面。手机内部没有服务器，所以在Capacitor中你希望 静态，客户端渲染的输出.

要做的事情：

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

无论您使用什么框架，都将Capacitor指向 webDir 在那个文件夹中。对于一个Vite SPA，文件夹是 dist.

第1步 — 将您的可爱应用导出到GitHub

可爱会将您的code保存在其编辑器中，直到您连接GitHub

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

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

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

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

下载并安装Cursor

1. 访问 cursor.sh 并下载适合您的操作系统的版本
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: 克隆
3. 粘贴您的GitHub仓库URL： https://github.com/YOUR-USERNAME/your-lovable-app.git
4. 选择一个保存项目的文件夹

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

第 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

通常情况下, Lovable 应用程序在 http://localhost:8080 或 http://localhost:5173 — 在终端中打印的任何地址都可以使用。

Press Ctrl + C 继续时停止开发服务器。

✅ Success: 您的应用程序在浏览器中打开，UI正常工作。

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

Capacitor 需要生成生产版后才能添加原生平台。

__CAPGO_KEEP_0__ 需要在添加原生平台之前准备生产构建。

React + Vite (最受欢迎的可爱应用)

Press Command+K (Mac) 或 Ctrl+K (Mac) 或

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/存在一个静态构建文件夹（ index.html.

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

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

并

Press 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 包ID com.yourcompany.myapp).

__CAPGO_KEEP_0__初始化

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

方法2：手动安装

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

不需要 CocoaPods。 Capacitor 8 使用 Swift Package Manager 自动管理 iOS 依赖项。

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

第 6 步 — 检查您的 .gitignore

Capgo 构建器从您的 Git 存储库中编译，因此 ios/ 和 android/ 必须提交一个常见的错误是忽略它们在仓库根目录。

Confirm:

• Root .gitignore ignores node_modules and dist (云重建) dist themselves are
• ios/ and android/ not ignored Success:

✅ and 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构建器

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密钥库生成器
• iPhone 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： 测试飞行（推荐）或已注册设备 UDID 的开发构建
• Android： Google Play 内部测试轨道或已签名的发布 APK/AAB

✅ 成功： 已签名的构建完成，您可以在真机上安装它。

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

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

For iOS

对于 iOS

Open the iOS project in Xcode

方法 1：使用 Cursor AI (推荐)方法 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 進行日常 debug。使用 Capgo 构建器 當您需要簽名的發行版本時

✅ 成功: 應用程序在模擬器或模擬器中打開，顯示您的可愛內容。

第 10 步 — 啟用 Live Reload (Development)

通過將本機 dev server 指向本機 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 如果这是您想要的 npm run dev 应用更改：

3. 实时重载已启用

npx cap copy

✅ Success: Edits to your web code 在设备或模拟器中即时热重载。

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

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.

使用 Cursor AI (推荐)

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

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

告诉 Cursor:

npm install @capacitor/camera
npx cap sync

方法 2：手动安装 iOS ios/App/App/Info.plist —— 添加到 <dict>:

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

在顶级 Android <manifest> in 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 才能在设备上工作 通过 Capgo Builder 之前才能在设备上运行。

✅ Success: 第 12 步 — 添加 code Live Updates npx cap sync 每个原生变化通常需要经过应用商店审查

Capgo Live Updates

将更改推送到您的应用的 Web 层 (HTML、CSS、JS、图像) 在几分钟内 Capgo 实时更新 __CAPGO_KEEP_0__

__CAPGO_KEEP_0__ 当您需要发布修复时，不必等待审查。

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构建器构建，以便更新器SDK在本机shell中可用。

发布后上传web包:

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

查看 Capgo Live Updates文档.

为了自动上传每次点击 发布 在Lovable中遵循 自动Capgo Live Updates from Lovable with GitHub Actions.

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

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

在真实的iPhone上，顶部标题可能会 在 状态栏（时钟和电池）下。现代Capacitor绘制全屏幕， 因此您的应用程序必须尊严: env(safe-area-inset-top), -bottom, -left, -right.

安全区域内边距 pt-6许多可爱的应用程序已经处理底部内边距，但使用固定顶部填充（如

）而没有顶部内边距。 viewport-fit=cover 1. 确认 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));

In Cursor 或 Lovable 中询问:

“移动设备上应用内容在顶部状态栏下运行。将 env(safe-area-inset-top) 添加到每个页面标题顶部的填充，保持现有填充为最小。” max()3. 在空中传输修复:

—— 这是纯 CSS，Native 重建不需要: — 这里是纯 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

成功:

✅ Success: 对于更深入的布局工作，请参见

深入布局工作，见 @capgo/Tailwind-capacitor 和 Capacitor 全屏显示.

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

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

• 应用程序图标 — iOS 需要 1024×1024px（无透明度），Google Play 需要 512×512px
• 截图 — 苹果要求 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

“live”前的剩余内容：

1. Google Play关闭测试 (2023 年 11 月 13 日之后创建的个人帐户): 在生产访问之前至少 14 天连续测试 12 名测试者。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 确保 out 在匹配您的框架输出（例如，
• “这个 App ID … 不可用” — 选择一个你控制的反向域名 ID，确保全局唯一。
• iOS 构建失败后更改了 bundle ID — 在原生项目中找到并替换 Apple App Store Connect 中的 ID ios/ 和 android/, 提交、重建。
• 启动时白屏 — Set base: './' 状态栏下方的内容 npx cap sync.
• — 添加 — Add viewport-fit=cover 和 env(safe-area-inset-top) 填充 (步骤 13).
• 已签名的 APK — Google Play 拒绝调试构建。使用您的 keystore 签署一个发布构建。
• 部署被拒绝 — 版本已经存在 — 在本机项目中增加版本/构建号并重新构建。

对于 Capgo Builder 问题，请参见 本机构建故障排除 和 context:Capgo 营销网站。角色：短 UI 标签或导航项。见于：页面 trust.astro。消息键 `and` (And)..

Live Updates debug

结论

下一步

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

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

资源

• 可爱文档
• 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 构建。