Comment déployer le projet Vue.js dans l'environnement Node.js

Avec le développement continu de la technologie front-end, de plus en plus de projets front-end doivent interagir avec le back-end pour réaliser plus de fonctions. En tant que framework front-end léger, Vue.js a été largement utilisé dans le développement front-end. Node.js est un environnement JavaScript back-end open source qui permet à JavaScript de s'exécuter côté serveur. Dans cet article, nous apprendrons comment déployer un projet Vue.js dans un environnement Node.js.

Étape 1 : Créer un projet Vue.js

Tout d'abord, nous devons créer un projet Vue.js. Nous pouvons utiliser Vue CLI pour créer rapidement une structure de projet Vue.js standard.

Pour créer un projet Vue.js, suivez ces étapes :

1. Installez Vue CLI à l'aide de la commande suivante dans le terminal :

npm install -g @vue/cli

2. Créez un nouveau projet Vue.js à l'aide de la commande suivante :

vue create my-project

3. Exécutez la commande suivante pour démarrer le serveur de développement Vue.js :

cd my-project
npm run serve

Maintenant, nous avons créé un projet Vue.js et l'avons démarré sur le serveur de développement. Nous pouvons utiliser un navigateur pour accéder à ce serveur et visualiser nos projets.

Étape 2 : Construire le projet Vue.js

Une fois que nous avons terminé le développement du projet Vue.js, nous devons l'intégrer dans les fichiers requis pour l'environnement de production. Vue CLI nous a déjà aidé à mettre en place la commande build, il nous suffit d'exécuter la commande suivante :

npm run build

Cette commande construira notre projet Vue.js et enregistrera tous les fichiers générés dans le dossier "dist". Ces fichiers incluent HTML, CSS, JavaScript et d'autres fichiers de ressources nécessaires.

Troisième étape : créer un serveur Node.js

Maintenant, nous devons créer un serveur Node.js pour notre projet Vue.js. Nous pouvons utiliser le framework express de Node.js pour créer notre serveur.

Pour créer un serveur Node.js, suivez ces étapes :

1. Installez le framework express à l'aide de la commande suivante :

npm install express --save

2. Créez un nouveau dossier à la racine de notre projet Vue.js, nommez-le " serveur" .
3. Créez un nouveau fichier JavaScript dans le dossier "server" et nommez-le "index.js".
4. Dans le fichier "index.js", entrez le code suivant pour créer un serveur HTTP simple :

const express = require('express')
const app = express()

app.use(express.static('dist'))

app.listen(3000, () => {
  console.log('Listening on port 3000')
})

Ce code démarrera un simple serveur HTTP et transformera tous les fichiers du dossier "dist" en statique Documentation fournie. Nous pouvons accéder à ce serveur dans un navigateur et visualiser notre projet Vue.js.

Étape 4 : Déployer le projet Vue.js sur le serveur Node.js

Enfin, nous devons déployer notre projet Vue.js sur notre serveur Node.js.

Pour déployer votre projet Vue.js, suivez ces étapes :

1. Copiez le dossier "dist" de notre projet Vue.js dans notre serveur Node.js. Vous pouvez utiliser FTP ou d'autres outils de transfert de fichiers pour terminer ce processus.
2. Dans le serveur Node.js, rendez-vous dans le dossier "dist" de notre projet Vue.js.
3. Exécutez la commande suivante pour démarrer notre serveur Node.js :

node server/index.js

Maintenant, notre projet Vue.js a été déployé avec succès sur le serveur Node.js. Nous pouvons accéder à ce serveur dans un navigateur et visualiser notre projet Vue.js.

Résumé

Cet article explique comment déployer le projet Vue.js dans l'environnement Node.js. Nous avons d'abord créé un projet Vue.js à l'aide de Vue CLI et construit le projet à l'aide de la commande npm run build. Nous avons ensuite créé un simple serveur Node.js en utilisant le framework express et finalement déployé notre projet Vue.js sur ce serveur. J'espère que cet article inspirera les développeurs Vue.js et Node.js et aidera à réaliser des projets plus intéressants.

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!