Tutorials

Lovable 做手机应用:2026 年做出 iOS 和 Android 应用

一份创始人指南,教你把一个 Lovable 项目发布成可安装的 PWA,或者用 Capacitor 包成一个真正的原生应用,上架 App Store 和 Google Play。

The Lovable AI Review Editorial Desk
The Lovable AI Review Editorial Desk
Independent research on AI app builders
2026年7月22日 16 分钟阅读
Lovable 做手机应用:2026 年做出 iOS 和 Android 应用
太长不看

是的,Lovable 项目能做成真正的手机应用。每个 Lovable 项目用的那套 React 和 Vite 栈,能干净地塞进 Capacitor,由它把应用包进一个原生的 iOS 或 Android 外壳,提交到 App Store 和 Google Play。要是你不需要上架分发,一个 PWA 一个下午就能给你一个可安装的主屏图标,完全不用原生工具链。

每周都有创始人打开 Lovable,一个周末做出一个原型,然后问同一个问题:这东西能不能也跑在手机上?搜索数据能印证。像 'can lovable ai make mobile apps'、'lovable ios app'、'lovable capacitor' 这类词每个月都出现在工具里,而网上多数答案已经过时了一年。这就是当下的答案,写给那些想把项目放上主屏、又不想请一个移动开发者的创始人。

短版本:Lovable 本身不生成 Swift、Kotlin 或 React Native 代码。它生成一个 React 和 Vite 的网页应用。那个网页应用能通过两条受良好支持的路子变成手机应用,两条官方文档都覆盖了。你选哪条,取决于你是需要上架分发,还是只要一个快速的安装体验。

Lovable 能做手机应用吗?

能,但措辞很重要。Lovable 做的是一个现代网页应用。现代网页应用在手机上跑得很好,而到了 2026 年,把它们包成一个原生二进制的工具链已经成熟到,单干的创始人经常把 Lovable 项目发到两大商店。Lovable 不会替你做的,是编译成一个原生代码库。那件事由外壳来做,而 Lovable 团队推荐的外壳是 Capacitor,一个来自 Ionic 团队的开源项目。

一句话的答案

Lovable 不直接做手机应用,但一个 Lovable 项目可以一个下午发布成一个可安装的网页应用,或者用 Capacitor 包成一个真正的 iOS 和 Android 应用,一个周末就能提交到商店。

两条路:PWA 还是 Capacitor

在你写下一行原生配置之前,先想清楚这两条路你到底需要哪条。多数创始人用力过猛,一上来就上 Capacitor,可要是用 PWA,十分之一的时间就上线了。

问题PWACapacitor
配置耗时一个下午一个周末,没用过 Xcode 的话更久
从哪安装浏览器的'添加到主屏幕'App Store 和 Google Play
是否需要 Mac不需要iOS 构建需要
是否需要 Apple 开发者账号不需要需要,每年 99 美元
推送通知iOS 上受限完整的原生支持
相机、传感器、生物识别受限通过插件完整原生访问
更新流程即时,用户永远看到最新版每次发布都要过商店审核
最适合内部工具、仪表盘、MVP 验证面向消费者的应用、商店露出、原生功能

路线一:可安装的网页应用(PWA)

渐进式网页应用(PWA)就是一个普通网站,加了一点点额外的元数据,让浏览器提出把它安装到手机主屏。装好之后,它从一个应用图标全屏启动,藏起浏览器的外壳,表现得跟原生应用足够接近,多数用户看不出区别。

这是从一个 Lovable 项目到手机上最快的路。没有 Xcode,没有签名证书,没有商店审核。你加一个网页应用 manifest 和一组图标,走正常的 Lovable 发布流程发布,用户就能在 iOS 的 Safari 或 Android 的 Chrome 里装上它。

你实际要加的东西

  • 一个 manifest 文件(public/manifest.webmanifest),带应用名、简称、主题色、背景色、display 模式 'standalone' 和图标条目。
  • public/ 下面一组图标,至少要有 192x192 和 512x512。
  • 一小组 head 标签(link rel='manifest'、theme-color、apple-touch-icon),在应用的 HTML 入口里加一次。

直接告诉 Lovable:'把这个项目做成可安装的 PWA。加一个 manifest、手机图标、主题色和 head 标签。不要加 service worker。' Lovable 会照内建的 PWA skill 来做,默认发布只带 manifest 的版本。对多数创始人这是对的选择。离线模式是另一个功能,只有当用户明确要的时候才值得加。

