Phenquestions
Número de puerto predeterminado de Vue CLI
Cuando ejecuta un proyecto de Vue con el npm ejecutar servir comando, el número de puerto 8080 se asigna automáticamente al proyecto de Vue, y se ejecuta en ese número de puerto. Mientras ejecuta un Vue.js, la terminal muestra el resultado de la siguiente manera:
$ npm ejecutar servir
En la captura de pantalla anterior, el puerto predeterminado asignado es 8080, donde se está ejecutando el proyecto. En un escenario poco común, 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 libre. Pero, ¿qué sucede si desea cambiar y asignar algún otro número de puerto de su elección?. Veamos y aprendamos cómo cambiar el número de puerto predeterminado en el proyecto Vue CLI.
Cambiar el número de puerto predeterminado de Vue CLI
Bueno, hay dos formas de cambiar el número de puerto asignado por defecto al Vue.proyecto js. Uno 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 se ejecuta Vue.js proyecto usando el npm ejecutar servir; simplemente tienes que añadir - -Puerto con el número de puerto de su deseo al npm ejecutar servir comando como se muestra en el comando dado a continuación:
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 anterior que la aplicación se está ejecutando en el puerto 4000, pero este puerto se asigna temporalmente hasta que la aplicación se esté ejecutando. Una vez que termine el lote y ejecute el proyecto sin proporcionar el puerto al npm ejecutar servir comando, entonces el puerto predeterminado 8080 se asignará nuevamente, o de lo contrario, tendrá que asignar el puerto cada vez que ejecute la aplicación. Afortunadamente, tenemos otro método proporcionado por Vue.js, mediante 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.js proyecto de forma permanente. Simplemente siga los pasos que se indican a continuación, y tendrá su propio número de puerto deseado asignado a su Vue.proyecto js.
Paso 1: Crear un nuevo vue.config.js archivo en el directorio raíz
En primer lugar, debe crear un nuevo archivo en el directorio raíz de su proyecto con el nombre vue.config.js
Paso 2: Agregue el número de puerto en el vue.config.js archivo de configuración
Después de crear el archivo de configuración, ábralo y proporcione el número de puerto deseado como un par clave-valor dentro del devServer 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 hecho esto, guarde la aplicación presionando CTRL + S teclas de método abreviado de teclado e inicie la aplicación.
Paso 3: Ejecute la aplicación
Ahora, inicie la aplicación usando el npm ejecutar servir comando y sin agregar ningún número de puerto.
$ npm ejecutar servir
Verá que el número de puerto 3000 se ha asignado correctamente y la aplicación se está ejecutando en el número de puerto proporcionado en el vue.config.js expediente.
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 de forma temporal y permanente en un proyecto de Vue CLI y se explica en un método paso a paso profundo y fácil de entender.
