Einführung
Lovable ist ein AI-gestützter App-Baukasten, der Anfragen in Minuten in funktionierende React-Apps umwandelt. Sie können schnell im Browser ausliefern — aber was, wenn Sie Ihre App auf dem App Store und Google Play haben möchten, auf dem Bildschirm sitzen wie jede andere native App?
In diesem Leitfaden wird der gesamte Weg beschrieben: Export aus Lovable, die Web-App mit __CAPGO_KEEP_0__ umhüllen, mit __CAPGO_KEEP_1__ Builder signierte iOS- und Android-Apps im Cloud erstellen und über die Luft Fixes verteilen. Capacitor, binäre iOS- und Android-Anwendungen im Cloud mit Capgo-Bauer (kein Mac erforderlich), eine echte native Funktion hinzufügen und eine Layout-Korrektur über die Luft mit Capgo Live Updates.
Wir verwenden Cursor durchgängig — sein AI 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 Kontobereitstellung und Warten auf Cloud-Builds.
Am Ende haben Sie:
- Eine native iOS- und Android-Anwendung, die aus der Cloud erstellt wurde — kein Xcode oder Android Studio im Hauptpfad.
- Die App läuft auf einem realen 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 (latest — download from nodejs.org) |
| Git | Um Ihre Lovable-Repo von GitHub |
| Capgo-Konto | Kostenloser Registrierung — Cloud-Builder und Live-Updates |
Kosten (nur für öffentliche Veröffentlichung):
| Artikel | Kosten |
|---|---|
| Apple-Entwickler-Programm | 99 €/Jahr |
| Google Play Console | 25 Euro einmalig |
| Cursor Pro | 20 Euro/Monat (optional, aber empfohlen für die Ausführung von AI-Befehlen) |
| Capgo | Frei verfügbar; Bezahlpläne für die Produktionsgröße |
Optional (nur lokaler Simulator):
| Tool | Warum |
|---|---|
| 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.
Ein Schnellblick auf Lovable und Frameworks
Bevor Sie code berühren, wissen Sie, dass Die Art der Web-App, die Lovable generiert, beeinflusst die mobilen Verpackung.
Ein langer Zeitraum war Lovable’s Standard ein React + Vite single-page app (SPA)Seit Mai 2026 können brandneue Lovable-Anwendungen standardmäßig TanStack Start mit server-seitiger Rendering (SSR) verwenden SSR ist großartig für die Web-App, aber Capacitor umhüllt eine statische Konstruktion — ein Ordner mit HTML, CSS und JavaScript mit einer index.html in seiner Wurzel — das innerhalb der App auf dem Gerät läuft.
Eine SSR-App erwartet, dass eine Server-Seiten-App Seiten auf jedem Anfrage rendern. Es gibt keinen Server innerhalb eines Telefons, also willst du für Capacitor static, client-seitig gerenderte Ausgabe.
Was tun:
- Von vorne los: Lass dich von Lovable für eine eine Single-Page-App (SPA) oder um die Server-Seiten-App zu umgehen, um stattdessen eine statische
dist/Ordner. - Bereits auf TanStack Start (SSR): Konfiguriere es, um vorher zu rendern oder eine statische SPA auszugeben. Die einzige harte Anforderung ist ein statischer Build-Ordner, der enthält
index.html. - Legacy Next.js Lovable Projekte: Benutzen Sie statistische Export — geht die Ausgabe an
out/anstattdist/.
Wie auch immer Sie ein Framework verwenden, zeigen Sie auf das Verzeichnis von Capacitor. webDir Für eine Vite-SPA ist das Verzeichnis dist.
Schritt 1 — Exportieren Sie Ihre geliebte App zu GitHub
code hält Ihre App in seinem Editor, bis Sie GitHub verbinden.
- Öffnen Sie Ihr Lovable-Projekt im Browser
- Klicken Sie Aktualisieren (oben rechts) wenn nötig, dann öffnen Sie Git in der linken Menüzeile
- Wählen Sie GitHubLovable autorisieren und Ihr Konto verbinden
- Lovable erstellt einen Repository und Ihre App wird automatisch gepusht




