Einführung
Lieblingsapp ist eine AI-App-Bauanlage, die Anfragen in Minuten in funktionierende React-Apps verwandelt. Sie können schnell im Browser ausliefern — aber was, wenn Sie Ihre App auf dem App Store und Google Play haben möchten, wo sie auf dem Homescreen sitzt wie jede andere native App?
Dieses Leitfaden führt durch den gesamten Weg: Ausgabe aus Lovable, die Web-App mit __CAPGO_KEEP_0__ umwickeln Capacitor, binäre iOS- und Android-Dateien im Cloud mit __CAPGO_KEEP_0__ Builder erstellen Capgo-Bauer , eine echte native Funktion hinzufügen und eine Layout-Korrektur über die Luft mit __CAPGO_KEEP_0__ Live Updates durchführen Capgo Live Updates.
Wir verwenden Cursor durchgängig — seine KI kann die meisten Terminal-Befehle für Sie ausführen, wenn Sie sie manuell nicht eingeben möchten.
Zeitaufwand: ca. 1–2 Stunden zum ersten Mal, hauptsächlich Einrichtung des Kontos und Warten auf Cloud-Builds.
Am Ende haben Sie:
- Eine native iOS- und Android-App, die aus der Cloud erstellt wurde — kein Xcode oder Android Studio im Hauptpfad
- Die App läuft auf einem echten Gerät (TestFlight, direkte Installation oder Play-Interner Test)
- Eine funktionierende Kamerafunktion, die nur eine native App bieten kann
- Live-Updates konfiguriert, damit UI- und CSS-Fixes ohne Store-Überprüfung verschickt werden
Voraussetzungen
| Anforderung | Details |
|---|---|
| Ein Computer | Mac, Windows oder Linux — Cloud-Builds funktionieren von jedem Betriebssystem aus |
| Ein code-Editor | Cursor (empfohlen) oder VS Code |
| Node.js | 24 LTS (zuletzt — herunterladen von nodejs.org) Git) |
| Git | Klonen Sie Ihren Lovable-Repo von GitHub. |
| Capgo Konto | Free signup — Cloud-Builds und Live-Updates |
Kosten (nur für öffentliche Veröffentlichung):
| Artikel | Kosten |
|---|---|
| Apple-Entwickler-Programm | 99 $/Jahr |
| Google Play Console | 25 $/Einzahlung |
| Cursor Pro | 20 $/Monat (optional, aber empfohlen für die Ausführung von AI-Befehlen) |
| Capgo | Freit tariff verfügbar; Bezahlpläne für Produktionsmaßstab |
Optional (lokaler Simulator nur):
| Werkzeug | Wozu |
|---|---|
| Xcode (~15 GB, macOS nur) | iOS-Simulator auf Ihrem Mac |
| Android Studio (~1 GB + SDKs) | Android-Emulator |
Sie können beide überspringen. Der Hauptweg in dieser Anleitung baut im Cloud und installiert auf echten Geräten ohne sie.
Eine kurze Anmerkung zu Lovable und Frameworks
Bevor Sie code berühren, wissen Sie, dass die Art der Web-App, die Lovable generiert, den mobilen Einhüllung beeinflusst.
Für eine lange Zeit war das Standard von Lovable ein React + Vite-Einseitige Anwendung (SPA)Ab Mai 2026 können neue Lovable-Anwendungen standardmäßig TanStack Start mit serverseitiger Rendering (SSR) verwenden SSR ist großartig für die Webanwendung, aber Capacitor umhüllt eine statische Ausgabe — ein Ordner mit HTML, CSS und JavaScript mit einem index.html an seiner Spitze — die innerhalb der App auf dem Gerät verschickt wird.
Eine SSR-Anwendung erwartet, dass eine Server-Seite Seiten auf jeder Anfrage rendern. Es gibt keinen Server in einem Telefon, also möchten Sie für Capacitor stattdessen statische, client-seitig gerenderte Ausgabe.
Was tun:
- Von vorneherein: Bitte Lovable um eine Einseitige Anwendung (SPA) oder um das SSR zu umgehen, um statische
dist/folder. - Bereits auf TanStack Start (SSR): Configure it to pre-render or output a static SPA. The only hard requirement is a static build folder containing
index.html. - Erfolgreiche Next.js-Lieblingsprojekte: Use — geht in den — geht die Ausgabe aus
out/anstatt vondist/.
Unabhängig vom Framework, das Sie verwenden, zeigen Sie Capacitor's webDir an diesem Ordner. Für eine Vite-SPA ist das der dist.
Schritt 1 — Exportieren Sie Ihre bezaubernde App in GitHub
Bezaubernd hält Ihre code in seinem Editor, bis Sie GitHub verbinden.
- Öffnen Sie Ihr Bezaubernd-Projekt im Browser
- Klicken Sie Upgrade (oben rechts), falls erforderlich, dann öffnen Sie Git im linken Menü
- Wählen Sie GitHub, Lovable autorisieren und Ihren Account verknüpfen
- Lieblingsanwendung erstellt einen Repository und pusht Ihre App automatisch




