Comment déployer le projet Vue.js sur le serveur

Avec le développement de la technologie front-end, le champ de la responsabilité front-end s'est élargi. Vue.js, en tant que framework JavaScript, a été largement utilisé dans le développement front-end. Au fur et à mesure que l'application continue de se développer, l'application Vue.js doit être déployée sur le serveur afin qu'elle soit accessible dans un navigateur Web. Cet article explique comment déployer une application Vue.js sur le serveur.

1. Packaging du projet Vue.js

Avant de déployer une application Vue.js, vous devez d'abord empaqueter l'application Vue.js. Le packaging d'une application Vue.js est le processus consistant à rassembler tous les fichiers statiques de l'application et à les fusionner en un ou plusieurs fichiers. Le but du packaging est d’augmenter la vitesse de chargement de votre application et de simplifier son développement et son déploiement.

Pour les applications Vue.js, vous pouvez utiliser Vue CLI pour l'empaquetage. Vue CLI est un outil de ligne de commande Vue.js qui peut créer et gérer rapidement des projets Vue.js. Assurez-vous d'abord que Vue CLI est installé sur votre ordinateur local. Entrez la commande suivante dans le terminal de commande :

npm install -g @vue/cli

Après avoir terminé l'installation de Vue CLI, vous pouvez utiliser la commande suivante pour créer un projet Vue.js :

vue create my-vue-app

Ensuite, entrez dans le répertoire du projet Vue.js et utilisez la commande suivante pour la packager :

npm run build

Cette commande regroupe l'application Vue.js dans un dossier appelé "dist". Le dossier packagé contient tous les fichiers statiques de l'application et un fichier "index.html", qui peut être ouvert directement avec un navigateur.

2. Sélection du serveur

Avant de déployer l'application Vue.js sur le serveur, vous devez sélectionner un serveur approprié. Il existe de nombreux types de serveurs différents qui peuvent être utilisés pour héberger des applications Vue.js, tels qu'Apache, Nginx, Express, etc. Ici, nous choisirons Nginx comme serveur.

Nginx est un serveur Web léger avec de fortes performances et est le serveur utilisé par de nombreux grands sites Web. Nginx est hautement évolutif et personnalisable et peut fonctionner sur des systèmes d'exploitation tels qu'Ubuntu et CentOS.

3. Configuration du serveur

Avant d'installer Nginx, vous devez mettre à jour les packages logiciels sur le serveur. Entrez la commande suivante dans le terminal de commande :

sudo apt update
sudo apt upgrade

Après la mise à jour du progiciel, vous pouvez utiliser la commande suivante pour installer Nginx :

sudo apt-get install nginx

Une fois l'installation terminée, Nginx démarrera automatiquement. Vous pouvez vérifier l'état d'exécution de Nginx avec la commande suivante :

sudo systemctl status nginx

Si tout est normal, vous verrez que Nginx est en cours d'exécution.

Ensuite, le fichier de configuration de Nginx doit être modifié afin d'utiliser l'application Vue.js. Tout d’abord, vous devez sauvegarder le fichier de configuration par défaut de Nginx. Entrez la commande suivante dans le terminal de commande :

sudo mv /etc/nginx/sites-available/default /etc/nginx/sites-available/default.bak

Une fois la sauvegarde terminée, vous pouvez créer un nouveau fichier de configuration. Entrez la commande suivante dans le terminal de commande :

sudo nano /etc/nginx/sites-available/default

Ajoutez ce qui suit dans le fichier :

server {
  listen 80;
  server_name your-server-ip;

  location / {
      root /var/www/html/dist;
    index index.html;
    try_files $uri $uri/ /index.html;
  }
}

Assurez-vous de remplacer "your-server-ip" par l'adresse IP de votre serveur et "/var/www/html/dist". chemin d'accès au dossier d'empaquetage de l'application Vue.js.

Enregistrez et quittez le fichier, puis redémarrez Nginx pour que les modifications prennent effet. Entrez la commande suivante dans le terminal de commande :

sudo systemctl restart nginx

4. Déployez l'application Vue.js

Maintenant, l'application Vue.js est prête à être déployée sur le serveur. Le dossier d'empaquetage de votre application Vue.js peut être téléchargé sur le serveur à l'aide d'outils tels que SCP ou FTP. Une fois le téléchargement terminé, assurez-vous de définir les autorisations du dossier d'emballage afin que l'utilisateur Nginx ait accès :

sudo chmod -R 755 /var/www/html/dist

Lorsque l'application Vue.js est déployée avec succès sur le serveur, vous pouvez saisir l'adresse IP du serveur dans un navigateur Web pour accéder à l'application Vue .js.

Résumé

Emballez les applications Vue.js via Vue CLI et utilisez Nginx comme serveur pour le déploiement, vous pouvez déployer rapidement et facilement des applications Vue.js sur Internet. Vous pouvez librement personnaliser le fichier de configuration de Nginx en fonction de vos besoins. Le déploiement d'applications Vue.js nécessite de la prudence, mais c'est aussi une compétence que tout développeur Vue.js doit connaître.

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!