vue-cli: 'vue-cli-service serve --port' does not work as advertised

Version

3.10.0

Environment info

 System:
    OS: Linux 4.15 Ubuntu 18.04.3 LTS (Bionic Beaver)
    CPU: (12) x64 AMD Ryzen 5 1600X Six-Core Processor
  Binaries:
    Node: 10.14.1 - ~/.nvm/versions/node/v10.14.1/bin/node
    Yarn: 1.15.2 - ~/.yarn/bin/yarn
    npm: 6.4.1 - ~/.nvm/versions/node/v10.14.1/bin/npm
  Browsers:
    Chrome: 76.0.3809.100
    Firefox: 68.0.2
  npmPackages:
    @vue/babel-helper-vue-jsx-merge-props:  1.0.0 
    @vue/babel-plugin-transform-vue-jsx:  1.0.0 
    @vue/babel-preset-app:  3.10.0 
    @vue/babel-preset-jsx:  1.1.0 
    @vue/babel-sugar-functional-vue:  1.0.0 
    @vue/babel-sugar-inject-h:  1.0.0 
    @vue/babel-sugar-v-model:  1.0.0 
    @vue/babel-sugar-v-on:  1.1.0 
    @vue/cli-overlay:  3.10.0 
    @vue/cli-plugin-babel: ^3.10.0 => 3.10.0 
    @vue/cli-plugin-typescript: ^3.10.0 => 3.10.0 
    @vue/cli-plugin-unit-mocha: ^3.10.0 => 3.10.0 
    @vue/cli-service: ^3.10.0 => 3.10.0 
    @vue/cli-shared-utils:  3.10.0 
    @vue/component-compiler-utils:  2.6.0 (3.0.0)
    @vue/preload-webpack-plugin:  1.1.1 
    @vue/test-utils: 1.0.0-beta.29 => 1.0.0-beta.29 
    @vue/web-component-wrapper:  1.2.0 
    typescript: ^3.4.3 => 3.5.3 
    vue: ^2.6.10 => 2.6.10 
    vue-class-component: ^7.0.2 => 7.1.0 
    vue-hot-reload-api:  2.3.3 
    vue-loader:  15.7.1 
    vue-property-decorator: ^8.1.0 => 8.2.1 
    vue-style-loader:  4.1.2 
    vue-template-compiler: ^2.6.10 => 2.6.10 
    vue-template-es2015-compiler:  1.9.1 
    vuex: ^3.0.1 => 3.1.1 
  npmGlobalPackages:
    @vue/cli: 3.10.0

Steps to reproduce

run ‘npm serve --port <any port number>’ or ‘vue-cli-service serve --port <any port number>’ in terminal.

What is expected?

i expect the server to listen on the declared port argument or print an error

What is actually happening?

a random port is selected between the declared port argument and portfinder’s default max safe port number 40000

i found the code in node_modules/@vue/cli-service/lib/commands/serve.js leveraging portfinder line 80 & 81. it appears portfinder.basePort is set to the port argument, then portfinder.getPortPromise is called, which returns a random port number.

About this issue

Original URL
State: closed
Created 5 years ago
Reactions: 29
Comments: 24 (2 by maintainers)

Commits related to this issue

Fixed stupid portfinder issue: see https://github.com/vuejs/vue-cli/issues/4452 — committed to dukeofharen/httplaceholder by deleted user 5 years ago
Fix for https://github.com/vuejs/vue-cli/issues/4452 — committed to abercrave/vuex-counter by abercrave 5 years ago

Most upvoted comments

Hi @imaginarny @vkaracic , The PR is not merged, you could try patching node_modules/@vue/cli-service/lib/commands/serve.js

A way to workaround the problem is to install old portfinder with:
   npm install portfinder@1.0.21
Best Regards, Michel.

If you use yarn, here’s the corresponding workaround.

Add this to your package.json then run yarn install.

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

+48

ThibaultVlacich on Aug 18, 2019

删了，整个项目，重新拉了个项目，我就解决了这个问题

+27

HMS-0908 on Aug 19, 2019

我安装了electron-cli插件，不知道项目那里被改动了，估计是这个插件导致的问题

+23

HMS-0908 on Aug 19, 2019

Hi @imaginarny @vkaracic , The PR is not merged, you could try patching node_modules/@vue/cli-service/lib/commands/serve.js

A way to workaround the problem is to install old portfinder with:

   npm install portfinder@1.0.21

Best Regards, Michel.

+23

mpromonet on Aug 18, 2019

Was just about to report the same. I’m using 4.0.0-beta.3 release and have the same issue.

  devServer: {
    port: 8080
  },

doesn’t do anything, the port is still a random one.

vkaracic on Aug 18, 2019

Fixed in portfinder v1.0.23, please delete your lockfile and try install the dependencies again.

sodatea on Aug 20, 2019

You can update your apps and remove workarounds. Faulty node-portfinder v1.0.22 was reverted, v1.0.23 is now the same as previously working v1.0.21 #84

imaginarny on Aug 19, 2019

Well, yes. I spent last night trying all 4 methods I could think of but neither worked.

Writing port argument in serve script in package.json "serve": "vue-cli-service serve --port 8080"
Using .env, .env.*, .env.*.local files with variable PORT=8080
Using vue.config.js devServer: { port: 8080 }
By passing an argument in cli command e.g. npm run serve -- --port 8080 or npx vue-cli-service serve --port 8080

imaginarny on Aug 18, 2019

Also want to inform that I started a new vue cli project with portfinder resolved to 1.0.22 and encounter this issue.

specificying portfinder to 1.0.21 solves the problem.

Thanks @mpromonet @ThibaultVlacich

It does not solve the problem, it is a nasty workaround for a problem that should not exist.

emielmolenaar on Aug 19, 2019

Yeah. The previous two days, it still worked. But today, I create a new project, vue.config.js is not worked. What happened.

https://github.com/http-party/node-portfinder/ released a breaking change as a minor bugfix release, that’s what happened…

ThibaultVlacich on Aug 18, 2019

Hi, This problem is reported in https://stackoverflow.com/questions/57536785/vue-npm-run-serve-starts-on-random-port and I submit the PR to avoid this problem https://github.com/vuejs/vue-cli/pull/4451 This PR change a little the behaviour when the port is used, before the next port was use with this modification it will failed. Best Regards, Michel.

mpromonet on Aug 18, 2019