Como Cambiar el Puerto de Vue 3
2 minuto(s)En esta página:
Un servidor de desarrollo en Vue nos permite trabajar en la creación de un proyecto.
Hay ocasiones en donde queremos cambiar el puerto de Vue por algún motivo en particular.
En este tutorial, te enseñaré a Como Cambiar el Puerto de Vue 3, vamos con ello.
Como Cambiar el Puerto de Vue 3 con la Vue CLI
Si has creado tu proyecto usando la Vue CLI, la ruta y el puerto por defecto es http://localhost:8080/
Y se te debe haber generado la siguiente estructura:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
/miapp ├── /node_modules ├── /public ├── /src ├── .gitignore ├── babel.config.js ├── jsconfig.json ├── package-lock.json ├── package.json ├── README.md ├── vue.config.js // Abre este archivo |
Abre el archivo vue.config.js y cambia el puerto agregando lo siguiente:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
const { defineConfig } = require('@vue/cli-service') module.exports = defineConfig({ transpileDependencies: true, devServer: { port: 5000, // Aquí especifica el nuevo puerto puerto }, }) |
Básicamente agregamos devServer y dentro de él definimos el puerto 5000 en port.
Detenemos el servidor y volvemos a ejecutarlo con el siguiente comando y podemos ver que ahora el puerto ha cambiado al 5000:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
npm run serve > miapp@0.1.0 serve > vue-cli-service serve INFO Starting development server... DONE Compiled successfully in 2177ms08:04:33 App running at: - Local: http://localhost:5000/ - Network: http://192.168.0.6:5000/ Note that the development build is not optimized. To create a production build, run npm run build. |
Como Cambiar el Puerto de Vue 3 en Vite JS
Si has creado tu proyecto de Vue con la herramienta Vite JS, puedes hacerlo de varias maneras.
En el siguiente video te comparto 3 maneras de cambiar el puerto de Vue en Vite JS:
Así de rápido puedes Cambiar el Puerto de Vue 3.
Conclusión
En este tutorial has aprendido a Como Cambiar el Puerto de Vue 3.
Te será de ayuda para cuando otras aplicaciones estén usando un puerto o problemas similares.
Recuerda que con la practica constante serás un mejor desarrollador en Vue JS.
Nota(s)
- No olvides que debemos usar la Tecnología para hacer cosas Buenas por el Mundo.
Síguenos en nuestras Redes Sociales para que no te pierdas nuestros próximos contenidos.
- Servidores
- 06-06-2024
- 07-06-2024
- Crear un Post - Eventos Devs - Foro
Seguimos trabajando las 24 horas del día para brindarte la mejor experiencia en la comunidad.
Hemos corregido el problema y ahora la web no muestra esa barra horizontal y se ve en su tamaño natural.
Seguimos trabajando las 24 horas del día, para mejorar la comunidad.
Seguimos trabajando las 24 horas y 365 días del año para mejorar tu experiencia en la comunidad.
Seguimos trabajando para brindarte le mejor experiencia en Nube Colectiva.
Social
Redes Sociales (Developers)
Redes Sociales (Digital)