✅ Erfolg: Besuchen Sie github.com/YOUR-USERNAME/your-app zeigt Ihnen die code Ihres Apps.
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 Cursor, einen durch künstliche Intelligenz angetriebenen Editor, der für Sie Befehle im Terminal ausführen kann.
Cursor herunterladen und installieren
- Besuchen Sie cursor.sh und laden Sie die Version für Ihr Betriebssystem herunter
- Installieren Sie Cursor, indem Sie dem Installation-Assistenten folgen
- Öffnen Sie Cursor, nachdem Sie ihn installiert haben

Cursor für die AI-Entwicklung konfigurieren
Für die beste Erfahrung konfigurieren Sie Cursor, bevor Sie beginnen:
- Ein Cursor-Plan kaufen — 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 die Ausführung von Befehlen
- Cursor-Einstellungen öffnen durch Drücken von
Command+,(Mac) oderCtrl+,(Windows)

- AI-Modelle aktivieren — Stellen Sie sicher, dass die AI-Funktionen aktiviert sind:

- Wählen Sie Ihre bevorzugte Modelle — Wählen Sie Claude oder GPT-4 für beste Ergebnisse:

- Erlauben Sie die Ausführung von Befehlen — Aktivieren Sie Cursor, um Befehle für Sie auszuführen:

Klonen Sie Ihr Repository in Cursor
- In Cursor drücken Sie
Shift+Command+P(Mac) oderShift+Ctrl+P(Windows) um das Befehlsfenster zu öffnen - Typen Sie „clone“ und wählen Sie Git: Klonen“
- Fügen Sie bitte Ihren 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 — Abhängigkeiten installieren und lokal ausführen
Methode 1: Mit Cursor AI (Empfohlen)
- Öffnen Sie die AI-Taste von Cursor, indem Sie
Command+K(Mac) oderCtrl+K(Windows) - Geben Sie die folgende Befehl ein:
Install Homebrew, Node.js and npm on my system, then install dependencies and run the dev server
Die AI wird automatisch Ihren Betriebssystem, Node.js installieren und ausführen npm installund starte den Entwicklungs-Server mit npm run dev.

Methode 2: Manuelle Installation
Öffne das Terminal-Fenster in Cursor, indem du Shift+Command+T (Mac) oder Shift+Ctrl+T (Windows) drückst, 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:
- Lade das 24 LTS Installationsprogramm von nodejs.org
- Run the installer
- Ö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 oder http://localhost:5173 — verwenden Sie die Adresse, die Ihr Terminal ausgibt.
Drücken Sie Ctrl + C um die Entwicklungsserver zu beenden, wenn Sie bereit sind, fortzufahren.
✅ Erfolg: Ihre Anwendung öffnet sich im Browser mit funktionierender Benutzeroberfläche.
Schritt 4 — Vorbereiten der statischen Produktionsversion
Capacitor benötigt eine Produktionsversion, bevor Sie native Plattformen hinzufügen.
React + Vite (die meisten lieblichen Apps)
Methode 1: Verwendung von Cursor AI (Empfohlen)
Drücken Command+K (Mac) oder Ctrl+K (Windows) und fragen:
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, so dass 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 dist/ Ordner mit index.html an seiner Wurzel sehen.

Erfolgreiche Next.js-Lieblingsentwickler-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 Sie Konvertieren Sie Ihre Next.js-Anwendung in eine mobile App Für die vollständige next.config Konfiguration, verwenden Sie dann webDir: 'out' in Capacitor instead of dist.
✅ Einzelner Erfolg: Ein statisches Build-Verzeichnis existiert (dist/ oder out/) mit index.html.
Schritt 5 — Fügen Sie Capacitor und Native Plattformen hinzu
Capacitor hüllt Ihre Web-App in echte iOS- und Android-Shell-Instanzen ein — kein Umbau erforderlich.
Methode 1: Verwendung von Cursor AI (Empfohlen)
Drücken Sie 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
Der AI wird nach Ihrem Anwendungsname und Bundles-ID (z.B. com.yourcompany.myapp).