✅ Erfolg: Besuchen github.com/YOUR-USERNAME/your-app zeigt Ihre App’s code.
Schritt 2 — Setzen Sie den Cursor und klonen Sie Ihr Projekt
Bevor wir mit Ihrer code lokal arbeiten können, benötigen Sie einen code Editor. Wir empfehlen CursorEine AI-gestützte Editor, der für Sie Befehle im Terminal ausführen kann.
Herunterladen und Installieren von Cursor
- Besuchen Sie cursor.sh und laden Sie die Version für Ihr Betriebssystem herunter
- Installieren Sie Cursor, indem Sie die Installationsoberfläche befolgen
- Einmal installiert, öffnen Sie den Cursor

Konfigurieren Sie Cursor für die AI-Entwicklung
Konfigurieren Sie Cursor vorher, um den besten Erfolg zu erzielen:
- Kaufe eine Cursor-Planung — Während Cursor eine kostenlose Ebene bietet, bietet ein Pro-Plan (20 $/Monat) Ihnen unbeschränkte AI-Vervollständigungen, Zugriff auf Claude und GPT-4 sowie Befehlsausführung
- Öffnen Sie die Cursor-Einstellungen indem Sie auf
Command+,(Mac) oderCtrl+,(Windows)

- KI-Modelle aktivieren — Make sure AI features are enabled:

- Wählen Sie Ihr bevorzugtes Modell — Wählen Sie Claude oder GPT-4 für die besten Ergebnisse:

- Kommandoausführung zulassen — Cursor aktivieren, um Befehle für Sie auszuführen:

Klonen Sie Ihren Repository in Cursor
- In Cursor, drücken Sie
Shift+Command+PMac: oderShift+Ctrl+PWindows: , um das Befehlsfeld zu öffnen - Tippen Sie "clone" und wählen Sie Git: Klonen"
- Fügen Sie Ihre GitHub Repository-URL ein:
https://github.com/YOUR-USERNAME/your-lovable-app.git - Wählen Sie einen Ordner, in dem Sie das Projekt speichern möchten

- Cursor wird Ihr Projekt klonen und öffnen

Schritt 3 — Installieren Sie Abhängigkeiten und lokal ausführen
Method 1: Verwendung von Cursor AI (Empfohlen)
- Öffnen Sie die AI-Taste von Cursor, indem Sie
Command+K(Mac) oderCtrl+K(Windows) - Tippen Sie die folgende Befehlszeile ein:
Install Homebrew, Node.js and npm on my system, then install dependencies and run the dev server
Die AI detektiert automatisch Ihr Betriebssystem, installiert Node.js, führt npm install, und startet den Entwicklungs-Server mit npm run dev.

Method 2: Manuelle Installation
Öffnen Sie das Terminal in Cursor, indem Sie Shift+Command+T (Mac) oder Shift+Ctrl+T Windows, dann:
Für 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
Für Windows:
- Herunterladen Sie das 24 LTS Installationsprogramm von nodejs.org
- Das Installationsprogramm ausführen
- Öffnen Sie das Terminal und führen Sie:
cd your-lovable-app
npm install
npm run dev

