Cómo cambiar el número de puerto en el proyecto vue-cli

Respuestas:

20

El puerto para la plantilla de paquete web Vue-cli se encuentra en la raíz de la aplicación myApp/config/index.js.

Todo lo que tienes que hacer es modificar el portvalor dentro del devbloque:

 dev: {
    proxyTable: {},
    env: require('./dev.env'),
    port: 4545,
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    cssSourceMap: false
  }

Ahora puede acceder a su aplicación con localhost:4545

también si tiene un .envarchivo mejor configurarlo desde allí

samayo
fuente
18
En la última versión de vuejs. El archivo ya no se usa, en su lugar se usa: <your_project_root> /vue.config.js.
Jianwu Chen
3
¡El archivo myApp/config/index.jsno existe!
exhuma
3
Vue CLI 3 usa vue.config.js en la raíz del proyecto. Tiene que ser creado manualmente IIRC.
Ege Ersoz
1
no hay vue.config.js allí
Geomorillo
19
"scripts": { "serve": "vue-cli-service serve --port 80" },
Sudhir K Gupta
124

Si está usando vue-cli3.x, simplemente puede pasar el puerto al npmcomando así:

npm run serve -- --port 3000

Entonces visita http://localhost:3000/

Nick Litwin
fuente
7
Me ahorraste un tiempo precioso, ya que el primero --no está escrito en el documento: cli.vuejs.org/guide/cli-service.html#using-the-binary . Estaba escribiendo npm run serve --port 3000lo que me parece lógico, pero tengo errores ... ¡Pulgar hacia arriba!
toni07
3
Eso es porque el primero --escapa a los parámetros dados a npm run servey no a vue-cli-service. Si edita package.jsony el servecomando directamente, lo ingresa como se muestra en la documentación:"serve": "vue-cli-service serve --port 3000",
MatsLindh
93

Tarde para la fiesta, pero creo que es útil consolidar todas estas respuestas en una que describa todas las opciones.

Separados en Vue CLI v2 (plantilla de paquete web) y Vue CLI v3, ordenados por precedencia (de mayor a menor).

Vue CLI v3

  • package.json: Agregue la opción de puerto al servescript:scripts.serve=vue-cli-service serve --port 4000
  • Opción CLI --portpara npm run serve, por ejemplo npm run serve -- --port 3000. Tenga en cuenta que --esto hace que pase la opción de puerto al script npm en lugar de al propio npm. Desde al menos v3.4.1, debería ser, por ejemplo vue-cli-service serve --port 3000.
  • Variable de entorno $PORT, p. Ej.PORT=3000 npm run serve
  • .env Archivos, envs más específicos anulan los menos específicos, por ejemplo PORT=3242
  • vue.config.js, devServer.portpor ejemplodevServer: { port: 9999 }

Referencias:

Vue CLI v2 (obsoleto)

  • Variable de entorno $PORT, p. Ej.PORT=3000 npm run dev
  • /config/index.js: dev.port

Referencias:

wwerner
fuente
3
Parece que este cambió un poco en la última CLI vue (usando 3.4.1), aquí está mi línea de "servir" en package.json: "serve": "vue-cli-service serve --port 4000",. ¡Funciona genial!
RoccoB
@RoccoB Gracias, lo verifiqué y lo agregué a la respuesta.
wwerner
Las respuestas anteriores no parecen funcionar en v3 en esta fecha. Probé la opción .env, package.json, vue.config.js y la opción de comando CLI, pero todas se ignoran. Los documentos del archivo de configuración dicen "Algunos valores como host, porty httpspueden ser sobrescritos por indicadores de línea de comando". cli.vuejs.org/config/#devserver ¿Me estoy perdiendo algo? ¿Alguien más tiene problemas?
Ryan
2
@Ryan: esto se informó ayer en los problemas del repositorio de la CLI de VueJS: github.com/vuejs/vue-cli/issues/4452 Se dice que instale portfinder ( github.com/http-party/node-portfinder ) ya que había un rompiendo el cambio que sucedió con eso.
Angelo
38

En el momento de escribir esta respuesta (5 de mayo de 2018), vue-clitiene su configuración alojada en <your_project_root>/vue.config.js. Para cambiar el puerto, consulte a continuación:

// 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,
  },
  // ...
}

La vue.config.jsreferencia completa se puede encontrar aquí: https://cli.vuejs.org/config/#global-cli-config

Tenga en cuenta que, como se indica en los documentos, "Todas las opciones para webpack-dev-server" ( https://webpack.js.org/configuration/dev-server/ ) está disponible dentro de la devServersección.

TomyJaya
fuente
1
@srf: Respuesta editada. Gracias por señalar el enlace roto.
TomyJaya
Debe haber sido un \. efecto en ese sitio :)
killjoy
12

Otra opción si está usando vue cli 3 es usar un archivo de configuración. Haga un vue.config.jsal mismo nivel que el suyo package.jsony coloque una configuración como esta:

module.exports = {
  devServer: {
    port: 3000
  }
}

Configurándolo con el script:

