Comment déployer un projet Vue.js ?

Comment déployer un projet Vue.js ?

Topic : CPanel   |   Publié 1 year ago

Dans ce tutoriel, vous apprendrez à déployer manuellement une application Vue.js sur a travers le cPanel pour cet article. 

Allons-y en commençant par une explication simple de ce qu'est le déploiement. Considérez le déploiement comme une étape du développement du système au cours de laquelle vous décidez d'exposer votre application à vos utilisateurs pour un fonctionnement complet. L'autre mot que nous pouvons utiliser pour cela est la production, donc chaque fois que vous entendez des choses comme le système est prêt pour le déploiement, c'est que le développement est terminé et que le système est exploitable et prêt pour la production.

CONDITIONS PRÉALABLES

Il y a quelques prérequis pour ce tuto. Vous devez avoir installé Node JS sur votre ordinateur portable et savoir comment fonctionne la CLI Vue. Vous devez également avoir un projet Vue.js en cours d'exécution que vous souhaitez déployer.

Pour déployer votre application, vous devrez acheter ou enregistrer un domaine ainsi qu'un plan d'hébergement auprès de votre fournisseur d'hébergement.

Les étapes sont les suivantes;

Construire le projet

La première étape consiste à créer votre application pour la production et cela peut être réalisé en exécutant une simple commande à l'aide de Vue CLI.

Accédez au répertoire de votre projet sur le terminal et tapez l'une des commandes suivantes en fonction de votre gestionnaire de packages.


Si vous utilisez npm tapez la commande suivante

npm run build


Une fois ces commandes exécutées avec succès, vous verrez un contenu similaire à celui affiché ci-dessous sur votre terminal.

résultat de la construction de l'exécution de npm

construction terminée


Vous verrez un nouveau dossier nommé dist dans votre répertoire de projet. Ce dossier contiendra les fichiers que nous devons télécharger sur le serveur. Il contiendra les fichiers suivants ;

structure du dossier dist

structure du répertoire dist


Archivez/compresser votre dossier dist

Vous pouvez compresser dans le format pris en charge par votre fournisseur d'hébergement bien que la plupart d'entre eux prennent en charge .zip ou .tar afin que chacun d'entre eux fonctionne parfaitement.

Téléchargez le dossier compressé

Une fois que vous vous êtes connecté à votre cPanel, faites défiler jusqu'à la section des fichiers, sélectionnez le gestionnaire de fichiers et accédez au dossier public_html.

Répertoire public_html

C'est le dossier dans lequel tous nos fichiers à afficher sur le côté doivent être téléchargés. Téléchargez le dossier dist compressé dans public_html et décompressez les fichiers dans public_html.


À ce stade, votre dossier devrait ressembler à ceci.


Votre site est maintenant en ligne et vous pouvez le consulter en accédant à votre domaine.