Lovable-Anwendungen laufen typischerweise auf http://localhost:8080 or http://localhost:5173 — verwenden Sie die Adresse, die Ihr Terminal ausgibt.
Drücken Sie Ctrl + C um die Entwicklungs-Server zu beenden, wenn Sie bereit sind, fortzufahren.
✅ Erfolg: Ihre App öffnet sich im Browser mit funktionierender Benutzeroberfläche.
Schritt 4 — Vorbereitung der statischen Produktionsvorlage
Capacitor benötigt eine Produktionsversion, bevor Sie native Plattformen hinzufügen.
React + Vite (die meisten Lovable-Apps)
Methode 1: Mit Cursor AI (Empfohlen)
Drücken Sie Command+K (Mac) oder Ctrl+K (Windows) und fragen Sie:
Configure vite.config for Capacitor mobile deployment with base './' and production build to dist
Methode 2: Manuelle Konfiguration
Bestätigen vite.config.ts verwendet eine relative Basis, sodass Assets innerhalb des nativen WebView geladen werden:
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
export default defineConfig({
plugins: [react()],
base: './',
build: {
outDir: 'dist',
},
})
Erstellen und überprüfen:
npm run build
Sie sollten ein Verzeichnis mit dist/ Ordner mit index.html Lovable.dev-Statikexport erfolgreich

Legacy Next.js Lovable Projekte
Wenn Ihr Repository Next.js verwendet, fragen Sie Cursor:
Add a static export script to package.json and configure next.config.js for mobile export with Capacitor
Oder folgen Method 2: Manual Configuration Für die vollständige next.config Setup, verwenden Sie dann webDir: 'out' in Capacitor anstatt dist.
✅ Erfolg: Eine statische Build-Ordner existiert (dist/ oder out/) with index.html.
Schritt 5 — Fügen Sie Capacitor und Native Plattformen hinzu
Capacitor wraps your web app in real iOS and Android shells — no rewrite needed.
Methode 1: Verwendung von Cursor AI (Empfohlen)
(Mac) oder Command+K (Mac) oder Ctrl+K (Windows) und fragen Sie:
Install Capacitor CLI, initialize it for my app with webDir dist, and add iOS and Android platforms
Die AI wird nach Ihrem App-Namen und Bundle-ID (z.B. com.yourcompany.myapp).

Methode 2: Manuelle Installation
npm install @capacitor/core @capacitor/cli
npx cap init
Wenn Sie dazu aufgefordert werden:
| Aufforderung | Beispiel | Hinweise |
|---|---|---|
| Anwendungsname | Mein liebes App | Zeigt sich unter dem App-Icon |
| Anwendungs Paket ID | com.yourcompany.meineapp | Umgekehrter Domänenstil — cannot change after store publish |
| Verzeichnis für Web-Assets | dist |
Use out für die statische Exportierung von Next.js |
Wählen Sie eine Paket-ID, die Ihnen gehört. Paket-IDs sind weltweit einzigartig. Verwenden Sie eine rückwärts-domänen-basierte ID auf der Grundlage einer von Ihnen kontrollierten Domäne von Anfang an – Änderungen später bedeuten Find- und Ersetzen überall. ios/ und android/ und neu aufzubauen.
npm run build
npm install @capacitor/ios @capacitor/android
npx cap add ios
npx cap add android
npx cap sync

Capacitor konfigurieren
Methode 1: Mit Cursor AI (Empfohlen)
Cursor fragen:
Update capacitor.config.ts to use dist as webDir and set up for HTTPS
Für Next.js-Statikexport, fragen Sie es, es zu verwenden out anstatt.
Methode 2: Manuelle Konfiguration
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;
Erstellen und Synchronisieren
Methode 1: Mit Cursor AI (Empfohlen)
Cursor sagen:
Build the production web app and sync it with Capacitor platforms
Methode 2: Manuelle Befehle
npm run build
npx cap sync