npm run serve --port 3000

funciona muy bien, pero si tiene más opciones de configuración, me gusta hacerlo en un archivo de configuración. Puede encontrar más información en los documentos .

derFBeste
fuente
1
Me gusta esta respuesta, ya que muestra que vue.config.js se puede usar para cambiar el puerto y dejar todo lo demás como está, que es lo que se preguntó originalmente.
Twisted
9

La mejor manera es actualizar el comando de script de servicio en su package.jsonarchivo. Solo agregue --port 3000así:

"scripts": {
  "serve": "vue-cli-service serve --port 3000",
  "build": "vue-cli-service build",
  "inspect": "vue-cli-service inspect",
  "lint": "vue-cli-service lint"
},
Julien Le Coupanec
fuente
8

En el webpack.config.js:

module.exports = {
  ......
  devServer: {
    historyApiFallback: true,
    port: 8081,   // you can change the port there
    noInfo: true,
    overlay: true
  },
  ......
}

Puede cambiar el puerto en module.exports-> devServer-> port.

Luego restringe el npm run dev. Puedes conseguir eso.

aeronave
fuente
8

Si desea cambiar el puerto localhost, puede cambiar la etiqueta de scripts en package.json :

 "scripts": {
    "serve": "vue-cli-service serve --port 3000",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
Fatih Başar
fuente
Muchas gracias :-)
Adam Orlov
5

Un enfoque alternativo con la vue-cliversión 3 es agregar un .envarchivo en el directorio raíz del proyecto (junto package.json) con el contenido:

PORT=3000

Ejecutando npm run serveahora indicará que la aplicación se está ejecutando en el puerto 3000.

Chris Dickson
fuente
4

Aquí hay muchas respuestas que varían según la versión, por lo que pensé en confirmar y exponer la respuesta de Julien Le Coupanec anterior de octubre de 2018 al usar la CLI de Vue . En la versión más reciente de Vue.js a partir de esta publicación, [email protected] , los pasos descritos a continuación tuvieron más sentido para mí después de revisar algunas de las innumerables respuestas en esta publicación. La documentación de Vue.js hace referencia a piezas de este rompecabezas, pero no es tan explícita.

  1. Abra el package.jsonarchivo en el directorio raíz del proyecto Vue.js.
  2. Busque "puerto" en el package.jsonarchivo.
  3. Al encontrar la siguiente referencia a "puerto", edite el serveelemento de script para reflejar el puerto deseado, usando la misma sintaxis que se muestra a continuación:

    "scripts": {
      "serve": "vue-cli-service serve --port 8000",
      "build": "vue-cli-service build",
      "lint": "vue-cli-service lint"
    }
    
  4. Asegúrese de reiniciar el npmservidor para evitar una locura innecesaria.

La documentación muestra que se pueden obtener de manera efectiva el mismo resultado mediante la adición --port 8080al final del npm run servecomando, así: npm run serve --port 8080. Preferí editar package.jsondirectamente para evitar escribir más, pero editar en npm run serve --port 1234línea puede ser útil para algunos.

Kevin
fuente
1

Agregue la PORTenvvariable a su servescript en package.json:

"serve": "PORT=4767 vue-cli-service serve",
Dominic
fuente
1

¡Oh Dios mío! No es tan complicado, con estas respuestas que también funciona. Sin embargo, hay otras respuestas aunque esta pregunta también funciona bien.

Si realmente desea utilizar el vue-cli-servicey si usted quiere tener la configuración del puerto en su package.jsonarchivo, que su 'vue crear <app-name>' comando crea básicamente, puede utilizar la siguiente configuración: --port 3000. Entonces, toda la configuración de su script sería así:

...
"scripts": {
"serve": "vue-cli-service serve --port 3000",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
...

Lo estoy usando @vue/cli 4.3.1 (vue --version)en un dispositivo macOS.

También agregué la referencia de vue-cli-service: https://cli.vuejs.org/guide/cli-service.html

Ebrahim
fuente
0

En mi proyecto vue en código de Visual Studio, tuve que configurar esto en /config/index.js . Cámbielo en:

module.exports = {
    dev: {
          // Paths
          assetsSubDirectory: 'static',
          assetsPublicPath: '/',
          proxyTable: {},

          host: 'localhost', // can be overwritten by process.env.HOST
          port: 8090, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
          autoOpenBrowser: false,
          errorOverlay: true,
          notifyOnErrors: true,
          poll: false    
         }
}
Terje Solem
fuente
0

Vaya a node_modules/@vue/cli-service/lib/options.js
En la parte inferior del "devServer", desbloquee los códigos.
Ahora proporcione el número de puerto deseado en el "puerto" :)

devServer: {
   open: process.platform === 'darwin',
   host: '0.0.0.0',
   port: 3000,  // default port 8080
   https: false,
   hotOnly: false,
   proxy: null, // string | Object
   before: app => {}
}
MRIDUAVA
fuente
3
ir a node_modules / @ vue / cli-service ...? ¿No se sobrescribe eso en la actualización npm?
Joeri