Vue Academy · Lektion

Distribuera till hostingplattformar

Distribuera Vue-appar till statiska webbhotell och plattformar.

Lektion 2 av 313 steg

Distribuera till hostingplattformar är en gratis lektion i Vue Academy på CoddyKit. Detta är lektion 2 av 3. Du kan läsa vilka 3 lektioner som helst i den här lärvägen kostnadsfritt i sin helhet – därefter låser CoddyKit PRO upp alla lektioner, plus praktisk övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Den ingår i lärvägen för Vue Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i Vue Academy innehåller totalt 3 lektioner.

Publicera din app

En Vue-SPA byggs till statiska filer, så du kan hosta den på valfri statisk värd. Plattformar som Netlify, Vercel och GitHub Pages gör det snabbt och ofta kostnadsfritt att distribuera dessa filer.

Det du distribuerar

Du distribuerar innehållet i mappen dist som skapades av npm run build. Värden levererar filerna via ett CDN till användare över hela världen.

npm run build
# upload the dist/ folder to your host

Distribuera till Netlify

Netlify kan bygga från ditt Git-repo. Du anger byggkommandot och mappen som ska publiceras.

# Netlify settings
# Build command: npm run build
# Publish directory: dist

Distribuera till Vercel

Vercel identifierar automatiskt Vite-projekt. Anslut ditt repo så kör Vercel bygget och levererar resultatet, med en ny distribution efter varje push.

# Vercel auto-detects:
# Build command: npm run build
# Output directory: dist

Distribuera till GitHub Pages

GitHub Pages levererar statiska filer från ett repo. Du bygger lokalt eller i CI och pushar sedan resultatet i dist till Pages-grenen eller använder en action.

Problemet med history-läget

Vue Router skapar rena URL:er som /about i history-läget. Men en statisk värd har ingen riktig fil på /about, så ett direkt besök eller en omladdning returnerar 404.

Lösningen med SPA-omdirigering

Lösningen är att ange att servern ska leverera index.html för alla rutter, så att Vue Router kan hantera routningen på klientsidan.

Netlify-omdirigeringsregel

I Netlify lägger du till en fil med namnet _redirects (eller en regel i netlify.toml) som skriver om alla sökvägar till index.html.

# public/_redirects
/*    /index.html   200

Vercel-omskrivningsregel

I Vercel ger en omskrivning i vercel.json samma återgång till index.html.

{
  "rewrites": [
    { "source": "/(.*)", "destination": "/index.html" }
  ]
}

Konfigurera basSökvägen

Om appen levereras från en undersökväg (vilket är vanligt på GitHub Pages, till exempel /my-repo/) anger du alternativet base i Vite-konfigurationen så att URL:erna till resurserna löses korrekt.

// vite.config.js
export default {
  base: "/my-repo/"
}

CI-distribution

Automatisera distributioner med kontinuerlig integration. Ett arbetsflöde installerar beroenden, kör tester, bygger och publicerar vid varje push till din huvudgren, så att publiceringen sker utan manuellt arbete.

# CI steps
# 1. npm install
# 2. npm run test
# 3. npm run build
# 4. deploy dist/

Snabbtest

Testa dina kunskaper om distribution.

Besvara frågan i den interaktiva lektionen

Sammanfattning

Distribuera mappen dist till en statisk värd som Netlify, Vercel eller GitHub Pages. Lägg till en SPA-återgång (omdirigering/omskrivning till index.html) så att rutter i history-läget fungerar vid omladdning, ange Vites base för hosting från en undersökväg och automatisera allt med CI. Därefter övervakar och underhåller du appen i produktion.

Gratis att börja

Lär dig HTML med en AI-lärare – gratis

Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.

Kurser: 42
Lektioner: 156

Börja lära dig gratis Visa hela kursen

Vanliga frågor

Är lektionen ”Distribuera till hostingplattformar” gratis?

Ja – du kan läsa vilka 3 lektioner som helst i lärvägen Vue Academy, inklusive ”Distribuera till hostingplattformar”, kostnadsfritt i sin helhet här på webben. Därefter låser CoddyKit PRO upp alla lektioner, plus interaktiv övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Kursen i Vue Academy innehåller totalt 3 lektioner.

Vad lär jag mig i ”Distribuera till hostingplattformar”?

Distribuera Vue-appar till statiska webbhotell och plattformar. Ni övar på Vue Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.

Behöver jag någon erfarenhet för att börja lära mig Vue Academy?

Du behöver inga förkunskaper. Utbildningen i Vue Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 2 av 3.

Hur lång tid tar lektionen ”Distribuera till hostingplattformar”?

De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.

Kan jag skriva och köra kod i den här Vue Academy-lektionen?

Ja. Varje Vue Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.

Alla lektioner i den här kursen

Optimera byggprocessen
Distribuera till hostingplattformar
Övervakning och underhåll

← Tillbaka till Vue Academy