• Empleos
  • Sobre nosotros
  • profesionales
    • Inicio
    • Empleos
    • Cursos y retos
    • Preguntas
    • Profesores
  • empresas
    • Inicio
    • Publicar vacante
    • Nuestro proceso
    • Precios
    • Pruebas Online
    • Nómina
    • Blog
    • Comercial
    • Calculadora de salario

0

1.6K
Vistas
How to change port number in vue-cli project

How to change Port number in Vue-cli project so that it run's on another port instead of 8080.

about 3 years ago · Santiago Trujillo
3 Respuestas
Responde la pregunta

0

If you're using vue-cli 3.x, you can simply pass the port to the npm command like so:

npm run serve -- --port 3000

Then visit http://localhost:3000/

about 3 years ago · Santiago Trujillo Denunciar

0

Late to the party, but I think it's helpful to consolidate all these answers into one outlining all options.

Separated in Vue CLI v2 (webpack template) and Vue CLI v3, ordered by precedence (high to low).

Vue CLI v3

  • package.json: Add port option to serve script: scripts.serve=vue-cli-service serve --port 4000
  • CLI Option --port to npm run serve, e.g. npm run serve -- --port 3000. Note the --, this makes passes the port option to the npm script instead of to npm itself. Since at least v3.4.1, it should be e.g. vue-cli-service serve --port 3000.
  • Environment Variable $PORT, e.g. PORT=3000 npm run serve
  • .env Files, more specific envs override less specific ones, e.g. PORT=3242
  • vue.config.js, devServer.port, e.g. devServer: { port: 9999 }

References:

  • https://cli.vuejs.org/config/#devserver
  • https://cli.vuejs.org/config/#vue-config-js
  • https://cli.vuejs.org/guide/mode-and-env.html

Vue CLI v2 (deprecated)

  • Environment Variable $PORT, e.g. PORT=3000 npm run dev
  • /config/index.js: dev.port

References:

  • http://vuejs-templates.github.io/webpack/
  • https://github.com/vuejs-templates/webpack/blob/develop/template/build/webpack.dev.conf.js#L35
about 3 years ago · Santiago Trujillo Denunciar

0

As the time of this answer's writing (May 5th 2018), vue-cli has its configuration hosted at <your_project_root>/vue.config.js. To change the port, see below:

// vue.config.js
module.exports = {
  // ...
  devServer: {
    open: process.platform === 'darwin',
    host: '0.0.0.0',
    port: 8080, // CHANGE YOUR PORT HERE!
    https: false,
    hotOnly: false,
  },
  // ...
}

Full vue.config.js reference can be found here: https://cli.vuejs.org/config/#global-cli-config

Note that as stated in the docs, “All options for webpack-dev-server” (https://webpack.js.org/configuration/dev-server/) is available within the devServer section.

about 3 years ago · Santiago Trujillo Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Nuestro proceso Comercial
Legal
Términos y condiciones Política de privacidad
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recomiéndame algunas ofertas
Necesito ayuda