פרסום Vue סטטי

פרסמו את
פרויקט Vue

העלו את הפלט הסטטי מ-Vue, Vite, Vue CLI או Nuxt ופרסמו אותו עם תמיכה במצב 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 שגוי או build שלא נבדק בתצוגה מקדימה מקומית.

Vite + Vue

npm run build
output: dist/

Vite שם את build הפרסום ב-dist כברירת מחדל. אם התצורה משנה build.outDir או base, העלו את תיקיית הפלט בפועל ובדקו את כתובות הנכסים.

Vue CLI

npm run build
output: dist/

build סטטי של Vue CLI נפרס בדרך כלל מ-dist. אם האפליקציה מוגשת מנתיב משנה, publicPath צריך להתאים למבנה ה-URL הסופי.

פלט סטטי של Nuxt

nuxi generate
output: .output/public או dist/

Nuxt יכול לייצר פלט סטטי, אבל נתיבים שמרונדרים בשרת וממשקי API של שרת צריכים runtime. העלו רק את הקבצים הסטטיים הציבוריים שנוצרו לתהליך הזה.

מה Vue Router במצב history באמת צריך

כדאי לשמור על כתובות URL נקיות

מסלולי Hash עובדים כמעט בכל מקום, אבל כתובות אתרים עם # קטעים נראות כמו פתרון עוקף והן מסורבלות לשיתוף, סטטיסטיקות וליטוש מוצר.

מצב history של Vue Router נותן נתיבים נקיים כמו /about או /dashboard/settings. הפשרה היא ששכבת ההגשה צריכה לדעת להחזיר index.html עבור מסלולים שאינם קבצים אמיתיים.

כיצד DeployPages מטפל במצב היסטוריה

כאשר בקשה לא תואמת לנכס סטטי אמיתי, DeployPages משרת את השורש index.html ומאפשר לנתב Vue לפתור את התצוגה הסופית בדפדפן.

  • ביקורים ישירים במסלולים מקוננים אינם נכשלים מיידית.
  • מסמך הבסיס מוחזר כתגובת החלפה.
  • Vue עולה, קורא את ה-URL הנוכחי ומציג את המסלול הנכון.

בדיקות פרסום ל-Vue

אפליקציית Vue יכולה לעבוד ב-dev ועדיין להיכשל לאחר ההעלאה. בדיקות אלו תופסות את הכשלים הנפוצים לפני שהקישור יוצא.

נתיב בסיס

עבור Vite, אשרו את base. עבור Vue CLI, אשרו publicPath. ערכים שגויים מופיעים בדרך כלל כ-CSS, JS, גופנים או תמונות חסרים.

Fallback ל-history mode

פתחו מסלול מקונן ישירות ורעננו אותו. אם הדף נשאר פעיל, ה-fallback עושה את העבודה.

פלט סטטי בלבד

DeployPages מגיש קבצים סטטיים. API routes, middleware והתנהגות SSR בלבד צריכים backend נפרד או runtime.

תצוגה מקדימה מקומית

השתמשו בשרת תצוגה מקדימה מקומי אמיתי עבור build פרסום. פתיחת dist/index.html עם file:// יכולה להסתיר או ליצור בעיות שאינן תואמות לפרסום.

תהליך פרסום Vue

01

בניית נכסים סטטיים

הריצו build סטטי ב-Vite, Vue CLI או Nuxt כך שהאפליקציה תצא כקבצים שדפדפן יכול לטעון ישירות.

02

מאתרים את תיקיית הפלט

רוב פרויקטי Vue ו-Vite מוציאים פלט ל-dist. פרויקטים סטטיים של Nuxt בדרך כלל מפרסמים את ‎.output/public או את ספריית dist שנוצרה בהתאם לתצורה.

build סטטי של Nuxt בדרך כלל מעלה ‎.output/public או dist בהתאם לתצורת הפרויקט שלך.

03

מעלים ומאמתים קישורים

העלו את כל תיקיית הפלט ואמתו קישורים עמוקים, ניווט בנתב ונתיבי נכסים לאחר שהאתר פעיל.

בעיות פרסום נפוצות של Vue

Fix 01

רענון מסלול מקונן מחזיר 404

Vue Router משתמש במצב history, אך ההגשה הסטטית מחפשת קובץ אמיתי. השתמשו ב-SPA fallback כך שנתיבי מסמכים לא ידועים יחזירו index.html.

Fix 02

קבצי CSS או JS מחזירים 404

בדקו את Vite base או Vue CLI publicPath. ודאו גם שהעליתם את תיקיית dist המלאה, כולל הנכסים שנוצרו.

Fix 03

האפליקציה עובדת עם מצב hash אך לא במצב היסטוריה

מצב hash ממשיך לנתב אחרי # בדפדפן. מצב history משתמש בכתובות URL נקיות וצריך fallback של שרת עבור ביקורים ישירים.

Fix 04

פלט Nuxt חסר התנהגות שרת

פלט Nuxt סטטי יכול להתארח כקבצים. נתיבי שרת Nuxt, תוכנת תווך של שרת והתנהגות SSR בלבד דורשים זמן ריצה של שרת.

שאלות נפוצות על פרסום Vue

מדוע קבצי CSS וJS שלי מחזירים 404?

זה בדרך כלל אומר שנתיבי נכסים נבנו עבור URL base אחר, או שספריית הנכסים לא הועלתה. ב-Vite בדקו base; ב-Vue CLI בדקו publicPath.

האם זה תומך ב-Nuxt?

כן עבור פלט סטטי. תחילה צרו את האתר הסטטי, ולאחר מכן העלו את התיקייה הציבורית שנוצרה. DeployPages אינו היעד הנכון עבור עיבוד שרת של Nuxt או נתיבי API שרצים בשרת.

האם עלי להשתמש במצב Hash או במצב היסטוריה?

השתמשו במצב history כשאתם רוצים כתובות URL נקיות ושכבת ההגשה תומכת בחזרה ל-index.html. מצב hash קל יותר לאירוח, אבל משאיר # בכל מסלול בצד הלקוח.

האם עלי להעלות את פרויקט המקור Vue?

לא. העלו את תיקיית פלט הפרסום, בדרך כלל dist. פרויקט המקור מכיל קובצי פיתוח ותלויות שלא נועדו להגשה ישירה.

האם Pinia או state של Vuex ישרדו רענון?

לא אוטומטית. רענון דפדפן מאפס state שנשמר בזיכרון הלקוח. שמרו מידע חשוב ב-localStorage או בתוסף persistence מתאים.

האם אוכל לחזור לגרסה הקודמת?

כן. DeployPages שומר היסטוריית פרסומים כך שאפשר לחזור ל-build סטטי קודם בעת הצורך.