Methode 2: Manuelle Installation
npm install @capacitor/core @capacitor/cli
npx cap init
Wenn gefragt:
| Aufforderung | Beispiel | Hinweise |
|---|---|---|
| Anwendungsname | Mein Liebes App | Unter dem App-Icon angezeigt |
| App-Paket-ID | com.yourcompany.myapp | Umkehr-punkt-Style — kann nicht nach Veröffentlichung im App-Store geändert werden |
| Verzeichnis für Web-Assets | dist |
Benutzen Sie out für die statische Exportierung von Next.js |
Wählen Sie eine Package-ID, die Sie tatsächlich besitzen. Bundle-IDs sind global eindeutig. Verwenden Sie eine rückwärtsgeordnete Domänen-ID auf der Grundlage einer von Ihnen kontrollierten Domäne von Anfang an — Ändern Sie sie später bedeutet, finden und ersetzen Sie überall und neu bauen. ios/ und android/ und
npm run build
npm install @capacitor/ios @capacitor/android
npx cap add ios
npx cap add android
npx cap sync

Konfigurieren Sie Capacitor
Methode 1: Verwendung von Cursor AI (Empfohlen)
Befragen Sie Cursor:
Update capacitor.config.ts to use dist as webDir and set up for HTTPS
Für die statische Exportierung von Next.js, 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;
Build und Sync
Methode 1: Verwendung von Cursor AI (Empfohlen)
Sage Cursor:
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/ Ordner erscheinen und der Terminal zeigt Sync finished.
Schritt 6 — Überprüfen Sie .gitignore
Capgo Der Builder kompiliert aus Ihrem Git-Repository, also ios/ und android/ müssen eingereicht werden. Eine häufige Fehlhandlung ist, sie am Repo-Root zu ignorieren.
Bestätigen Sie:
- Wurzel
.gitignoreignoriertenode_modulesunddist(während Web-Aufbaus wird der Cloud wieder aufgebaut)distduring web builds) ios/undandroid/sind sie selbst werden nicht ignoriert werden
✅ Erfolg: git status zeigt ios/ und android/ bereit, zu committen (nicht ignoriert).
Schritt 7 — Commit und Push
git add .
git commit -m "Add Capacitor and native iOS/Android platforms"
git push
✅ Erfolg: Ihr GitHub-Repo zeigt die ios/ und android/ Ordner.
Schritt 8 — Erstellen Sie binäre Store-Ready-Dateien mit Capgo Builder
Sie benötigen keinen Mac oder eine lokale Xcode/Android Studio-Pipeline, um zu liefern. Capgo Builder __CAPGO_KEEP_0__ Builder kompiliert, signiert und kann iOS- und Android-Builds aus der Cloud hochladen.
Konfigurieren Sie 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
Speichern Sie die Signierungsanmeldeinformationen einmal. Wenn Sie Hilfe bei der Erstellung benötigen, nutzen Sie unsere kostenlose Tools:
- iOS-Zertifikatsgenerator
- Android-Keystore-Generator
- iOS-UDID-Finder — Registrieren Sie Ihr iPhone für Entwicklungsbauten
Siehe Konten verwalten und iOS von Windows aus erstellen.
Ein 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 streamen in Ihrem Terminal. Mit App Store Connect konfiguriert, können iOS-Builds automatisch auf TestFlight hochgeladen werden.
Installieren Sie 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 signierter Build ist abgeschlossen und Sie können ihn auf einem echten Gerät installieren.
Schritt 9 — Optional: Lokal in Xcode oder Android Studio testen
Wenn Sie ein Mac haben oder vorher Emulatortests vor Cloud-Builds durchführen möchten:
Für iOS
Methode 1: Mit Cursor AI (Empfohlen)
Open the iOS project in Xcode
Methode 2: Manuelle Befehlszeile
npx cap open ios

Erstmalige Xcode-Einrichtung:
- Wählen Sie ein Simulator aus dem Geräte-Auswahlfeld (z.B. iPhone 15)
- Für echte Geräte: Aktivieren Sie Automatisch das Signieren verwalten und wählen Sie Ihr Apple-Entwickler-Team
- Klicken Sie auf die ▶️ Play-Taste — die erste Build dauert 5–10 Minuten

Für Android
Methode 1: Verwendung von Cursor AI (Empfohlen)
Open the Android project in Android Studio
Methode 2: Manuelle Befehlszeile
npx cap open android

