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

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 :

$ 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

2. Confirmez que Node.js et npm sont correctement installés :

$ node -v
$ npm -v

3. Installez Git :

$ sudo apt-get install git

4. Confirmez si Git est installé correctement :

$ git --version

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 :

$ npm install -g @vue/cli

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

$ vue --version

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 :

$ cd /path/to/directory

2. Créez un nouveau projet Vue.js en utilisant la Vue CLI :

$ vue create my-project

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.

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

$ cd my-project

4. Démarrez l'application Vue.js :

$ npm run serve

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 :

$ npm run build

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.

$ mkdir /var/www/myapp

2. 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 :

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

3. Installez le serveur http et pm2 :

$ npm install -g http-server
$ npm install -g pm2

4. Démarrez le serveur http dans le répertoire myapp :

$ http-server dist

5. dans Démarrez le pm2 process dans le répertoire myapp :

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

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!