Vue वेबसाइट होस्ट करें
क्लाइंट-रेंडर्ड Vue ऐप को स्टैटिक फाइलों के रूप में होस्ट किया जा सकता है। सर्वर रेंडरिंग, सर्वर कंपोनेंट और API हैंडलर के लिए वह रनटाइम चाहिए जो आपका फ्रेमवर्क इस्तेमाल करता है।
चरण
- प्रोजेक्ट के बिल्ड और डिप्लॉयमेंट के निर्देश पढ़ें। देखें कि आउटपुट स्टैटिक है या उसके लिए हमेशा चालू रहने वाला सर्वर चाहिए।
- लॉकफाइल वाले Vite-आधारित स्टैटिक प्रोजेक्ट को लोकल मशीन या CI में नीचे दिए कमांड से बिल्ड करें। दूसरे बिल्ड टूल के कमांड और आउटपुट फोल्डर अलग हो सकते हैं।
- बिल्ड करने से पहले प्रोडक्शन API URL और बेस पाथ सेट करें। ब्राउज़र के एनवायरनमेंट वेरिएबल बंडल में पब्लिक हो जाते हैं, इसलिए उनमें सीक्रेट कभी न रखें।
- बने हुए आउटपुट फोल्डर के अंदर की फाइलें डोमेन के डॉक्यूमेंट रूट में अपलोड करें। आम तौर पर Vite प्रोजेक्ट में यह dist होता है, सोर्स प्रोजेक्ट या डिपेंडेंसी फोल्डर नहीं।
- हिस्ट्री-बेस्ड राउटिंग हो, तो वेब सर्वर को ऐसे कॉन्फ़िगर करें कि असली फाइलें और API रूट जैसे हैं वैसे रहें, और ऐप के रूट पर एंट्री HTML लौटे। अपने वेब सर्वर के लिए सही नियम सपोर्ट से पूछें। Apache का नियम Nginx को कॉन्फ़िगर नहीं करता।
- HTTPS चालू करें, फिर नेस्टेड रूट सीधे खोलकर, रिफ्रेश करके, गायब एसेट और API रिक्वेस्ट जांचें। सिर्फ सर्वर पर चलने वाले डिप्लॉयमेंट मोड के लिए VPS इस्तेमाल करें।
सामान्य Vite बिल्ड
bash
npm ci
npm run buildसमस्या होने पर
खाली पेज दिखे, तो अक्सर एसेट का बेस पाथ गलत होता है या कोई API रिक्वेस्ट फेल हुई होती है। नेस्टेड रूट पर 404 आए, तो सर्वर में सही फॉलबैक नियम चाहिए। डेवलपमेंट या प्रीव्यू सर्वर को प्रोडक्शन होस्टिंग की तरह कभी इस्तेमाल न करें।
संबंधित गाइड
अंतिम समीक्षा
2026-10-28