Ihr Projekt sieht jetzt so aus:
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
Keine CocoaPods erforderlich. Capacitor 8 verwendet den Swift Package Manager für iOS-Abhängigkeiten automatisch.
✅ Erfolg: ios/ und android/ Schritte 6 — Überprüfen Sie Ihr Sync finished.
__CAPGO_KEEP_0__ Der Builder kompiliert aus Ihrem Git-Repository, also .gitignore
Capgo Builder kompiliert aus Ihrem Git-Repository, also ios/ und android/ Schritt 6 — Überprüfen Sie Ihr. Ein häufiger Fehler ist das Ignorieren von ihnen an der Repo-Root.
Bestätigung:
- Root
.gitignoreignoriertnode_modulesunddistsich selbst (die Cloud rekonstruiertdistwährend Web-Builds) ios/undandroid/sind nicht ignoriert Erfolg:
✅ __CAPGO_KEEP_0__ git status zeigt ios/ und android/ bereit, zu verpflichten (nicht ignoriert).
Schritt 7 — Commit und Push
git add .
git commit -m "Add Capacitor and native iOS/Android platforms"
git push
✅ Erfolg: Ihr GitHub-Repository zeigt die ios/ und android/ Ordner.
Schritt 8 — Mit dem Capgo-Builder Store-fertige Binärdateien erstellen
Sie benötigen keinen Mac oder eine lokale Xcode/Android Studio-Pipeline, um zu verschicken. Capgo-Builder komponiert, signiert und kann iOS- und Android-Builds aus dem Cloud bereitstellen.
Konfiguration von 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
Speichere Anmeldeinformationen einmal. Nutze unsere kostenlose Tools, wenn du Hilfe bei ihrer Erstellung benötigst.
- iOS-Zertifikatsgenerator
- Android-Keystore-Generator
- iOS-UDID-Finder — Registrieren Sie Ihr iPhone für Entwicklungsbauten
Siehe Verwaltung von Anmeldeinformationen und iOS von Windows bauen.
Eine Cloud-Build anfordern
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
Build-Protokolle fließen in Ihrem Terminal ein. Mit App Store Connect konfiguriert, können iOS-Bauten automatisch auf TestFlight hochgeladen werden.
Installieren auf einem echten Gerät:
- iOS: TestFlight (empfohlen) oder eine Entwicklungsversion mit Ihrem Geräte-UDID registriert
- Android: Google Play interne Testspur oder eine signierte Release-APK/AAB
✅ Erfolg: Ein signiertes Build wird abgeschlossen und Sie können es auf einem echten Gerät installieren.
Schritt 9 — Optional: Testen Sie lokal in Xcode oder Android Studio
Wenn Sie einen Mac haben oder Emulator-Tests vor Cloud-Builds bevorzugen:
Für iOS
Methode 1: Mit Cursor AI (Empfohlen)
Open the iOS project in Xcode
Methode 2: Manuelle Befehlszeile
npx cap open ios

Erste Xcode-Einrichtung:
- Ein Simulator aus der Geräte-Auswahl (z.B. iPhone 15) auswählen
- Für echte Geräte: Zertifikatsverwaltung aktivieren und Ihre Apple-Entwickler-Team auswählen und wählen Sie Ihr Apple-Entwickler-Team
- Klicken Sie auf den ▶️ Play-Button — die erste Build dauert 5–10 Minuten

Für Android
Methode 2: Manuelle Befehlsausführung
Open the Android project in Android Studio
Android Studio öffnet Lovable-Projekt
npx cap open android

Erstezeit Android Studio Einrichtung:
- Install missing SDK packages if prompted
- Erstellen Sie einen Emulator im Gerätemanager (z. B. Pixel 6, API 33+)
- Klicken Sie auf den grünen ▶️-Button — die erste Build dauert 5–15 Minuten

Use local IDEs for day-to-day debugging. Use Capgo Builder wenn Sie signierte Release-Dateien benötigen
✅ Erfolg: Die App öffnet sich im Simulator oder Emulator und zeigt Ihr Lovable-Inhalt.
Schritt 10 — Live Reload aktivieren (Entwicklung)
Erhöhen Sie die Iterationsgeschwindigkeit, indem Sie die native Shell auf Ihre lokale Dev-Server zeigen.
Methode 1: Verwendung von Cursor AI (Empfohlen)
Sagen Sie Cursor:
Set up live reload for Capacitor development with my local IP address
Methode 2: Manuelle Einrichtung
- Finden Sie Ihre lokale IP-Adresse:
# macOS
ipconfig getifaddr en0
# Windows
ipconfig
- Aktualisieren
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;
Verwende Port 8080 oder 3000 Wenn das, was Sie wollen, gedruckt wird. npm run dev prints.
- Live-Neuladen aktiviert
npx cap copy

✅ Success: Änderungen an Ihrem Web code laden sich auf dem Gerät oder im Simulator neu.
Schritt 11 — Hinzufügen einer nativen Funktion: Die Kamera
Ein Capacitor-Plugin ermöglicht es JavaScript, echte Gerätefunktionen aufzurufen. Wir fügen das Camera-Plugin hinzu, damit Benutzer ein Foto machen können — etwas, das ein Browserfenster nicht zuverlässig tun kann.
Methode 1: Verwendung von Cursor AI (Empfohlen)
Erzählen Sie Cursor:
Add the Capacitor Camera plugin with iOS and Android permissions and a button to take a photo
Methode 2: Manuelle Installation
npm install @capacitor/camera
npx cap sync
iOS — hinzufügen ios/App/App/Info.plist innerhalb der obersten Ebene <dict>:
<key>NSCameraUsageDescription</key>
<string>This app uses the camera to take photos.</string>
Android — fügen Sie innerhalb hinzu <manifest> innerhalb 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;
}

