Cómo cambiar el número de puerto en el proyecto Vue-cli para que se ejecute en otro puerto en lugar de 8080.

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í

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

npm run serve -- --port 3000

Entonces visita http://localhost:3000/

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:

• 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 (obsoleto)

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

Referencias:

• http://vuejs-templates.github.io/webpack/
• https://github.com/vuejs-templates/webpack/blob/develop/template/build/webpack.dev.conf.js#L35

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.

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 .

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"
},

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.

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"
  },

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.

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, vue@2.6.10 , 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.

Agregue la PORTenvvariable a su servescript en package.json:

"serve": "PORT=4767 vue-cli-service serve",

¡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

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    
         }
}

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 => {}
}