Conservez votre méthode de compilation Vue
Utilisez npm ci et la compilation Vue ou Vite habituelle du projet. Définissez explicitement le répertoire de sortie, l’URL de base et le comportement des variables d’environnement.
Applications frontend · offres à partir de $10/mois
Déployer Vue.Publiez le site compilé.
Compilez une application Vue à partir de son dépôt existant, servez les fichiers de production, vérifiez les routes côté client et promouvez cette version sur un domaine HTTPS managé.
Conserver le dépôtExaminer la compilation et les journauxDomaines personnalisés et TLS
Déploiement Adios
Version candidate
Vue
SOURCE
Git
REGION
de
ROUTE
HTTPS
01Source reçue
02Compilation terminée
03Environnement d’exécution démarré
04Vérification de santé réussie
Route promue en production
production.adios.run
Une mise en production adaptée à
VueViteSortie statiqueRoutage SPADomaines personnalisés
Le parcours de mise en production
Même opérationnel, un projet Vue doit être mis en production en toute sécurité.
L’application ou le service ne représente qu’une partie de la production. Les résultats de compilation, l’état d’exécution, les contrôles de santé, les secrets, les journaux, les routes et la version promue doivent pouvoir être examinés ensemble.
Promouvoir la version dont les contrôles de santé réussissent
Servez les ressources compilées avec un processus de production, vérifiez la route racine et les routes clientes imbriquées, puis promouvez la version une fois le contrôle configuré réussi.
Relier la production au code source
Les résultats de compilation, les journaux d’exécution, l’état de santé, les secrets, les domaines et la version promue restent associés au projet au lieu d’être dispersés entre des outils indépendants.
Du code source à la mise en production
Trois étapes vous permettent de vérifier le parcours de déploiement.
Utilisez le code source et le fonctionnement en production déjà définis pour le projet. Le manifeste décrit ce que la plateforme doit compiler ou provisionner et les critères à remplir pour que le résultat soit prêt.
- 01
Commencer par la source ou un modèle
Importez le dépôt existant, ou examinez et déployez l’une des variantes de modèles précisément référencées ci-dessous.
$adios login - 02
Revoir le contrat de déploiement
Consignez dans adios.yaml les commandes, la version de l’environnement d’exécution ou du service, les critères de santé et les références aux secrets.
$git diff -- adios.yaml - 03
Déployer et inspecter le résultat
Suivez les résultats de compilation et d’exécution, vérifiez la version candidate, puis ouvrez la route ou la connexion de service promue en production.
$adios up
adios.yaml
Votre projetname: vue-app
build_cmd: npm ci && npm run build
start_cmd: npm start
runtime:
name: node@24
port: 3000
health_path: /Configurez npm start pour servir le répertoire dist de production, ou partez du modèle statique Nginx.
Points de départ déployables
Démarrer Vue à partir d'un modèle lorsque le dépôt n'est pas prêt.
Le modèle statique Nginx fournit un serveur de production léger dont vous pouvez remplacer les fichiers par le résultat d’une compilation Vue.
Applications Web
Nginx statique
Un projet de démarrage Nginx pour les sites statiques HTML, CSS et JavaScript, ainsi que les applications monopages.
HTMLAucune
- Clé du modèle
- nginx:static
- Environnement d’exécution
- nginx
- Dépôt
- template-nginx-static
- Emplacement de la source
- .
git clone https://github.com/adiosdotdev/template-nginx-static.git
cd template-nginx-static
adios upAvant production
Vérifier la charge de travail.Puis promouvez la version en production.
Pour sécuriser la première mise en production, partez d’une compilation ou d’une configuration de service reproductible et d’un aperçu qui sollicite les dépendances réellement utilisées en production.
Prêt quand...
- La compilation de production génère le répertoire dist attendu.
- Les routes imbriquées du navigateur renvoient la structure de base de l’application.
- Les URL des ressources fonctionnent sur les domaines générés et personnalisés.
- Les secrets ne sont pas intégrés au JavaScript client lors de la compilation.
Prévisualiser quand...
- L’application utilise Nuxt ou un autre environnement de rendu côté serveur.
- Le routeur suppose une base de déploiement différente de la racine.
- Les variables d’environnement diffèrent entre la compilation et l’exécution.
Les réponses à vos questions
Ce qu’il faut savoir avant de déployer Vue.
Vérifiez les limites de l’environnement d’exécution ou du service, le chemin du modèle, le comportement en cas d’échec et les contrôles de production avant de créer la première version.
Adios peut-il déployer un projet Vue existant ?
Oui. Exécutez la CLI Adios depuis la racine du projet, conservez votre dépôt et vos fichiers de dépendances et ajoutez un fichier adios.yaml décrivant la compilation de production, la commande de démarrage, le port et le chemin de contrôle de santé.
Ai-je besoin de Docker pour déployer Vue ?
Pas pour un environnement d’exécution standard pris en charge. Utilisez les commandes de production habituelles du projet dans adios.yaml. Si la compilation nécessite des packages système inhabituels ou des bibliothèques natives, vérifiez ces dépendances dans un aperçu avant la promotion en production.
Adios peut-il déployer une application Vue créée avec Vite ?
Oui. Compilez le projet avec ses dépendances verrouillées et servez le répertoire dist généré avec un processus statique de production.
Comment les routes de Vue Router en mode history fonctionnent-elles en production ?
Configurez le serveur statique pour renvoyer la structure de base de l’application pour les routes du navigateur qui ne correspondent pas à des fichiers, puis vérifiez la navigation directe dans un aperçu.
Que se passe-t-il si la compilation ou le contrôle de santé échoue ?
La version candidate conserve ses résultats de compilation et d’exécution pour vérification. Ses contrôles de santé doivent réussir avant sa promotion comme version desservant la route de l’application.
Puis-je partir d’un modèle plutôt que d’un dépôt existant ?
Oui. Cette page référence les modèles Adios officiels les plus proches pour Vue. Examinez la variante exacte du code source, déployez-la dans la console ou clonez-la localement et exécutez adios up.
Autres options de déploiement
Connectez le reste de votre stack.
Déployer Sites statiques
Publiez du HTML, du CSS, du JavaScript ou une compilation statique générée par un framework à partir d’un petit modèle Nginx, avec les routes, les domaines, TLS et l’état de la version associés.
Déployer React
Compilez une application React à partir de son dépôt existant, servez les fichiers générés ou lancez le processus Node.js de production, puis associez cette version à une route HTTPS stable.
Déployer Angular
Compilez une application Angular avec la configuration de l’espace de travail enregistrée dans le dépôt, servez les fichiers destinés au navigateur, vérifiez le fallback des routes et promouvez cette version sur un domaine HTTPS managé.
Déployer Svelte
Compilez un projet Svelte ou SvelteKit avec l’adaptateur choisi, servez les fichiers générés, vérifiez les routes et conservez la commande de production avec le code source.
La première version
Déployer Vue avec le code source et les éléments de vérification associés.
Partez du dépôt ou d’un modèle, vérifiez le contrat de déploiement et examinez la version qui sera promue en production.