Pubblica il tuo
Progetto Vue
Carica l'output statico da Vue, Vite, Vue CLI o Nuxt e pubblicalo con fallback in modalità cronologia, HTTPS, distribuzione globale e domini personalizzati pronti quando ne hai bisogno.
base: './',
Scopri quale cartella Vue caricare
La maggior parte dei problemi di pubblicazione di Vue iniziano prima dell'hosting: cartella di output errata, percorso di base errato o build di cui non è stata visualizzata l'anteprima in locale.
Vite + Vue
Per impostazione predefinita, Vite mette la build di produzione in dist. Se la configurazione cambia build.outDir o base, carica la cartella di output effettiva e testa gli URL degli asset.
Vue CLI
Le build statiche Vue CLI vengono generalmente distribuite da dist. Se l'app viene servita da un percorso secondario, publicPath deve corrispondere alla struttura URL finale.
Output statico Nuxt
Nuxt può produrre output statico, ma le rotte renderizzate dal server e le API del server necessitano di un runtime. Per questo flusso carica solo i file statici generati in public.
Di cosa ha effettivamente bisogno la modalità cronologia del router Vue
Vale la pena conservare URL puliti
I percorsi hash funzionano quasi ovunque, ma un URL con frammenti # sembra un ripiego ed è scomodo per condivisione, statistiche e lavoro sul prodotto.
La modalità history di Vue Router offre percorsi puliti come / o /dashboard/settings. Il compromesso è che l'host deve sapere come servire index.html per percorsi che non sono file reali.
Come DeployPages gestisce la modalità cronologia
Quando una richiesta non corrisponde a una risorsa statica reale, DeployPages serve lo index.html root e consente al router Vue di risolvere la vista finale nel browser.
- Le visite dirette ai percorsi annidati non falliscono immediatamente.
- Il documento root viene restituito come risposta di fallback.
- Vue si monta, legge l'URL corrente ed esegue il rendering del percorso corretto.
Controlli di produzione Vue
Un'app Vue può funzionare in sviluppo e continuare a fallire dopo il caricamento. Questi controlli rilevano gli errori comuni prima che il link vada online.
Percorso di base
Per Vite, conferma base. Per Vue CLI, conferma publicPath. Valori errati di solito appaiono come CSS, JS, font o immagini mancanti.
Fallback history
Apri direttamente un percorso nidificato e aggiornalo. Se la pagina rimane attiva, il fallback sta facendo il suo lavoro.
Output solo statico
DeployPages serve file statici. I percorsi API, il middleware del server e il comportamento solo SSR richiedono un backend o un runtime separato.
Anteprima locale
Utilizza un vero server di anteprima locale per la build di produzione. Aprire dist/index.html con file:// può nascondere o creare problemi che non corrispondono alla pubblicazione.
Flusso di pubblicazione Vue
Costruisci asset statici
Esegui la build di produzione in modalità statica Vite, Vue CLI o Nuxt in modo che l'app venga generata come file che un browser può caricare direttamente.
Trova la cartella di output
La maggior parte dei progetti Vue e Vite genera dist. I progetti statici Nuxt di solito usano .output/public o una directory dist generata, a seconda della configurazione.
Le build statiche Nuxt solitamente caricano .output/public o dist, a seconda della configurazione del progetto.
Carica e convalida i link
Carica l'intera cartella di output e verifica link diretti, navigazione del router e percorsi degli asset dopo che il sito è attivo.
Problemi comuni di pubblicazione di Vue
L'aggiornamento di un percorso nidificato restituisce 404
Il router Vue usa la modalità history, ma l'host sta cercando un file reale. Usa un fallback SPA in modo che i percorsi documento sconosciuti restituiscano index.html.
I file CSS o JS restituiscono 404
Controlla Vite base o Vue CLI publicPath. Conferma inoltre di aver caricato la cartella dist completa, inclusi gli asset generati.
L'app funziona in modalità hash ma non in modalità cronologia
La modalità hash mantiene il routing dopo # nel browser. La modalità cronologia utilizza URL pulito e richiede un comportamento di fallback del server per le visite dirette.
Nell'output Nuxt manca il comportamento del server
L'output statico di Nuxt può essere ospitato come file. Le route del server Nuxt, il middleware del server e il comportamento solo SSR richiedono un runtime del server.
Domande frequenti sulla pubblicazione di Vue
Perché i miei file CSS e JS restituiscono 404?
Di solito significa che i percorsi delle risorse sono stati creati per un URL base diverso o che la directory assets non è stata caricata. In Vite controlla base; in Vue CLI controlla publicPath.
Supporta Nuxt?
Sì, per l'output statico. Genera prima il sito statico, quindi carica la cartella public generata. DeployPages non è la destinazione giusta per il rendering server Nuxt o le rotte API server.
Dovrei utilizzare la modalità hash o la modalità cronologia?
Utilizza la modalità cronologia quando desideri URL pulito e il tuo host supporta il fallback su index.html. La modalità hash è più semplice da ospitare, ma lascia # in ogni route lato client.
Devo caricare il progetto sorgente Vue?
No. Carica la cartella di output della produzione, solitamente dist. Il progetto di origine contiene file di sviluppo e dipendenze che non sono destinate a essere servite direttamente.
Lo stato Pinia o Vuex sopravvivrà a un aggiornamento?
Non automaticamente. Un aggiornamento del browser reimposta lo stato del client in memoria. Mantieni lo stato importante con localStorage o il tuo plugin di persistenza preferito.
Posso tornare a una versione precedente?
Sì. DeployPages conserva la cronologia di pubblicazione in modo da poter ripristinare una build statica precedente quando necessario.