Build & Deploy — Déployer sur Vercel

Dans ce chapitre, vous apprendrez comment empaqueter un projet de blog développé localement et le déployer gratuitement sur Internet, en obtenant un lien d'accès public.

Générer le bundle de production

Lors du développement, exécuteznpm run dev, Vite démarrera un serveur de développement local, prenant en charge les mises à jour à chaud.

Mais ce qui est nécessaire pour le déploiement, ce sont des fichiersoptimisés et de petite taille— c'est le build de production.

$ npm run build

Après l'avoir exécuté, undist/dossier sera généré dans le répertoire racine du projet :

dist/
├── index.html                # 入口 HTML（资源引用已被替换为构建后的路径）
├── assets/
│   ├── index-Df3aBc9x.js    # 打包后的 JS（代码已压缩、tree-shaking）
│   ├── index-Gh7jKl2m.css   # 打包后的 CSS（已提取、压缩）
│   └── ...                   # 其他资源
├── posts.json                # public 目录的文件原样复制
└── favicon.ico               # 其他静态资源

Notez quelques changements clés :

• Les noms de fichiers contiennent un hash (par ex.,Df3aBc9x); si le contenu change, le hash change, utilisé pour le contrôle du cache du navigateur
• Le code a étéminifié et tree-shaken(suppression du code inutilisé)
• JS et CSS sont séparés en fichiers distincts
• public/Le contenu du répertoire est copié tel quel dans le répertoire racine

Pour prévisualiser le résultat du build, exécuteznpx vite preview; il démarrera un serveur local en mode production pour simuler l'environnement réel.

Poussez le projet vers GitHub

Les plateformes de déploiement (comme Vercel) récupèrent généralement le code depuis un dépôt Git et effectuent le build automatiquement, vous devez donc d'abord téléverser le projet sur GitHub.

Étape 1 : Créer un dépôt GitHub

Cliquez sur le + dans le coin supérieur droit du site GitHub → Nouveau dépôt, puis remplissez :

• Nom du dépôt：blog-app
• Définissez-le sur Public (pour un déploiement gratuit)
• Ne cochez pas « Initialiser ce dépôt avec un fichier README » (car vous avez déjà les fichiers du projet en local)

Étape 2 : Initialiser Git en local et effectuer le push

$ cd blog-app
$ git init
$ git add .
$ git commit -m "初始化博客项目"
$ git branch -M main
$ git remote add origin https://github.com/你的用户名/blog-app.git
$ git push -u origin main

Une fois le push réussi, actualisez la page GitHub et vous verrez tous les fichiers du projet.

Avant de faire le push, assurez-vous.gitignorele fichier contient déjànode_modulesetdist. node_modules ne doit pas être téléversé (il peut être restauré via npm install), et dist doit être généré automatiquement par la plateforme de build.

Déployer sur Vercel

Vercelest actuellement la plateforme de déploiement frontend la plus populaire, avec une prise en charge sans configuration des projets Vue/Vite.

Étapes de déploiement

1. Visitezvercel.com, inscrivez-vous/connectez-vous avec votre compte GitHub
2. Cliquez sur « Nouveau projet » → Importer un dépôt Git → sélectionnez le dépôt blog-app
3. Vercel détecte automatiquement que le projet est Vite (Vue), aucune configuration nécessaire
4. Cliquez sur « Deploy », attendez quelques dizaines de secondes, la compilation se termine
5. Une fois le déploiement réussi, vous obtiendrez un lien, tel que :https://blog-app.vercel.app

Déploiement automatique

À partir de ce moment, chaque fois que vous modifiez le code en local et le poussez vers GitHub (git push), Vercel va automatiquement :

1. Détecter que le dépôt contient de nouveaux commits
2. Récupérer le dernier code, exécuter npm install
3. Exécuter npm run build
4. Déployer en production

L'ensemble du processus ne nécessite aucune action manuelle ; poussez et c'est en ligne.

Domaine personnalisé (facultatif)

Vercel fournit.vercel.appdes sous-domaines gratuits, et vous pouvez également associer votre propre domaine.

1. Dans le tableau de bord du projet Vercel → Paramètres → Domaines
2. Saisissez votre domaine (par exemple, blog.example.com)
3. Suivez les instructions pour ajouter un enregistrement CNAME chez votre fournisseur DNS pointant verscname.vercel-dns.com
4. Attendez que le DNS prenne effet (généralement de quelques minutes à quelques heures), Vercel demandera automatiquement un certificat SSL

Prochaines orientations d'apprentissage

Vous maîtrisez les compétences essentielles de Vue3. Voici un parcours avancé basé sur différents objectifs :