Cómo cambiar el número de puerto en Vue CLI

Vue.JS es un marco frontal robusto y moderno. Se reconoce como la combinación de dos marcos espectaculares, angular y reaccionamiento, utilizando la sintaxis de plantilla del método angular y de accesorios de reacción. Proporciona la forma tradicional de HTML y CSS para crear un componente, y es conocido por hacer que las aplicaciones frontales sean realmente rápidas y de una manera fácil. Sin embargo, a menudo tenemos que enfrentar algunos problemas y problemas o simplemente queremos una configuración diferente, por lo que echaremos un vistazo a un escenario en el que necesitamos cambiar el número de puerto en el proyecto VUE CLI. Empecemos.

Número de puerto predeterminado de Vue CLI

Cuando ejecuta un proyecto VUE usando el NPM Run Servir Comando, el número de puerto 8080 se asigna automáticamente al proyecto VUE, y se ejecuta en ese número de puerto. Mientras ejecuta un vue.JS Project, el terminal muestra la salida algo como esto:

Servicio de ejecución de $ npm

En la captura de pantalla dada anteriormente, el puerto predeterminado asignado es 8080, donde el proyecto se está ejecutando. En un escenario raro, si el puerto 8080 está ocupado, el puerto 8081 se asigna al proyecto VUE, y así es como continúa hasta que encuentra el número de puerto gratuito. Pero, ¿qué pasa si desea cambiar y asignar algún otro número de puerto de su propia elección?. Veamos y aprendamos cómo cambiar el número de puerto predeterminado en el proyecto VUE CLI.

Cambie el número de puerto predeterminado de Vue CLI

Bueno, hay dos formas de cambiar el número predeterminado asignado un número de puerto al VUE.proyecto JS. Una es cambiar el número de puerto temporalmente, y el segundo es cambiar permanentemente el número de puerto. Entonces, comencemos con el primer método para cambiar el número de puerto de Vue CLI.

Método 1: Cambiar el número de puerto temporalmente
El número de puerto del proyecto Vue CLI se puede cambiar fácilmente mientras ejecuta el VUE.proyecto JS utilizando el NPM Run Servir; simplemente tienes que agregar - -puerto con el número de puerto de su deseo al NPM Run Servir comando como se muestra en el comando que se da a continuación:

$ NPM Run Servir ---port 4000

Ahora, cuando el proyecto se compila correctamente, puede ver que el número de puerto se cambia a 4000.

Puede presenciar en la captura de pantalla dada anteriormente que la aplicación se está ejecutando en el puerto 4000, Pero este puerto se asigna temporalmente hasta que la aplicación se ejecute. Una vez que termina el lote y ejecute el proyecto sin proporcionar el puerto al NPM Run Servir Comando, luego el puerto predeterminado 8080 se asignará nuevamente, o de otra manera, debe asignar el puerto cada vez que ejecute la aplicación. Afortunadamente, tenemos otro método proporcionado por Vue.JS, utilizando el cual podemos cambiar permanentemente el número de puerto de nuestro proyecto VUE, así que sigamos adelante y veamos cómo cambiar el número de puerto del proyecto VUE CLI de forma permanente.

Método 2: Cambiar el número de puerto del proyecto VUE CLI de forma permanente
Si está interesado en cambiar el número de puerto predeterminado de su Vue.proyecto JS permanentemente. Simplemente siga los pasos que se dan a continuación, y tendrá su propio número de puerto deseado asignado a su Vue.proyecto JS.

Paso 1: Crear un nuevo vue.configuración.js Archivo en el directorio root

En primer lugar, debe crear un nuevo archivo en el directorio raíz de su proyecto con el nombre vue.configuración.js

Paso 2: Agregar número de puerto en el vue.configuración.js archivo de configuración

Después de crear el archivo de configuración, abra y proporcione su número de puerto deseado como un par de valores clave dentro del devasco objeto en el módulo.exportaciones Como se muestra en el fragmento de código a continuación:

módulo.exportaciones =
DevServer:
Puerto: 3000

Una vez que haya hecho eso, guarde la aplicación presionando Ctrl + S teclas de acceso directo de teclado e iniciar la aplicación.

Paso 3: Ejecutar la aplicación

Ahora, comience la aplicación usando el NPM Run Servir comando y sin agregar ningún número de puerto.

Servicio de ejecución de $ npm

Será testigo de que el número de puerto 3000 se asigna correctamente, y la aplicación se ejecuta en su número de puerto proporcionado en el vue.configuración.js archivo.

Así es como puede cambiar o establecer el número de puerto de su propia elección en el proyecto VUE CLI.

Conclusión

Esta publicación ha aprendido dos formas diferentes de cambiar o establecer el número de puerto temporal y permanentemente en un proyecto VUE CLI y explicado en un método profundo y fácil de entender paso a paso.