Mantieni la compilazione Vue che usi già
Usa npm ci e la normale compilazione Vue o Vite del progetto. Mantieni espliciti la directory di output, l'URL base e il comportamento delle variabili di ambiente.
App di front-end · piani da $10/mese
Distribuisci Vue.Pubblica il sito compilato.
Compila un'applicazione Vue dal repository esistente, servi l'output di produzione, verifica le route lato client e promuovila su un dominio HTTPS gestito.
Mantieni il repositoryEsamina compilazione e logDomini personalizzati e TLS
Distribuzione con Adios
Versione candidata
Vue
SORGENTE
Git
REGION
de
ROUTE
HTTPS
01Codice sorgente ricevuto
02Compilazione completata
03Ambiente di esecuzione avviato
04Controllo di integrità superato
Route promossa
production.adios.run
Un percorso verso la produzione per
VueViteOutput staticoRouting SPADomini personalizzati
Il percorso di produzione
Un progetto Vue funzionante ha ancora bisogno di un rilascio sicuro.
L'applicazione o il servizio è solo una parte della produzione. Le evidenze della compilazione, lo stato dell'ambiente di esecuzione, l'integrità, i segreti, i log, le route e la versione promossa devono restare consultabili insieme.
Promuovi la versione che supera i controlli di integrità
Servi le risorse compilate con un processo di produzione, verifica le route client radice e annidate e promuovi il rilascio dopo la risposta del controllo configurato.
Risali dalla produzione al codice sorgente
Output della compilazione, log di esecuzione, stato di integrità, segreti, domini e versione promossa restano associati al progetto, senza essere sparsi tra strumenti indipendenti.
Dal codice sorgente al rilascio
Tre passaggi mantengono il percorso di distribuzione verificabile.
Usa il codice sorgente e il comportamento di produzione già previsti dal progetto. Il manifesto indica cosa la piattaforma deve compilare o provisionare e come verificare che il risultato sia pronto.
- 01
Parti dal codice sorgente o da un modello
Porta il repository esistente oppure esamina e distribuisci una delle varianti dei modelli iniziali indicate nei link qui sotto.
$adios login - 02
Verifica il contratto di distribuzione
Mantieni in adios.yaml i comandi, la versione dell'ambiente di esecuzione o del servizio, il comportamento dei controlli di integrità e i riferimenti ai segreti.
$git diff -- adios.yaml - 03
Distribuisci e verifica il risultato
Segui le evidenze della compilazione e dell'esecuzione, verifica la versione candidata e apri la route promossa o la connessione al servizio.
$adios up
adios.yaml
Il tuo progettoname: vue-app
build_cmd: npm ci && npm run build
start_cmd: npm start
runtime:
name: node@24
port: 3000
health_path: /Configura npm start per servire la directory dist di produzione oppure parti dal modello statico Nginx.
Punti di partenza pronti per la distribuzione
Avvia Vue da un modello quando il repository non è pronto.
Il modello iniziale statico Nginx offre una configurazione essenziale per servire file in produzione, sostituibili con l'output di una compilazione Vue.
Applicazioni web
Nginx Static
Un progetto base Nginx per HTML, CSS, JavaScript statici e app a pagina singola.
HTMLNessuno
- Chiave modello
- nginx:static
- Ambiente di esecuzione
- nginx
- Repository
- template-nginx-static
- Percorso sorgente
- .
git clone https://github.com/adiosdotdev/template-nginx-static.git
cd template-nginx-static
adios upPrima della produzione
Verifica il carico di lavoro.Poi promuovilo.
Il primo rilascio più sicuro parte da una compilazione o configurazione del servizio riproducibile e da un'anteprima che mette alla prova le dipendenze effettivamente usate in produzione.
Sei pronto quando…
- La compilazione di produzione genera la directory dist prevista.
- Le route annidate del browser restituiscono la struttura iniziale dell'applicazione.
- Gli URL delle risorse funzionano sui domini generati e personalizzati.
- I segreti non vengono compilati nel JavaScript client.
Verifica in anteprima quando…
- L'app usa Nuxt o un altro ambiente di esecuzione con rendering sul server.
- Il router presuppone un percorso base di distribuzione diverso dalla radice.
- Le variabili di ambiente differiscono tra compilazione ed esecuzione.
Risposte alle tue domande
Cosa sapere prima di distribuire Vue.
Verifica i limiti dell'ambiente di esecuzione o del servizio, il percorso del modello, il comportamento in caso di errore e i controlli di produzione prima di creare il primo rilascio.
Adios può distribuire un progetto Vue esistente?
Sì. Esegui la CLI Adios dalla radice del progetto, mantieni il repository e i file delle dipendenze che usi già e aggiungi un file adios.yaml con compilazione di produzione, comando di avvio, porta e percorso di integrità.
Ho bisogno di Docker per distribuire Vue?
Non per un ambiente di esecuzione standard supportato. Usa i normali comandi di produzione del progetto in adios.yaml. Se la compilazione richiede pacchetti di sistema insoliti o librerie native, verifica le dipendenze in anteprima prima della promozione.
Adios può distribuire un'app Vue compilata con Vite?
Sì. Compila il progetto con le dipendenze bloccate e servi la directory dist generata con un processo statico di produzione.
Come funzionano in produzione le route di Vue Router in modalità history?
Configura il server statico per restituire la struttura iniziale dell'applicazione alle route del browser che non corrispondono a file, poi verifica la navigazione diretta in anteprima.
Cosa succede se la compilazione o il controllo di integrità fallisce?
La versione candidata conserva l'output della compilazione e dell'esecuzione per l'ispezione. Deve superare i controlli di integrità prima di diventare la versione promossa che serve la route dell'applicazione.
Posso partire da un modello invece che da un repository esistente?
Sì. Questa pagina collega i modelli iniziali ufficiali Adios Vue più pertinenti. Esamina la variante esatta del codice sorgente, distribuiscila dalla console oppure clonala localmente ed esegui adios up.
Percorsi di distribuzione correlati
Collega il resto dello stack.
Distribuisci Siti statici
Pubblica HTML, CSS, JavaScript o una compilazione statica generata da un framework partendo da un piccolo modello iniziale Nginx, con route, domini, TLS e stato del rilascio associati.
Distribuisci React
Compila un'applicazione React dal repository esistente, servi l'output generato o esegui il processo Node.js di produzione e collega il rilascio a una route HTTPS stabile.
Distribuisci Angular
Compila un'applicazione Angular con la configurazione dello spazio di lavoro salvata in Git, servi l'output per il browser, verifica il fallback delle route e promuovila su un dominio HTTPS gestito.
Distribuisci Svelte
Compila un progetto Svelte o SvelteKit con l'adapter scelto, servi l'output generato, verifica le route e mantieni il comando di produzione associato al codice sorgente.
Il primo rilascio
Distribuisci Vue con il codice sorgente e le evidenze associati.
Parti dal repository o da un modello, verifica il contratto di distribuzione ed esamina la versione promossa in produzione.