export the port

[PanJiaChen]

What problem does this feature solve?

In most cases, the port is our user-defined port.
But sometimes users will start multiple services. At this time vue-cli will use portfinder to start a new port, but the port is not exposed.

proxy: {
 target: `http://localhost:${port}/mock`,
}

Since the port has changed, the request cannot be proxy correctly.

What does the proposed API look like?

process.env.VUE_CLI.port
Or any other way

[LinusBorg]

I'*m not sure about what you are requesting. Do you want to be able to use the dynamically identified port in in that project's config file? Or in another project's config file in order to proxy to the first project?

Either way I see little that we can do here:

• In Case 1: the config is/has to be loaded before we identify a port, so that's pretty hard, and also doesn't make sense?
• In Case 2: we can't expose an environment vriable to the system / another process like that.

[PanJiaChen]

My problem is that the port I set in the vue.config.js is not the final port. Suppose my port is set to 9527, but this port is occupied, vue-cli will use portfinder to find a new port. But I can't get what this specific port is.

[xsbchen]

I think vue-cli should not change the port which i set in vue.config.js.

[xsbchen]

On my macbook:

// vue.config.js
{
  devServer: {
    port: 80
  }
}

but after run vue-cli-service serve , it change to 1024.

set port in vue.config.js means I just want to set the port to what i want, but the result is not what i want.

[PanJiaChen]

portfinder is not very much needed in many scenarios, it is more reasonable to directly prompt it that the port is occupied.

[xsbchen]

@PanJiaChen agree! User Unfriendly.

[PanJiaChen]

@sodatea @LinusBorg

Is it possible to add a portfinder switch? In some cases, when port is occupied, it is better to show error instead of automatically starting a new port.

[LinusBorg]

We have an open PR (#3787) which would throw an error if you specified a port yourself and that port is occupied.

That basically achieves what you ask for.

[scarcoco]

proxy local xxx -> yyy, target need URL

proxy: {
    '/xxx': {
        target: `http://localhost:${port}/yyy`,
    }
}

so how can i get the port wepack-dev-server use ?

[scarcoco]

this can solve my problem

proxy: {
    '/xxx': {
        target: 'any string',
        ...,
        bypass (req) {
        return `http://${req.headers.host}/yyy`
        }
    }
}

[scarcoco]

when port change from to 3001, but /sockjs-node/info always use 300 port, and 404

so how can i fix /sockjs-node/info 404 problem ?

[danielturus]

In case you're on macOS and change port from 80 to something like 8000 and it starts on 8000 it could be solved by starting your Vue app using sudo command. More info here https://stackoverflow.com/a/46813423/7905132

[vegerot]

@danielturus this does not work for me

If I do what you say I get

❯ sudo PORT=80 npx vue-cli-service serve --port 80
Password:
 INFO  Starting development server...
Starting type checking service...
Using 6 workers with 4096MB memory limit
98% after emitting CopyPlugin

 DONE  Compiled successfully in 23906ms                                                                                                                                                                                           5:22:56 PM

Type checking in progress...

  App running at:
  - Local:   http://localhost:1024/
  - Network: http://10.0.0.84:1024/

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

No type errors found
Version: typescript 4.1.5
Time: 24285ms

[danielturus]

@vegerot do you have something running on port 80?