Vue npm run serve starts on random port

Question

I\'m trying to run Vue on port 8080, but can\'t get that to work. I just created a brand new project with vue create . and ran it with npm run serve, w

Answer 1

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 portfinder@1.0.21