Erste Einrichtung von Android Studio:
- Installieren Sie fehlende SDK-Pakete, wenn angefordert
- Erstellen Sie einen Emulator im Gerätemanager (z.B. Pixel 6, API 33+)
- Klicken Sie auf den grünen ▶️-Startknopf — erste Build dauert 5–15 Minuten

Verwenden Sie lokale IDEs für den täglichen Debugging. Verwenden Sie Capgo-Builder Wenn Sie signierte Release-Dateien benötigen.
✅ Erfolg: Die App öffnet sich im Simulator oder Emulator und zeigt Ihr geliebtes Inhalt.
Schritt 10 — Lebendes Reload aktivieren (Entwicklung)
Erhöhen Sie die Iterationsgeschwindigkeit, indem Sie die native Shell auf Ihren lokalen Entwicklungs-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;
Verwenden Sie Port 8080 oder 3000 Wenn das so ist npm run dev druckt.
- Änderungen anwenden:
npx cap copy

✅ Erfolg: Änderungen an Ihrem Web code auf dem Gerät oder Simulator heißt wieder auf.
Schritt 11 — Hinzufügen einer nativen Funktion: Die Kamera
Ein Capacitor-Plugin ermöglicht es JavaScript, echte Gerätefunktionen aufzurufen. Wir fügen das Kamera-Plugin hinzu, damit Benutzer ein Foto machen können — etwas, das ein Browserfenster nicht zuverlässig kann.
Methode 1: Verwendung von Cursor AI (Empfohlen)
Sage 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 — zum 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> 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;
}

