Vue npm run serve starts on random port

Note: This issue is specific to node-portfinder v1.0.22. It was resolved in v1.0.23 that is a retag of v1.0.21.

This seems a feature in portfinder that used random series to allocate an available port.

Trying:

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

return something like:

9567

Even if port 8080 is available.

The behaviour change recently in this commit. Before the port were try increasing from basePort to highestport. It comes with the release v1.0.22

Option1: Patching

In order to use the port 8080, I patched the file node_modules/@vue/cli-service/lib/commands/serve.js adding line 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()

Option2: Install portfinder previous to the behaviour change

Another way to workaround waiting for portfinder/vue-cli to choose a solution is to install old portfinder with :

npm install [email protected]

You can temporarily rollback portfinder by placing

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

in your package.json file and run yarn install afterwards.