iOS 上安装是两下点击的事

在 iPhone 上,用户在 Safari 里点分享按钮,选'添加到主屏幕'。Android 上的 Chrome 和 Edge 会自动弹出安装横幅。两条路都不需要应用商店。

路线二:用 Capacitor 做原生应用

Capacitor 把你的网页应用包进一个原生的 iOS 或 Android 项目。从手机的角度看,结果就是一个真正的原生应用。它在 App Store 或 Play Store 里有一条记录、一个 bundle ID、代码签名,以及对相机、推送通知、生物识别、文件系统等原生插件的完整访问。

底下,Capacitor 是薄薄的一层,在 iOS 上把你的网页应用装进一个 WKWebView,在 Android 上装进一个 Android WebView。你的 React 代码原样跑。需要的时候,插件把 JavaScript 调用桥接到原生 API。要是你用过 Ionic,这就是同一个外壳,只是不带 Ionic 的 UI 框架。

什么时候 Capacitor 是对的选择

  • 为了分发或可信度,你需要出现在 App Store 或 Google Play。
  • 你需要真正的推送通知,尤其在 PWA 支持很薄的 iOS 上。
  • 你需要相机、生物识别、后台任务或蓝牙这类原生功能。
  • 你想要一个原生的启动画面、原生的分享面板,或者能扛过冷启动的深链接。

你该选哪条路?

对多数 Lovable 项目,老实的答案是:先从 PWA 起步,只有当一个真实的产品信号告诉你该升级时,才上 Capacitor。对早期软件来说,上架分发没创始人想的那么重要,而且在 PWA 上迭代是即时的,因为没有审核周期。要是用户开始要推送通知,或者应用认真地需要相机,同一份 Lovable 代码库不用重写就能用 Capacitor 包起来。

一步步:Capacitor 配置

让 Lovable 给项目加上 Capacitor,它会跑标准的脚手架。要是你导出到 GitHub 之后自己来接,步骤又短又无聊,而这正是你想从一个构建系统里得到的。

  1. 用 Export to GitHub 按钮把 Lovable 项目导出到你自己的 GitHub 仓库,然后克隆到本地。
  2. 跑 npm install 装依赖,再加上 Capacitor:npm install @capacitor/core @capacitor/cli @capacitor/ios @capacitor/android。
  3. 用 npx cap init 初始化,设一个 app ID(反向 DNS 风格,比如 com.yourbrand.yourapp)和 app 名字。
  4. 加上你要的平台:npx cap add ios 和 npx cap add android。
  5. 用 npm run build 构建网页应用,再用 npx cap sync 同步进原生外壳。
  6. 在模拟器或真机上跑:npx cap run ios(需要一台装了 Xcode 的 Mac)或 npx cap run android(需要 Android Studio)。

开发时的热重载

开发期间,Capacitor 支持把原生外壳指向 Lovable 的预览网址,这样改动不用重新构建就能出现在手机上。在 capacitor.config 里加一个 server 块,填上预览网址和 cleartext true,然后在构建发布版之前把它删掉。

上架 App Store 和 Play Store

一旦应用能在真机上跑,上架就跟任何别的原生应用一个流程。Lovable 生成的代码,Apple 和 Google 不会区别对待。要紧的是外壳应用有一个图标、一个启动画面、一个真实的隐私政策网址,和一个你自己拥有的 bundle ID。

  • iOS:加入 Apple Developer Program(每年 99 美元),创建一个 App ID 和描述文件,在 Xcode 里归档应用,通过 App Store Connect 提交。2026 年多数应用的审核要 24 到 72 小时。
  • Android:付一次性的 25 美元 Play Console 费用,在 Android Studio 里做一个签名的发布包,上传到 Play Console,填好内容分级和数据安全表单,提交。审核通常当天出。
  • 两个商店都要:在你 Lovable 托管的站点上挂一个隐私政策。两个商店都会拒掉没有隐私政策的应用,也都允许你直接指向一个像 /privacy-policy 的网址。

真实数字:每条路的成本和时间