Zur Hinzufügung eines Plugins ist eine frische native Build durch Capgo Builder vorher erforderlich, bevor es auf Geräten funktioniert.
✅ Erfolg: Kamera code kompiliert und npx cap sync endet ohne Fehler.
Schritt 12 — Fügen Sie Capgo Live Updates hinzu
Jede native Änderung geht normalerweise durch die App-Store-Überprüfung. Capgo Live Updates __CAPGO_KEEP_0__ Live Updates drücken Änderungen an Ihrem App-Web-Schicht (HTML, CSS, JS, Bilder) innerhalb von Minuten über die Luft.
Installieren Sie den Updater in Ihrer ersten Veröffentlichung So sind Sie nie auf die Überprüfung angewiesen, wenn Sie eine Reparatur liefern müssen.
npm install @capgo/capacitor-updater
npx cap sync
Hinzufügen zu 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 führen Sie einen neuen Capgo Builder-Aufbau durch, damit der Updater SDK im native Shell ist.
Hochladen von Web-Bundles nach der Veröffentlichung:
npm run build
npx @capgo/cli@latest bundle upload --channel production
Siehe Capgo Live Updates-Dokumentation.
✅ Erfolg: Das Updater-Plugin ist installiert und notifyAppReady() läuft bei Start auf.
Schritt 13 — Statusleistenabstand mit Live-Update korrigieren
Bei einem echten iPhone sitzt Ihr Header möglicherweise unter dem Statusleistenbereich (Uhr und Batterie). Moderne Capacitor zeichnet sich bis an die Ränder, daher muss Ihre App die sicheren Bereichsabstände respektieren. Viele Lovable-Apps behandeln bereits den unteren Abstand, verwenden aber feste oberen Abstände (wie : env(safe-area-inset-top), -bottom, -left, -right.
) ohne den oberen Abstand. pt-61. Bestätigen Sie
in viewport-fit=cover in index.html:
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
2. Fix top Kopfzeilen — verwenden Sie max() um Web-Abstand zu halten und auf nichtigen 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:
“The app content runs under the status bar at the top on mobile. Add
env(safe-area-inset-top)“Die App-Inhalte laufen unter der Statusleiste oben auf dem Mobilgerät. Fügen Siemax()zur oberen Abstandspufferung jeder Seitekopf hinzu, wobei der bestehende Abstand als Minimalwert bleibt.”
3. Versenden Sie die Reparatur über die Luft — dies ist rein CSS, kein native Rebuild 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. Die Kopfzeile sollte sich unter der Statusleiste befinden — repariert ohne Store-Bewertung.
✅ Erfolg: Inhalt oben klärt die Statusleiste nach der Anwendung des OTA-Bundles.
Für tiefergehende Layoutarbeiten, siehe @capgo/tailwind-capacitor und Capacitor edge-to-edge-Anzeige.
Schritt 14 — Vorbereitung Ihres Store-Listings
Ihre App ist gebaut, installierbar und Sie können sofort Updates bereitstellen. Die Veröffentlichung 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
- URL der Datenschutzrichtlinie — erforderlich für beide Stores, auch für kostenlose Apps
- Altersfreigabe — Fragebogen in jedem Konsole
- Datenerfassungsmitteilungen — Apple-Privacy-Nährwertetiketten und Google-Datensicherheitsinformationen
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 (Konto erstellt nach dem 13. November 2023): mindestens 12 Tester für 14 aufeinanderfolgende Tage vor der Produktion Zugriff. iOS hat keine Äquivalent.
- Für die Überprüfung einreichen — Apple ~3–5 Tage, Google ~3–7 Tage nachdem die Anforderungen erfüllt sind.
Siehe unseren Leitfaden für die erste App-Bewertung für die vollständige Liste.
Häufige Fehler (und wie man sie behebt)
Could not find the web assets directory: ./dist— Ausführennpm run buildvornpx cap addodernpx cap syncStellen Sie sicher, dasswebDirincapacitor.config.tssich mit der Ausgabe Ihres Frameworks übereinstimmt (distfür Vite,outfür Next.js statische Exportierung).- “Diese App-ID … ist nicht verfügbar” — Bundle-IDs sind global eindeutig. Wählen Sie einen rückwärts-domänen-basierten ID, den Sie kontrollieren.
- iOS-Build fehlschlägt nach Änderung der Bundle-ID — Die ID in Ihrem native Projekt muss mit Apple App Store Connect übereinstimmen. Finden und ersetzen Sie überall.
ios/undandroid/, commit, rebuild. - Weißer Bildschirm bei der Startphase — Setzen Sie
base: './'in der Vite-Konfiguration, rebuild, und starten Sienpx cap sync. - Inhalt unter der Statusleiste — Fügen Sie hinzu
viewport-fit=coverundenv(safe-area-inset-top)Pufferung (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 — die Version existiert bereits — Erhöhen Sie die Versionsnummer/Buildnummer in native Projekten und erneut erstellen.
Für Capgo Builder-Probleme siehe Native Build-Troubleshooting und Live-Updates-Debugging.
Zusammenfassung
Sie haben eine liebenswerte Web-Anwendung zu nativen iOS- und Android-Anwendungen gemacht — im Cloud gebaut ohne Mac, mit einer echten Kamerafunktion und einer Layoutkorrektur, die über die Luft geschickt wurde. Das ist die harte Arbeit erledigt.
Nächste Schritte
- Capgo Live Updates — UI und Kopien ohne Wartezeit auf die Store-Überprüfung versenden
- Capgo Builder — Release Builds in CI automatisieren
- Capgo Plugin-Verzeichnis — Biometrie, Push-Benachrichtigungen, Geolocation und mehr
- Zugehörige Anleitungen: Base44 zu mobilen Geräten · Bolt.new zu mobilen Geräten
Sich für eine kostenlose Capgo-Konto anmelden um Live-Updates und cloudbasierte Builds zu aktivieren.
Ressourcen
- Liebenswerte Dokumentation
- Capacitor Dokumentation
- Capgo Nativbau
- Capgo — Live-Updates für Capacitor-Anwendungen
- iOS von Windows aus bauen
- Next.js statische Export für mobile Geräte
Weitermachen von Convert Your Lovable App zu iOS und Android mit Capacitor
Wenn Sie __CAPGO_KEEP_0__ verwenden Convert Your Lovable App zu iOS und Android mit Capacitor um Nativ-Plugin-Arbeit zu planen, verbinden Sie es mit Capgo Plugin-Verzeichnis für den Produktworkflow in Capgo Plugin-Verzeichnis, Capacitor Plugins von Capgo für die Implementierungsdetails in Capacitor Plugins von Capgo, Capgo Native Builds für den Produktworkflow in Capgo Native Builds, und iOS von Windows aus bauen für Cloud-IOS-Builds ohne Mac.