Comment déployer une page statique vue dans un cloud de code

Avec le développement continu de la technologie front-end, de plus en plus d'entreprises et de particuliers commencent à utiliser Vue.js pour développer des applications front-end. Pour les développeurs Vue.js, comment déployer des pages statiques Vue est devenu une compétence nécessaire.

Code Cloud est une plate-forme nationale d'hébergement de code open source Afin d'aider les développeurs Vue.js à mieux déployer des projets sur le cloud, cet article présentera comment utiliser Code Cloud pour déployer des pages statiques Vue.

1. Préparation

Avant de déployer des pages statiques Vue, nous devons nous assurer que notre projet a été construit avec succès. Dans les projets Vue.js, Vue CLI est généralement utilisé pour construire. La sortie de la construction générera un répertoire dist, qui contient toutes les ressources et le code statiques.

2. Créer un entrepôt et télécharger le code

Tout d'abord, nous devons créer un entrepôt sur Code Cloud. Connectez-vous à Code Cloud, saisissez « Code Cloud+ », sélectionnez « Créer un entrepôt », puis remplissez les informations correspondantes pour terminer la création de l'entrepôt.

Après avoir terminé la création de l'entrepôt, nous devons télécharger le code local dans l'entrepôt. Dans le répertoire racine du projet Vue local, utilisez la commande suivante :

git init
git add .
git commit -m 'first commit'
git remote add origin <仓库地址>
git push -u origin master

Cela téléchargera avec succès notre code dans l'entrepôt du cloud de code.

3. Configuration de l'entrepôt

Après avoir téléchargé le code, nous devons également configurer les paramètres de l'entrepôt pour garantir que notre page Web peut fonctionner correctement dans le navigateur.

Sélectionnez « Paramètres » dans l'entrepôt et ajoutez la clé publique dans la colonne « Clé publique de déploiement ». Il existe deux manières de l'ajouter : télécharger directement la clé publique locale ou utiliser la clé générée par Code Cloud.

Une fois l'ajout terminé, nous devons créer une nouvelle succursale dans l'entrepôt. Le nom de la succursale peut être arbitraire. Sélectionnez ensuite « Page statique » dans les paramètres de la branche.

Dans la page statique, nous devons sélectionner GitHub Pages comme fournisseur de services et sélectionner la branche comme branche que nous venons de créer.

Ensuite, nous devons remplir le fichier d'entrée de notre page statique, qui fait ici référence au fichier de notre page d'accueil, généralement index.html. Une fois les paramètres de branche et de fichier d'entrée terminés, nous pouvons cliquer sur le bouton « Enregistrer » pour terminer la configuration de l'entrepôt.

4. Afficher la page

Après avoir terminé la configuration, nous pouvons maintenant accéder à notre page statique via le navigateur. Sur la page d'accueil de l'entrepôt, nous pouvons voir un bouton "Git Pages". Cliquez dessus pour accéder à notre page web de déploiement.

Il est à noter que nous utilisons GitHub Pages, qui utilisera par défaut le nom de notre entrepôt comme nom de domaine. Par conséquent, lorsque vous accédez à la page, vous devez ajouter "/" et le nom du fichier d'entrée après le nom de l'entrepôt. Par exemple :

https://用户名.gitee.io/仓库名/index.html

5. Mises à jour du déploiement

Une fois le premier déploiement terminé, notre projet peut être mis à jour fréquemment. Alors, comment pouvons-nous mettre à jour le nouveau code sur notre page Web de déploiement ? Voici les étapes spécifiques :

Tout d'abord, nous devons reconstruire le code dans le projet local à l'aide de la commande suivante :

npm run build

Cela générera automatiquement un nouveau dossier dist, contenant notre code nouvellement modifié.

Ensuite, nous devons utiliser la commande suivante dans l'entrepôt de code cloud pour pousser le nouveau code vers notre branche nouvellement créée :

git push origin 分支名

Une fois le téléchargement terminé, nous pouvons afficher le code mis à jour directement dans la page statique du navigateur.

Résumé

Grâce à l'introduction de cet article, nous avons appris à utiliser Code Cloud pour déployer des pages statiques Vue. En développement réel, nous pouvons le configurer et le personnaliser en fonction de différentes situations spécifiques. J'espère que cet article sera utile à tout le monde.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!