这些是我们自己提交时的数字,好让你在动手前先算算预算。PWA 这条路,除了你本来就在付的 Lovable 套餐,不花别的钱。Capacitor 这条路会加上商店费用和第一次配置的那一天。

  • PWA:不额外花钱,大约 2 到 3 小时的活(manifest、图标、在真机上测在线网址),一发布就上线。
  • Android 上的 Capacitor:一次性 25 美元,第一个签名包大约 4 小时,审核通常当天。
  • iOS 上的 Capacitor:每年 99 美元,第一次归档含证书大约 6 到 8 小时,审核 24 到 72 小时。
  • 之后的每次发布:一旦 npx cap sync 成了你的习惯,每个平台大约 20 分钟。

举个实际例子。我们内部的预约工具在 Lovable 里一个周末就做好了,周一作为 PWA 发给需要它的那五个人,直到两个月后推送通知成了硬需求,才用 Capacitor 包起来。这中间没有一个组件被重写,因为 Capacitor 端的是同一份构建好的网页包。

  1. 从导出的 Lovable 仓库里:npm i @capacitor/core @capacitor/cli
  2. npx cap init "My App" com.yourdomain.myapp --web-dir=dist
  3. npm run build
  4. npx cap add ios 和 npx cap add android
  5. 每次构建或 git pull 之后跑 npx cap sync
  6. npx cap open ios(或 npx cap open android)去归档并提交

我们踩过的坑

  • 别用 Lovable 编辑器里的预览来测 PWA 能不能安装。预览的 iframe 会拦住安装提示。发布到在线网址,在真机上测。
  • iOS Safari 在安装时会缓存 PWA 的 manifest 字段。用户装好后再改 start_url、id 或 scope,得让他们重装,所以这些一次定好就别动。
  • 别加 service worker,除非你确实要离线支持。它给创始人带来的陈旧缓存问题,比它解决的还多。
  • 每次 git pull 之后都跑 npx cap sync。跳过它,原生外壳就会一直端上一次构建好的网页包。
  • iOS 上的 Capacitor 推送通知,你需要在 Apple Developer 后台配 APNs 证书,不只是那个 JS 插件。第一次预留几个小时。
打开 Lovable,把你的手机应用发出去

先走 PWA 这条路。两条免费消息,不用信用卡。以后想用 Capacitor 包起来,不用重写一行。

想更深入了解底下这个工具,读我们的 Lovable 测评 和 Lovable 使用场景 汇总。要是你还在纠结用哪个建站工具,我们的 Lovable 对比 Bolt 讲了各家怎么处理手机这道题。

Lovable AI 能做手机应用吗?

不直接做。Lovable 生成一个 React 和 Vite 的网页应用。那个网页应用可以一个下午发布成可安装的 PWA,或者用 Capacitor 包成一个真正的 iOS 和 Android 二进制,提交到 App Store 和 Google Play。两条路都有官方支持。

我需要会 Swift 或 Kotlin 吗?

不需要。Capacitor 把你现有的 React 代码包进一个原生外壳。除非你想写一个自定义插件,否则你根本碰不到 Swift 或 Kotlin,而多数创始人从不写。

上架 App Store 需要一台 Mac 吗?

iOS 构建需要。Xcode 只在 macOS 上跑,而 Apple 要求从 Xcode 或 Transporter 上传构建。Android 构建在任何操作系统上都行。

上架要花多少钱?

Apple 的开发者计划每年收 99 美元。Google 的 Play Console 收一次性的 25 美元。Capacitor 本身免费且开源。

我的 Lovable 后端在手机应用里还能用吗?

能。Lovable Cloud 后端是网页应用通过 HTTPS 访问的,而 Capacitor 在原生外壳里加载的是同一个网页应用。登录、数据库、存储和边缘函数全都不用改就能用。

我能加推送通知吗?

在 Capacitor 上能,通过 Capacitor Push Notifications 插件在 iOS 和 Android 上都有完整的原生支持。在 PWA 上,通知在 Android 上跑得好,在 iOS 上受限。要是推送是你产品的核心,就用 Capacitor。

我的应用会因为是用 Lovable 做的而被拒吗?

不会。Apple 和 Google 审的是成品二进制,不是它怎么做出来的。数不清的网页包壳应用在两个商店上架。让应用被拒的是缺隐私政策、功能太单薄或盗用商店素材,不是工具链。

简报

Lovable 的精华,每周一封。

深度测评、创始人案例和增长打法。没有水分。

不发垃圾邮件。一键退订。

跟我们一起动手

用 Lovable 开始搭建

打开 Lovable,写下第一个提示词,把那个想了太久的东西做出来。

用 Lovable 开始搭建

继续阅读