Déployez votre
projet Vue
Téléversez la sortie statique de Vue, Vite, Vue CLI ou Nuxt, puis publiez-la avec repli history mode, HTTPS, diffusion à la périphérie et domaines personnalisés quand vous en avez besoin.
base: './',
Savoir quel dossier Vue téléverser
La plupart des problèmes de déploiement Vue commencent avant l'hébergement : mauvais dossier de sortie, mauvais chemin de base ou build non prévisualisé localement.
Vite + Vue
Vite place le build de production dans dist par défaut. Si votre config modifie build.outDir ou base, téléversez le vrai dossier de sortie et testez les URL de fichiers.
Vue CLI
Les builds statiques Vue CLI se déploient généralement depuis dist. Si l'app est servie sous un sous-chemin, publicPath doit correspondre à la structure d'URL finale.
Sortie statique Nuxt
Nuxt peut produire une sortie statique, mais routes serveur et API serveur demandent un runtime. Téléversez seulement les fichiers statiques publics générés pour ce flux.
Ce que Vue Router en mode history demande vraiment
Les URL propres valent la peine
Les routes avec hash fonctionnent presque partout, mais les URL avec fragments # ressemblent à un contournement et gênent le partage, les statistiques et la finition produit.
Vue Router history mode donne des chemins propres comme /about ou /dashboard/settings. La contrepartie est que l'hébergeur doit savoir servir index.html pour les routes qui ne sont pas de vrais fichiers.
Comment DeployPages gère le mode history
Quand une requête ne correspond pas à un fichier statique réel, DeployPages sert l'index.html racine et laisse Vue Router résoudre la vue finale dans le navigateur.
- Les visites directes vers des routes imbriquées n'échouent pas immédiatement.
- Le document racine est renvoyé comme réponse de repli.
- Vue se monte, lit l'URL courante et rend la bonne route.
Contrôles de production Vue
Une app Vue peut marcher en développement et échouer après téléversement. Ces contrôles attrapent les problèmes courants avant l'envoi du lien.
Chemin de base
Pour Vite, confirmez base. Pour Vue CLI, confirmez publicPath. Les mauvaises valeurs se voient souvent via CSS, JS, polices ou images manquants.
Repli history
Ouvrez directement une route imbriquée et rafraîchissez-la. Si la page reste en vie, le repli fait son travail.
Sortie uniquement statique
DeployPages sert des fichiers statiques. API routes, middleware serveur et comportements réservés SSR demandent un back-end ou runtime séparé.
Prévisualisation locale
Utilisez un vrai serveur local de prévisualisation pour le build de production. Ouvrir dist/index.html avec file:// peut cacher ou créer des problèmes différents du déploiement.
Flux de déploiement Vue
Construire les fichiers statiques
Lancez le build de production dans Vite, Vue CLI ou Nuxt en mode statique afin que l'app soit émise comme fichiers qu'un navigateur peut charger directement.
Trouver le dossier de sortie
La plupart des projets Vue et Vite sortent dans dist. Les projets Nuxt statiques déploient souvent .output/public ou un dossier dist généré selon la configuration.
Les builds Nuxt statiques se téléversent généralement depuis .output/public ou dist selon la configuration du projet.
Téléverser et valider les liens
Téléversez tout le dossier de sortie et vérifiez liens profonds, navigation router et chemins de fichiers après mise en ligne.
Problèmes fréquents de déploiement Vue
Rafraîchir une route imbriquée retourne 404
Vue Router utilise le mode history, mais l'hébergeur cherche un vrai fichier. Utilisez un repli SPA pour que les routes de document inconnues renvoient index.html.
Les fichiers CSS ou JS retournent 404
Vérifiez Vite base ou Vue CLI publicPath. Confirmez aussi que vous avez téléversé tout le dossier dist, y compris les fichiers générés.
L'app marche en mode hash mais pas en mode history
Le mode hash garde le routage après # dans le navigateur. Le mode history utilise des URL propres et demande un repli serveur pour les visites directes.
La sortie Nuxt manque de comportement serveur
Une sortie Nuxt statique peut être hébergée comme fichiers. Les routes serveur, middleware serveur et comportements SSR-only exigent un runtime serveur.
FAQ déploiement Vue
Pourquoi mes fichiers CSS et JS retournent-ils 404 ?
Cela signifie généralement que les chemins de fichiers ont été construits pour une autre URL de base, ou que le dossier de fichiers n'a pas été téléversé. Dans Vite, vérifiez base. Dans Vue CLI, vérifiez publicPath.
Est-ce compatible avec Nuxt ?
Oui pour la sortie statique. Générez d'abord le site statique, puis téléversez le dossier public généré. DeployPages n'est pas la bonne cible pour le rendu serveur Nuxt ou les API routes serveur.
Dois-je utiliser le mode hash ou le mode history ?
Utilisez le mode history si vous voulez des URL propres et que l'hébergeur prend en charge le repli vers index.html. Le mode hash est plus simple à héberger mais laisse # dans chaque route côté client.
Dois-je téléverser le projet source Vue ?
Non. Téléversez le dossier de sortie de production, généralement dist. Le projet source contient des fichiers de développement et dépendances qui ne sont pas faits pour être servis directement.
L'état Pinia ou Vuex survit-il à un refresh ?
Pas automatiquement. Un refresh navigateur réinitialise l'état client en mémoire. Persistez les états importants avec localStorage ou le plugin de persistance que vous préférez.
Puis-je revenir à une version précédente ?
Oui. DeployPages conserve l'historique de déploiement pour revenir à un ancien build statique si besoin.