نشر Vue

انشر مشروع
Vue ثابتًا

ارفع مخرجات Vue أو Vite أو Vue CLI أو Nuxt static وانشرها مع مسار احتياطي لوضع history وHTTPS ونطاق مخصص عند الحاجة.

راجع خطوات الإعداد
vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
plugins: [vue()],
// Use a deploy-safe asset base
base: './',
build: {
outDir: 'dist'
}
})
جاهز لـ Vite وwebpack

اعرف أي مجلد Vue ترفعه

تبدأ معظم مشاكل نشر Vue قبل الاستضافة: مجلد مخرجات خاطئ أو base path خاطئ أو بناء لم تتم معاينته محليًا.

Vite + Vue

npm run build
output: dist/

يضع Vite مخرجات الإنتاج في dist افتراضيًا. إذا غيّر الإعداد build.outDir أو base فارفع المجلد الفعلي واختبر روابط الأصول.

Vue CLI

npm run build
output: dist/

مخرجات Vue CLI الثابتة تكون غالبًا في dist. إذا كان التطبيق سيخدم من مسار فرعي، يجب أن يطابق publicPath بنية الرابط النهائية.

مخرجات Nuxt الثابتة

nuxi generate
output: .output/public أو dist/

يمكن لـ Nuxt إنتاج ملفات ثابتة، لكن مسارات الخادم وواجهات API تحتاج بيئة تشغيل. ارفع فقط الملفات العامة المولدة لهذا المسار.

ما الذي يحتاجه Vue Router في وضع history

الروابط النظيفة تستحق الحفاظ عليها

تعمل مسارات hash في أي مكان تقريبًا، لكنها تبدو كحل التفافي وتضع # في الروابط التي يشاركها المستخدمون أو تقيسها الفرق.

يعطي Vue Router في وضع history مسارات نظيفة مثل /about أو /dashboard/settings. المقابل أن الاستضافة يجب أن تعرف كيف تقدم index.html للمسارات التي ليست ملفات فعلية.

كيف يتعامل DeployPages مع history mode

عندما لا يطابق الطلب أصلًا ثابتًا حقيقيًا، يقدم DeployPages ملف index.html الجذري ويترك Vue Router يحدد الشاشة داخل المتصفح.

  • الزيارات المباشرة إلى المسارات الداخلية لا تفشل فورًا.
  • تُعاد الوثيقة الرئيسية كرد احتياطي.
  • يبدأ Vue العمل، يقرأ الرابط الحالي، ثم يعرض المسار الصحيح.

فحوص إنتاج Vue

قد يعمل تطبيق Vue في dev ثم يفشل بعد الرفع. هذه الفحوص تكشف الأعطال الأكثر شيوعًا قبل نشر الرابط.

المسار الأساسي

في Vite افحص base، وفي Vue CLI افحص publicPath. القيم الخاطئة تظهر غالبًا كملفات CSS أو JS أو صور مفقودة.

مسار احتياطي لوضع history

افتح مسارًا داخليًا مباشرة وحدّث الصفحة. إذا بقيت الصفحة تعمل، فالمسار الاحتياطي يقوم بدوره.

مخرجات ثابتة فقط

DeployPages يقدم ملفات ثابتة. API routes وserver middleware وسلوك SSR تحتاج واجهة خلفية أو بيئة تشغيل منفصلة.

معاينة محلية حقيقية

استخدم خادم معاينة محلي لمخرجات الإنتاج. فتح dist/index.html عبر file:// قد يخفي مشاكل أو يخلق مشاكل غير واقعية.

مسار نشر Vue

01

ابنِ الأصول الثابتة

شغّل بناء الإنتاج في Vite أو Vue CLI أو وضع Nuxt الثابت حتى يخرج التطبيق كملفات يقرأها المتصفح مباشرة.

02

اعثر على مجلد المخرجات

معظم مشاريع Vue وVite تخرج إلى dist. مشاريع Nuxt الثابتة ترفع غالبًا .output/public أو dist حسب الإعداد.

في مشاريع Nuxt الثابتة، يكون المجلد المناسب غالبًا .output/public أو dist حسب إعداد المشروع.

03

ارفع وتحقق من الروابط

ارفع مجلد المخرجات كاملًا ثم اختبر الروابط الداخلية والتنقل ومسارات الأصول بعد أن يصبح الموقع مباشرًا.

مشاكل شائعة عند نشر Vue

Fix 01

تحديث مسار داخلي يرجع 404

يستخدم Vue Router وضع history، لكن الاستضافة تبحث عن ملف حقيقي. استخدم المسار الاحتياطي لتطبيق SPA حتى تعود المسارات غير المعروفة إلى index.html.

Fix 02

ملفات CSS أو JS ترجع 404

افحص Vite base أو Vue CLI publicPath، وتأكد من رفع مجلد dist كاملًا بما فيه assets.

Fix 03

التطبيق يعمل في hash mode لا history mode

hash mode يبقي التوجيه بعد # في المتصفح. history mode يعطي روابط نظيفة لكنه يحتاج مسارًا احتياطيًا من الاستضافة للزيارات المباشرة.

Fix 04

مخرجات Nuxt تفتقد سلوك الخادم

يمكن استضافة مخرجات Nuxt الثابتة كملفات. مسارات الخادم وserver middleware وSSR تحتاج بيئة تشغيل منفصلة.

أسئلة عن نشر Vue

لماذا ترجع ملفات CSS وJS خطأ 404؟

غالبًا بُنيت مسارات الأصول لرابط أساسي مختلف، أو لم يُرفع مجلد assets. في Vite راجع base، وفي Vue CLI راجع publicPath.

هل يدعم ذلك Nuxt؟

نعم للمخرجات الثابتة. أنشئ الموقع الثابت أولًا ثم ارفع المجلد العام الناتج. هذا ليس مسارًا مناسبًا لـ Nuxt SSR أو server API routes.

هل أستخدم hash mode أم history mode؟

استخدم history mode عندما تريد روابط نظيفة والاستضافة تدعم إعادة المسارات غير المعروفة إلى index.html. hash mode أبسط في الاستضافة لكنه يضع # في كل مسار.

هل أرفع مشروع Vue المصدر؟

لا. ارفع مجلد مخرجات الإنتاج، غالبًا dist. مشروع المصدر يحتوي ملفات تطوير واعتمادات لا تقدم مباشرة للزوار.

هل تبقى حالة Pinia أو Vuex بعد التحديث؟

ليس تلقائيًا. تحديث المتصفح يمسح الحالة الموجودة في الذاكرة. احفظ الحالة المهمة في localStorage أو بإضافة persistence مناسبة.

هل يمكن استعادة إصدار سابق؟

نعم. يحتفظ DeployPages بتاريخ النشر حتى تستطيع العودة إلى مخرجات ثابتة سابقة عند الحاجة.