Capacitor: شاشة بيضاء

نص الخطأ

Capacitor app opens to a white screen. Chrome inspect: Failed to load resource: net::ERR_FILE_NOT_FOUND / Uncaught SyntaxError: Unexpected token '<'

السبب

يفتح WebView ملف index.html لكن ملفات JS وCSS لا تُحمَّل بسبب مسارات خاطئة أو يرمي أول سكربت خطأ.

الحل خطوة بخطوة

1. وصّل الهاتف بـ USB وافتح chrome://inspect على الحاسوب وراقب وحدة تحكم WebView.
2. إن بدأت المسارات بـ / فاكتب base: "./" في إعدادات البناء لتصير نسبية.
3. استخدم موجّهًا بنمط hash أو اضبط androidScheme: "https".
4. بعد كل تغيير نفّذ build ثم cap sync.
5. إن استخدمت إضافة فتأكد أن جزءها الأصلي (native) قد بُني.

أوامر للمثال

chrome://inspect/#devices
npm run build && npx cap sync android
# vite.config: base: "./"
# capacitor.config: server: { androidScheme: "https" }

كيف لا يتكرر

احتفظ بإعدادات بناء الجوال كملف تعريف منفصل واختبره على هاتف كل مرة.

المؤلف والترخيص: Nibras Code