vue.js - Vue npm run serve comienza en un puerto aleatorio

Question

Estoy tratando de ejecutar Vue en el puerto 8080, pero no puedo hacer que eso funcione. Acabo de crear un nuevo proyecto con vue create . y lo ejecutó con npm run serve , que inicia la aplicación en un puerto aleatorio.

Primer intento

Ejecute npm run serve sin ninguna configuración adicional

$ npm run serve

> [email protected] serve /Users/ne/projects/vue-demo
> vue-cli-service serve

 INFO  Starting development server...
Starting type checking service...
Using 1 worker with 2048MB memory limit
 98% after emitting CopyPlugin

 DONE  Compiled successfully in 4294ms                                                                                                              3:21:35 PM

No type errors found
Version: typescript 3.5.3
Time: 4267ms

  App running at:
  - Local:   http://localhost:20415/
  - Network: http://192.168.178.192:20415/

  Note that the development build is not optimized.
  To create a production build, run npm run build.

Así que primero verifiqué si otra aplicación se está ejecutando en ese puerto con lsof -i :8080 pero eso no dio resultados.

Segundo intento

Entonces, el segundo intento fue forzar el puerto a través del cli con npm run serve -- --port 8080 , que todavía inició la aplicación en un puerto aleatorio, pero no hubo errores en la consola del navegador.

Tercer intento

Luego intenté configurar la aplicación en vue.config.js .

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

Lo que tampoco funcionó e incluso arroja una excepción en la consola del navegador:

15:25:20.889 :8080/sockjs-node/info?t=1566048320873:1 Failed to load resource: net::ERR_CONNECTION_REFUSED
15:25:20.910 client?81da:172 [WDS] Disconnected!
close @ client?81da:172
15:25:21.982 :8080/sockjs-node/info?t=1566048321978:1 Failed to load resource: net::ERR_CONNECTION_REFUSED
15:25:23.079 :8080/sockjs-node/info?t=1566048323075:1 Failed to load resource: net::ERR_CONNECTION_REFUSED
15:25:25.097 :8080/sockjs-node/info?t=1566048325091:1 Failed to load resource: net::ERR_CONNECTION_REFUSED
15:25:29.151 VM14:1 GET http://localhost:8080/sockjs-node/info?t=1566048329145 net::ERR_CONNECTION_REFUSED

package.json

Agregué package.json, ya que podría estar perdiendo algo aquí.

{
  "name": "frontend",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "test:unit": "vue-cli-service test:unit"
  },
  "dependencies": {
    "core-js": "^2.6.5",
    "vue": "^2.6.10",
    "vue-class-component": "^7.0.2",
    "vue-property-decorator": "^8.1.0",
    "vue-router": "^3.0.3",
    "vuex": "^3.0.1"
  },
  "devDependencies": {
    "@types/jest": "^23.1.4",
    "@vue/cli-plugin-babel": "^3.10.0",
    "@vue/cli-plugin-eslint": "^3.10.0",
    "@vue/cli-plugin-typescript": "^3.10.0",
    "@vue/cli-plugin-unit-jest": "^3.10.0",
    "@vue/cli-service": "^3.10.0",
    "@vue/eslint-config-airbnb": "^4.0.0",
    "@vue/eslint-config-typescript": "^4.0.0",
    "@vue/test-utils": "1.0.0-beta.29",
    "babel-core": "7.0.0-bridge.0",
    "babel-eslint": "^10.0.1",
    "eslint": "^5.16.0",
    "eslint-plugin-vue": "^5.0.0",
    "node-sass": "^4.9.0",
    "sass-loader": "^7.1.0",
    "ts-jest": "^23.0.0",
    "typescript": "^3.4.3",
    "vue-template-compiler": "^2.6.10"
  }
}

¿Qué me estoy perdiendo?

Answer 1

La mayoría de las veces el error ocurrió cuando algo se está ejecutando en el mismo puerto. Pero como mencionó anteriormente, lo ha verificado y no hay nada en él.

¿Has intentado reiniciar o apagar tu sistema y volver a ejecutar el servidor? Si no lo intentas, a veces me ha funcionado.

En segundo lugar, sería una ayuda completa si comparte el objeto de Scripts en package.json.

He revisado su problema y descubrí que este article puede ser útil. Avísame si el error aún existe.

Answer 2

Puede revertir temporalmente el portfinder colocando

"resolutions": {
  "@vue/cli-service/portfinder": "1.0.21"
}

en su archivo package.json y ejecute yarn install luego.

Answer 3

Nota: Este problema es específico de node-portfinder github.com/http-party/node-portfinder/releases/tag/v1.0.22 . Se resolvió en v1.0.23 que es una nueva versión de v1.0.21.

Esto parece una característica en el buscador de puertos que utilizó series aleatorias para asignar un puerto disponible.

Molesto:

const portfinder = require(''portfinder'');
portfinder.basePort=8080
portfinder.getPortPromise().then((port) => { console.log(port) })

devolver algo como:

9567

Incluso si el puerto 8080 está disponible.

El comportamiento cambió recientemente en este commit . Antes de que el puerto intentara aumentar de puerto base a puerto más alto. Viene con el lanzamiento github.com/http-party/node-portfinder/releases/tag/v1.0.22

Opción 1: parches

Para usar el puerto 8080, parcheé el archivo node_modules/@vue/cli-service/lib/commands/serve.js agregando la línea 322 portfinder.highestPort = portfinder.basePort + 1

portfinder.basePort = args.port || process.env.PORT || projectDevServerOptions.port || defaults.port
portfinder.highestPort  = portfinder.basePort + 1
const port = await portfinder.getPortPromise()

Presento este PR a vue-cli.

Opción 2: Instalar portfinder antes del cambio de comportamiento

Otra forma de solucionar el problema de esperar a que portfinder / vue-cli elija una solución es instalar el viejo portfinder con:

npm install [email protected]

Opción 3: esperando el próximo lanzamiento del portfinder

Hay una solicitud de extracción pendiente para revertir el comportamiento predeterminado a https://github.com/http-party/node-portfinder/pull/86 secuencial.