Maison > interface Web > Questions et réponses frontales > vue de déploiement de l'environnement de production nodejs

vue de déploiement de l'environnement de production nodejs

WBOY
Libérer: 2023-05-14 10:26:37
original
745 Les gens l'ont consulté

Déploiement en production Node.js de Vue

Lors du développement d'une application Vue.js, le déploiement de votre application est une étape cruciale. Cet article vous montrera comment déployer une application Vue.js dans un environnement de production, en utilisant Node.js comme environnement d'exécution. Dans cet article, nous verrons de plus près comment ajouter une application à un environnement de production et l'exécuter sur un serveur.

Préparation

Avant de commencer, vous devez installer Node.js, npm et Git sur le serveur. Dans cet article, nous utiliserons UbuntuLinux comme serveur, mais vous pouvez également utiliser des étapes similaires pour déployer sur d'autres systèmes :

  1. Installez Node.js et npm :

1

2

3

4

$ sudo apt-get install curl

$ curl -sL https://deb.nodesource.com/setup_10.x | sudo -E bash -

$ sudo apt-get install nodejs

$ sudo apt-get install npm

Copier après la connexion
  1. Confirmez que Node.js et npm sont correctement installés :

1

2

$ node -v

$ npm -v

Copier après la connexion
  1. Installez Git :

1

$ sudo apt-get install git

Copier après la connexion
  1. Confirmez si Git est installé correctement :

1

$ git --version

Copier après la connexion

Installez Vue CLI

Vue CLI est un outil de ligne de commande officiel basé sur Vue.js, qui peut nous aider à construire rapidement Application Vue.js. Nous devons installer Vue CLI globalement sur le serveur :

1

$ npm install -g @vue/cli

Copier après la connexion

Vous pouvez vérifier si Vue CLI a été correctement installé en exécutant la commande suivante :

1

$ vue --version

Copier après la connexion

Créer une application Vue.js

Ensuite, nous voulons créer une Vue. jsapplication. Nous pouvons facilement créer un nouveau projet à l'aide de Vue CLI ou utiliser un projet existant.

  1. Allez dans le répertoire où vous souhaitez créer le projet dans le terminal :

1

$ cd /path/to/directory

Copier après la connexion
  1. Créez un nouveau projet Vue.js en utilisant la Vue CLI :

1

$ vue create my-project

Copier après la connexion

Ici, my-project est le nom de votre projet . Lorsque vous exécutez cette commande, vous verrez quelques options pour personnaliser votre projet Vue.js. Il créera une nouvelle application Vue.js pour vous et installera toutes les dépendances nécessaires.

  1. Allez dans le projet que vous venez de créer :

1

$ cd my-project

Copier après la connexion
  1. Démarrez l'application Vue.js :

1

$ npm run serve

Copier après la connexion

Créez une version de production

Maintenant, nous devons créer une version de production pour notre application. La version de production optimisera notre application pour être plus efficace et réduire le code inutile. Nous pouvons utiliser la commande suivante pour créer une build de production pour notre application :

1

$ npm run build

Copier après la connexion

Cette commande créera une build de production dans le répertoire dist de votre application. À ce stade, nous sommes prêts à déployer l’application en production.

Déploiement de l'application Vue.js

Maintenant que nous avons créé la version de production, nous allons déployer notre application en production en suivant les étapes suivantes :

  1. Créez un répertoire vide sur votre serveur pour les fichiers de stockage de votre application.

1

$ mkdir /var/www/myapp

Copier après la connexion
  1. Téléchargez les fichiers de build de votre application depuis votre ordinateur local vers le serveur. Vous pouvez utiliser la commande scp pour télécharger la version de votre application ou vous pouvez utiliser Git :

1

$ git clone <repository-url> /var/www/myapp

Copier après la connexion
  1. Installez le serveur http et pm2 :

1

2

$ npm install -g http-server

$ npm install -g pm2

Copier après la connexion
  1. Démarrez le serveur http dans le répertoire myapp :

1

$ http-server dist

Copier après la connexion
  1. dans Démarrez le pm2 process dans le répertoire myapp :

1

$ pm2 start http-server --name myapp -- --cors -p 80

Copier après la connexion

Cette commande démarrera un processus pm2 et démarrera l'application en tant que processus de serveur http. Il définit également le port de l'application sur 80 afin que l'application puisse être visualisée en accédant à l'adresse IP de l'hôte.

Conclusion

Maintenant, nous avons déployé avec succès l'application Vue.js en production. Si vous avez suivi les étapes de cet article, vous devriez déjà pouvoir visualiser votre application sur le serveur. Si vous avez des questions ou rencontrez des problèmes, n'hésitez pas à laisser un message ou à consulter la documentation officielle de Vue.js ou Node.js pour trouver plus de solutions.

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!

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal