Déploiement
Déploiement • Chapitre 4 : Déploiement d'une application frontend

Déploiement d'une application Vue.js

Apprenez à préparer et publier une application Vue 3 moderne : configuration de vite.config.ts, gestion de l'option base pour les sous-chemins, maîtrise du mode HTML5 History de Vue Router et optimisation du découpage de code.

💚
SFC Compilés

Les fichiers .vue (template, script setup, styles) sont compilés en fonctions JavaScript pures et hautement optimisées.

🧭
Option base

Permet de configurer un sous-chemin d'hébergement (ex: base: '/mon-projet/' pour GitHub Pages) sans casser les liens.

📦
Lazy Routing

Le chargement différé dynamique (import()) segmente l'application en petits chunks chargés uniquement au besoin.

🛣️
Mode History

createWebHistory() offre de belles URLs sans dièse (#), mais requiert une redirection côté serveur vers index.html.

vite.config.ts & build.sh
// 1. Configuration vite.config.ts pour le déploiement
import );

# 2. Exécution du build dans le terminal
$ npm run build

# 3. Prévisualisation locale exacte du bundle de production
$ npm run preview
# -> Local:   http://localhost:4173/ (Permet de tester les routes avant déploiement cloud)

Comprendre les Spécificités du Déploiement Vue 3

1. Le Piège du Chemin Racine : L'option base

Par défaut, Vite génère des balises de script absolues dans index.html du type <script src="/assets/index.js">.

Hébergement sur la racine d'un domaine

Exemple : https://mon-application.com/

base: '/' (valeur par défaut)

Le navigateur cherche les assets à la racine absolue du serveur. Fonctionne parfaitement sur Vercel, Netlify ou Render.

Hébergement dans un sous-dossier

Exemple : https://mon-pseudo.github.io/mon-projet/

base: '/mon-projet/'

Si vous oubliez ce réglage, le navigateur cherchera https://mon-pseudo.github.io/assets/index.js (qui n'existe pas) provoquant un écran blanc total !

2. Vue Router : History Mode vs Hash Mode

Vue Router propose deux modes principaux d'historique de navigation :

Recommandé : createWebHistory()

URLs modernes et élégantes :

https://site.com/utilisateurs/profil

Utilise l'API HTML5 history.pushState. Esthétique et optimal pour le référencement (SEO), mais requiert impérativement une règle de rewrite côté serveur redirigeant toutes les requêtes vers /index.html.

Alternative de secours : createWebHashHistory()

URLs avec ancre :

https://site.com/#/utilisateurs/profil

La partie après le # n'étant jamais envoyée au serveur, aucune configuration de serveur n'est nécessaire. Cependant, les URLs sont moins professionnelles et le SEO est limité.

3. Optimisation pour la Production : Le Lazy Loading des Routes

Ne forcez pas vos visiteurs à télécharger toute votre application dès la première visite sur la page d'accueil. Utilisez le découpage dynamique dans votre fichier router/index.ts :

// ❌ Import synchrone (tout est fusionné dans le bundle principal)
import AdminDashboard from '../views/AdminDashboard.vue';
// ✅ Import dynamique asynchrone (téléchargé uniquement si l'internaute visite /admin)
const AdminDashboard = () => import('../views/AdminDashboard.vue');

Lors de npm run build, Vite génère un fichier JavaScript séparé pour ce composant (ex. AdminDashboard-7e2b.js) qui ne sera chargé qu'à la demande.

Comparatif : Modes de Routage Vue en Production

CritèreHTML5 History (createWebHistory)Hash Mode (createWebHashHistory)
Format des URLs/dashboard/settings (propres et naturelles)/#/dashboard/settings (présence d'un hash)
Configuration serveur requiseOui (Rewrite vers /index.html obligatoire)Non (Fonctionne même sur un simple serveur statique sans config)
Expérience utilisateur & SEOExcellente (norme de l'industrie)Moyenne (les moteurs de recherche indexent moins bien les fragments)
Cas d'usage recommandésApplications professionnelles, SaaS, sites vitrinesIntranets fermés, tests rapides, environnements sans contrôle serveur