Ein Plugin hinzufügen erfordert ein ein frisches natives Build durch Capgo Builder vorher, damit es auf Geräten funktioniert.
✅ Erfolg: Kamera code kompiliert und npx cap sync endet ohne Fehler.
Schritt 12 — Capgo Live Updates hinzufügen
Jede native Änderung geht normalerweise durch die App-Store-Überprüfung. Capgo Live Updates Änderungen an deiner App-Layer (HTML, CSS, JS, Bilder) über das Air übertragen in Minuten.
Installiere den Updater in deiner ersten Veröffentlichung so Sie sind nie auf eine Überprüfung warten, wenn Sie ein Fix ausliefern müssen.
npm install @capgo/capacitor-updater
npx cap sync
Hinzufügen 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;
Initialisieren Sie in Ihrer App-Einstieg (z.B. src/main.tsx):
import { CapacitorUpdater } from '@capgo/capacitor-updater';
void CapacitorUpdater.notifyAppReady();
Commit, pushen und einen neuen Capgo Builder-Build ausführen, damit der Updater SDK im native Shell ist.
Hochladen Sie Web-Bundles nach dem Launch:
npm run build
npx @capgo/cli@latest bundle upload --channel production
Siehe Capgo Live-Updates-Dokumentation.
Um dies automatisiert zu machen, wenn jemand auf "Veröffentlichen" klickt Veröffentlichen in Lovable, folge Automatisieren Sie Capgo Live Updates mit GitHub Aktionen.
✅ Success: Updater-Plugin ist installiert und notifyAppReady() läuft bei Start.
Schritt 13 — Statusleistenabstand mit einem Live Update korrigieren
Im echten iPhone sitzt Ihr Header möglicherweise unter der Statusleiste (Uhrzeit und Batterie). Moderne Capacitor zeichnet sich durch eine Randlosigkeit aus, daher muss Ihre App dies respektieren safe area insets: env(safe-area-inset-top), -bottom, -left, -right.
Viele Lovable-Apps behandeln bereits die untere Einstellung, verwenden aber eine feste obere Padding (wie pt-6ohne das obere Inset
1. Bestätigen viewport-fit=cover 1. Confirm index.html:
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
2. Korrigiere oberste Überschriften — verwenden max() um Web-Abstand zu erhalten und auf Notch-Geräten zu wachsen:
/* Before */
padding-top: 1.5rem;
/* After */
padding-top: max(1.5rem, env(safe-area-inset-top));
In Cursor oder Lovable, fragen Sie:
“Die App-Inhalte laufen unter der Statusleiste oben auf dem Mobilgerät. Fügen Sie
env(safe-area-inset-top)zum oberen Abstand jeder Seitekopf hinzu, indem Siemax(), wobei der bestehende Abstand als Mindestwert bleibt.”
3. Verschicken Sie die Korrektur über die Luft: — dies ist reinen CSS, kein natives Neubauen erforderlich:
git add .
git commit -m "Fix top safe area on mobile"
git push
npm run build
npx @capgo/cli@latest bundle upload --channel production
Zwingen Sie das Gerät, sich zu schließen, öffnen Sie es erneut, warten Sie ~15–30 Sekunden und öffnen Sie es erneut. Der Kopf sollte sich unter der Statusleiste befinden — korrigiert, ohne App-Store-Überprüfung.
✅ Erfolg: Der obere Inhalt klärt sich nach der Anwendung des OTA-Bundles von der Statusleiste.
Für tiefergehende Layoutarbeiten siehe @capgo/tailwind-capacitor und Capacitor Kantenlos-Display.
Schritt 14 — Vorbereitung Ihres Store-Eintrags
Ihre App ist gebaut, installierbar und Sie können sofort Updates bereitstellen. Der Start in den öffentlichen Stores ist hauptsächlich Papierkram:
- App-Icon — 1024×1024px für iOS (keine Transparenz), 512×512px für Google Play
- Bildschirmfotos — Apple erfordert iPhone 6.9“ (1320×2868px) Bildschirmfotos
- App-Name, -Untertitel, -Beschreibung, -Schlüsselwörter
- Datenschutzrichtlinien-URL — erforderlich von beiden Stores, auch für kostenlose Apps
- Altersfreigabe — Fragebogen in jedem Konsolenfenster
- Datenverarbeitungserklärungen — Apple Datenschutz-Nährwertetiketten und Google Daten-Sicherheit
Methode 1: Verwendung von Cursor AI (Empfohlen)
Set up app icons and splash screens for my Capacitor app
Methode 2: Manuelle Einrichtung
npm install -D @capacitor/assets
# Add assets/icon.png (1024x1024) and assets/splash.png (2732x2732)
npx capacitor-assets generate
npx cap sync

Was bleibt vor 'live':
- Google Play geschlossene Testversion (Kontoerstellungen nach dem 13. November 2023): mindestens 12 Tester für 14 aufeinanderfolgende Tage vor der Produktion. iOS hat kein Äquivalent.
- Zur Prüfung einreichen — Apple ~3–5 Tage, Google ~3–7 Tage nachdem die Testanforderungen erfüllt sind.
Siehe unsere erste App-Bewertungsleitfaden zur vollständigen Liste.
Häufige Fehler (und wie Sie sie beheben)
Could not find the web assets directory: ./dist— Ausführennpm run buildvorhernpx cap adderstnpx cap syncoderwebDirincapacitor.config.tspasst auf Ihre Framework-Ausgabe an ("distfür Vite,outfür Next.js-Statikexport).- “Diese App-ID … ist nicht verfügbar” — Bundle-IDs sind global eindeutig. Wählen Sie einen rückwärts-domänen-Bezeichner, den Sie kontrollieren.
- iOS-Build fehlt nach Änderung der Bundle-ID — Die ID in Ihrem native Projekt muss der Apple App Store Connect entsprechen. Find-and-replace überall
ios/undandroid/, commit, neu aufbauen. - Weißer Bildschirm bei Start — Setzen Sie
base: './'in der Vite-Konfiguration, rebuilden und ausführennpx cap sync. - Inhalt unter der Statusleiste — Fügen Sie
viewport-fit=coverundenv(safe-area-inset-top)Puffer (Schritt 13). - APK im Debug-Modus signiert — Google Play lehnt Debug-Builds ab. Verwenden Sie einen Release-Build, der mit Ihrem Keystore signiert ist.
- Die Bereitstellung wurde abgelehnt — Version existiert bereits — Versionsnummer/Buildnummer in native Projekten aktualisieren und neu erstellen.
Für Capgo Builder-Probleme siehe Native Build-Fehlertreiber und Lebendliche Updates-Debugging.
Conclusion
You took a Lovable web app to native iOS and Android — built in the cloud without a Mac, with a real camera feature and a layout fix shipped over the air. That’s the hard part done.
Nächste Schritte
- Capgo Live Updates — Schiffe UI- und Kopie-Fixes ohne auf die Store-Bewertung warten
- Capgo Builder — Automatisiere Release-Builds in CI
- Capgo Plugin-Verzeichnis — Biometrie, Push-Benachrichtigungen, Geolocation und mehr
- Zugehörige Anleitungen: Base44 nach Mobilgeräten · Bolt.new nach Mobilgeräten
Registrieren Sie sich für ein kostenloses Capgo Konto um Live Updates und Cloud-Native-Builds zu aktivieren.
Ressourcen
- Lieblingsdokumentation
- Capacitor Dokumentation
- Capgo native Builds
- Capgo — Live Updates für Capacitor-Anwendungen
- iOS von Windows aus erstellen
- Next.js-Statikexport für mobile Geräte
Weitermachen von Convert Your Lovable App to iOS and Android mit Capacitor
Wenn Sie __CAPGO_KEEP_0__ verwenden Convert Your Lovable App to iOS and Android mit Capacitor Um native Plugin-Arbeit zu planen, verbinden Sie es mit Capgo Plugin-Verzeichnis für den Produktworkflow in Capgo Plugin-Verzeichnis Capacitor Plugins durch Capgo für die Implementierungsdetails in Capacitor Plugins durch Capgo Capgo native Builds für den Produktworkflow in Capgo Native Builds und iOS von Windows erstellen für Cloud-IOS-Builds ohne Mac