Vue Academy · Lezione

Distribuzione su piattaforme di hosting

Distribuisca app Vue su host e piattaforme statiche.

Distribuzione su piattaforme di hosting è una lezione Vue Academy gratuita su CoddyKit. Questa è la lezione 2 di 3. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento Vue Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Vue Academy include 3 lezioni in totale.

Distribuire l'app

Una SPA Vue viene compilata in file statici, quindi può essere ospitata su qualsiasi host statico. Piattaforme come Netlify, Vercel e GitHub Pages rendono il deployment di questi file rapido e spesso gratuito.

Cosa viene distribuito

Distribuisca il contenuto della cartella dist prodotta da npm run build. L'host serve questi file tramite una CDN agli utenti di tutto il mondo.

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

Distribuire su Netlify

Netlify può eseguire la build dal repository Git. È sufficiente indicare il comando di build e la cartella da pubblicare.

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

Distribuire su Vercel

Vercel rileva automaticamente i progetti Vite. Colleghi il repository: la piattaforma eseguirà la build, servirà l'output e ripeterà il deployment a ogni push.

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

Distribuire su GitHub Pages

GitHub Pages serve file statici da un repository. Esegua la build localmente o in CI, quindi esegua il push dell'output dist nel branch Pages oppure utilizzi un'action.

Il problema della modalità history

Vue Router in modalità history crea URL puliti come /about. Tuttavia, un host statico non contiene alcun file reale /about, quindi una visita diretta o un aggiornamento della pagina restituisce un errore 404.

La soluzione del redirect per le SPA

La soluzione consiste nel dire al server di servire index.html per tutte le route, lasciando che Vue Router gestisca il routing sul client.

Regola di redirect di Netlify

Su Netlify, aggiunga un file _redirects (oppure una regola in netlify.toml) che riscriva tutti i percorsi verso index.html.

# public/_redirects
/*    /index.html   200

Regola di rewrite di Vercel

Su Vercel, una regola di rewrite in vercel.json ottiene lo stesso fallback verso index.html.

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

Configurazione del percorso di base

Se l'app viene servita da un sottopercorso (una situazione comune su GitHub Pages, ad esempio /my-repo/), imposti l'opzione base nella configurazione di Vite, così gli URL delle risorse vengono risolti correttamente.

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

Deployment tramite CI

Automatizzi i deployment con l'integrazione continua. Un workflow installa le dipendenze, esegue i test, crea la build e la pubblica a ogni push sul branch principale, così la distribuzione non richiede interventi manuali.

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

Verifica rapida

Metta alla prova le Sue conoscenze del deployment.

Riepilogo

Distribuisca la cartella dist su un host statico come Netlify, Vercel o GitHub Pages. Aggiunga un fallback per le SPA (redirect/rewrite verso index.html) affinché le route in modalità history funzionino dopo un aggiornamento, imposti il base di Vite per l'hosting in un sottopercorso e automatizzi tutto con la CI. Ora monitorerà e manterrà l'app in produzione.

Domande Frequenti

La lezione «Distribuzione su piattaforme di hosting» è gratuita?

Sì — il testo completo di «Distribuzione su piattaforme di hosting» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso Vue Academy, passa a CoddyKit PRO. Il corso Vue Academy include 3 lezioni in totale.

Cosa imparerò in «Distribuzione su piattaforme di hosting»?

Distribuisca app Vue su host e piattaforme statiche. Eserciti Vue Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.

Ho bisogno di esperienza per iniziare Vue Academy?

Non è richiesta alcuna esperienza precedente. Vue Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 2 di 3.

Quanto tempo richiede la lezione «Distribuzione su piattaforme di hosting»?

La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.

Posso scrivere ed eseguire codice in questa lezione Vue Academy?

Sì. Ogni lezione Vue Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.

Tutte le lezioni di questo corso

← Torna a Vue Academy