Comment modifier le numéro de port dans Vue CLI

Vue.JS est un cadre frontal robuste et à la mode. Il est reconnu comme la combinaison de deux cadres spectaculaires, Angular et React, en utilisant la syntaxe de modèles de méthode de réaction angulaire et d'accessoires. Il fournit la façon traditionnelle HTML et CSS de créer un composant, et il est connu pour fabriquer des applications frontales très rapidement et d'une manière facile. Cependant, nous devons souvent faire face à certains problèmes et problèmes ou simplement vouloir une configuration différente, nous allons donc jeter un œil à un scénario où nous devons changer le numéro de port dans le projet Vue CLI. Commençons.

Numéro de port par défaut de Vue CLI

Lorsque vous exécutez un projet Vue en utilisant le SERVIR DE RUNE NPM Commande, le numéro de port 8080 est automatiquement attribué au projet VUE, et il s'exécute sur ce numéro de port. Tout en exécutant un Vue.JS Project, le terminal montre la sortie quelque chose comme ceci:

$ NPM Run Serve

Dans la capture d'écran donnée ci-dessus, le port par défaut attribué est 8080, où le projet fonctionne. Dans un scénario rare, si le port 8080 est occupé, le port 8081 est affecté au projet VUE, et c'est ainsi que cela se poursuit jusqu'à ce qu'il trouve le numéro de port libre. Mais, que se passe-t-il si vous voulez changer et affecter un autre numéro de port de votre choix. Voyons et apprenons à modifier le numéro de port par défaut dans le projet Vue CLI.

Modifier le numéro de port par défaut de Vue CLI

Eh bien, il existe deux façons de modifier le numéro de port par défaut attribué au Vue.projet JS. L'une consiste à modifier temporairement le numéro de port, et le second est de modifier définitivement le numéro de port. Alors, commençons par la première méthode de modification du numéro de port de Vue CLI.

Méthode 1: modifier temporairement le numéro de port
Le numéro de port du projet Vue CLI peut facilement être modifié lors de l'exécution du Vue.Projet JS en utilisant le SERVIR DE RUNE NPM; Vous devez simplement ajouter - -port avec le numéro de port de votre désir au SERVIR DE RUNE NPM Commande comme indiqué dans la commande ci-dessous:

$ NPM Run Server - --port 4000

Maintenant, lorsque le projet est compilé avec succès, vous pouvez voir que le numéro de port est modifié en 4000.

Vous pouvez assister à la capture d'écran donnée ci-dessus que la demande s'exécute au port 4000, Mais ce port est attribué temporairement jusqu'à l'exécution de l'application. Une fois que vous terminez le lot et exécutez le projet sans fournir le port au SERVIR DE RUNE NPM Commande, alors le port par défaut 8080 sera à nouveau attribué, ou autrement, vous devez affecter le port à chaque fois que vous exécutez l'application. Heureusement, nous avons une autre méthode fournie par Vue.JS, en utilisant lequel nous pouvons modifier en permanence le numéro de port de notre projet VUE, alors allons-y et voyons comment modifier le numéro de port du projet Vue CLI en permanence.

Méthode 2: Modifier le numéro de port du projet Vue CLI en permanence
Si vous êtes intéressé à modifier le numéro de port par défaut de votre VUE.Projet JS en permanence. Suivez simplement les étapes ci-dessous, et vous aurez votre propre numéro de port souhaité affecté à votre Vue.projet JS.

Étape 1: Créer un nouveau vue.configurer.js fichier au répertoire racine

Tout d'abord, vous devez créer un nouveau fichier au répertoire racine de votre projet avec le nom vue.configurer.js

Étape 2: Ajouter le numéro de port dans le vue.configurer.js fichier de configuration

Après avoir créé le fichier de configuration, ouvrez-le et fournissez votre numéro de port souhaité en tant que paire de valeurs de clé à l'intérieur du devander Objet dans le module.exportations Comme indiqué dans l'extrait de code ci-dessous:

module.exportations =
DevServer:
Port: 3000

Une fois que vous avez fait cela, enregistrez l'application en appuyant sur Ctrl + s Clés de raccourci clavier et démarrer l'application.

Étape 3: Exécuter l'application

Maintenant, démarrez l'application à l'aide du SERVIR DE RUNE NPM commande et sans ajouter de numéro de port.

$ NPM Run Serve

Vous allez voir que le numéro de port 3000 est attribué avec succès et que l'application s'exécute sur votre numéro de port fourni dans le vue.configurer.js déposer.

C'est ainsi que vous pouvez modifier ou définir le numéro de port de votre choix dans le projet Vue CLI.

Conclusion

Ce message a appris deux façons différentes de modifier ou de définir le numéro de port temporairement et définitivement dans un projet Vue CLI et expliqué dans une méthode profonde et facile à comprendre étape par étape.