Déployer sur Vercel

Vercel héberge gratuitement les projets Vue.js / Vite avec déploiement continu depuis GitHub : à chaque git push, le site est rebuild et redéployé en quelques secondes.

Comparaison rapide

Hébergeur	Avantages	Pour quoi
Vercel	Déploiement auto, variables d'env UI, build rapide, gratuit	Projets perso, prototypes, prod
GitHub Pages	Gratuit, intégré GitHub	Sites statiques simples
Infomaniak	Hébergement suisse, FTP classique	Apps avec backend PHP

1. Créer un compte et importer le dépôt

1.1 Se connecter

Aller sur vercel.com et choisir Continue with GitHub (le plus rapide pour récupérer la liste de vos dépôts).

1.2 Importer un projet

Depuis le dashboard Vercel : Add New... → Project. Vercel liste tous les dépôts GitHub auxquels il a accès. Utilisez la barre de recherche pour filtrer (ex : pokedex, 2026).

Cliquer sur Import à côté du dépôt à déployer.

2. Configurer le projet et déployer

2.1 Framework Preset détecté automatiquement

Vercel détecte que le projet est sous Vite (lecture du package.json). Laisser les valeurs par défaut :

Champ	Valeur
Framework Preset	Vite
Build Command	npm run build
Output Directory	dist
Install Command	npm install

2.2 Définir une première variable d'environnement

Dans la section Environment Variables, ajouter VITE_API_URL avec l'URL de votre API en production.

Cliquer sur Deploy. Vercel lance le build (~30-60s) :

Une fois prêt, vous obtenez l'URL de production (format <project>.vercel.app) :

3. ⚠️ Premier piège : les images ne s'affichent pas

Si vous ouvrez l'app, vous risquez de voir un écran (presque) vide : le titre s'affiche, mais aucune image, et la page détail d'une ressource est totalement cassée.

Pourquoi ?

Le vite.config.mjs du Pokédex contient :

base: process.env.VITE_BASE_URL || './',

Sans la variable VITE_BASE_URL définie, import.meta.env.BASE_URL vaut ./ (chemin relatif).

Route consultée	URL d'image générée	Résolution navigateur	Statut
/ (liste)	./images/pikachu.png	/images/pikachu.png	✅
/pokemon/1 (détail)	./images/pikachu.png	/pokemon/images/pikachu.png	❌ 404

C'est le piège classique du chemin relatif + route imbriquée. Avec VITE_BASE_URL=/, BASE_URL devient / (absolu) et les images résolvent correctement quelle que soit la route.

3.1 Ajouter VITE_BASE_URL

Dans Settings → Environment Variables → Add Environment Variable :

• Key : VITE_BASE_URL
• Value : /
• Environments : Production + Preview (au minimum)

Après validation, les deux variables sont visibles. Notez le toast Vercel : « A new deployment is needed for changes to take effect » — Vite injecte les variables au build, donc un redéploiement est obligatoire.

3.2 Redéployer manuellement

Aller dans Deployments :

Cliquer sur le menu ⋯ en haut à droite → Create Deployment :

Vercel propose de redéployer la branche actuelle. Confirmer et attendre ~30 secondes.

Astuce — déclencher un rebuild via Git

Alternative équivalente sans passer par l'UI :

git commit --allow-empty -m "chore: trigger rebuild"
git push

4. ⚠️ Second piège : 404 sur refresh d'une route imbriquée

Une fois VITE_BASE_URL corrigé, la liste fonctionne :

…mais dès que vous rafraîchissez (F5) sur une route imbriquée comme /pokemon/36289749-…, Vercel renvoie un 404.

Pourquoi ?

Vue Router en mode history gère les routes côté client uniquement. Sur F5, le navigateur envoie la requête GET /pokemon/<uuid> au serveur. Vercel cherche un fichier physique correspondant, ne le trouve pas → 404.

La solution : indiquer à Vercel de servir index.html pour toutes les requêtes inconnues (Vue Router prend ensuite le relais côté client).

4.1 Ajouter vercel.json à la racine du repo

Créer le fichier vercel.json à la racine du projet (à côté de package.json) :

{
  "rewrites": [
    { "source": "/(.*)", "destination": "/index.html" }
  ]
}

Effet : toute requête est rewrited vers index.html. Les assets statiques (/images/*, /assets/*, etc.) restent prioritaires car résolus avant les rewrites par Vercel.

git add vercel.json
git commit -m "feat: ajouter rewrite SPA pour Vercel"
git push

Vercel redéploie automatiquement (~30s). Tester en ouvrant directement une URL imbriquée :

5. Pièges connus — récapitulatif

Symptôme	Cause	Solution
Image manquante en page détail mais OK en liste	BASE_URL = ./ (chemin relatif)	VITE_BASE_URL=/ + redeploy
F5 sur /pokemon/X → 404	SPA sans rewrite serveur	vercel.json avec rewrite vers index.html
Modif de variable d'env sans effet	Variables Vite injectées au build	Redeploy manuel ou git commit --allow-empty && git push
Erreur CORS en prod (mais OK en dev)	API ne whitelist pas le domaine Vercel	Ajouter le domaine *.vercel.app côté API
URL change à chaque branche	Vercel génère une URL par branche/preview	Configurer un domaine custom dans Settings → Domains

6. Aller plus loin

Variables d'environnement par environnement

Vercel propose trois environnements : Production, Preview (autres branches), Development (vercel dev en local). Exemple typique :

Variable	Production	Preview	Development
VITE_API_URL	https://api.prod.com	https://api.staging.com	http://localhost:3535
VITE_BASE_URL	/	/	(non défini)

Limiter les déploiements à main

Par défaut, Vercel déploie toutes les branches poussées sur GitHub. Pour économiser des minutes de build : Settings → Git → Production Branch : main

Logs et debugging

• Deployments → cliquer sur un déploiement → Build Logs : pour les erreurs de build
• Runtime Logs : non applicable pour Vite (build statique)

Ressources

• Documentation officielle Vercel
• Vite — Variables d'environnement
• Vue Router — Mode history
• Déploiement GitHub Pages
• Déploiement Infomaniak