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

[captainrdubb]

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 ' or 'vue-cli-service serve --port ' 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.

[blue-skyyy]

I have same question.
version: 3.10.0
I want change the port of project. but it not works.
vue.config.js module.exports = { devServer: { port: 8091, open: true }, lintOnSave: false };
cll --port also not works.

[mpromonet]

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.

[vkaracic]

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.

[imaginarny]

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

[mpromonet]

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 [email protected]

Best Regards,
Michel.

[XLearner]

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

[ThibaultVlacich]

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

[designbydc]

Yes, same problem here. The vue.config.js in my project is loading fine but the port 8080 or other port number will not be replaced

[pravosleva]

--port option does not work.

node 10.16.3
yarn 1.17.3
@vue/[email protected] (and @vue/[email protected] too)

Or vue-cli-service serve --port 3000 in package.json script like this:

...But not specified port will be used. Could anybody please help me? )

• And also, tcp port 3000 was killed in dev.sh before start by $ yarn --cwd ./frontend serve.
• All deps installed: $ rm -rf ./node_modules && yarn install in /frontend
• Then I tried this: @vue/[email protected] installed globally. But not specified port will be used again (screen below).

[pravosleva]

@bokub Why should I have to use vue serve when vue-cli asked me what gonna be used yarn or npm? yarn was selected already.
/frontend directory was created by $ vue create frontend as project with base files pack. In settings i selected yarn to use. So project could be started by $ yarn serve.

[pravosleva]

_For example_ $ vue serve --port 3000 from terminal:

[bokub]

@pravosleva The message is pretty explicit, it says that a valid entry file has not been found.
An entry file is required for instant prototyping, as explained here

Again, you confuse vue-cli-service serve (which is what this thread is about) with vue serve, a completely different command.

[ThibaultVlacich]

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 [email protected]

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

[aleiphoenix]

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

[emielmolenaar]

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.

[wizardnet972]

When I run vue create my-app and after cd my-app && npm run serve then I get it run on random port.

[pravosleva]

@ThibaultVlacich Ok. Could you please help me with this:

babal-loader already installed (locally and globally), but project could not be started.
_PS: Solved. But this explicit way only:_ $ yarn add [email protected]

[HMS-0908]

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

[HMS-0908]

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

[davelsan]

Thank you, @ThibaultVlacich. I looked for a solution akin to yarn resolutions, but using pnpm. The answer was to use pnpm hooks.

If anyone is interested, this is the tentative workaround I am currently using. It works for me, but use on your own responsibility:

• Create pnpmfile.js in the project's root with the code below
• Delete or rename pnpm-lock.yaml
• Run pnpm install.

// pnpmfile.js

module.exports = {
    hooks: {
        readPackage
    }
};

function readPackage (pkg, context) {
    if (pkg.name === '@vue/cli-service') {
        pkg.dependencies = { portfinder: '1.0.21' };
        context.log(`${pkg.name}_${pkg.version}/portfinder 1.0.22 => 1.0.21`);
    }

    return pkg;
}

The hook could check for @vue/cli-service version, not only the name. But since this is a workaround until a patch is merged, I don't think it is much of a problem. Once this issue is fixed, this workaround will no longer be necessary.

[mashrabbek]

same issue, last update of vue-cli didnt fix the issue if problem is solved

[imaginarny]

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

[sodatea]

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

[therealshark]

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

In case you want to leave the other project dependendcies locked you can also only delete the lockfinder part in the package-lock :)

"portfinder": {
      "version": "1.0.22",
     ...
},