Vue-cli: export the port

Created on 28 Mar 2019 · 12Comments · Source: vuejs/vue-cli

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

Source

PanJiaChen

👍4

Most helpful comment

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.

xsbchen on 10 Apr 2019

👍11

All 12 comments

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.

LinusBorg on 29 Mar 2019

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.

PanJiaChen on 30 Mar 2019

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

xsbchen on 10 Apr 2019

👍1

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.

xsbchen on 10 Apr 2019

👍11

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

PanJiaChen on 10 Apr 2019

👍2

@PanJiaChen agree! User Unfriendly.

xsbchen on 10 Apr 2019

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

PanJiaChen on 7 May 2019

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.

LinusBorg on 7 May 2019

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 on 31 Oct 2019

this can solve my problem

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

scarcoco on 31 Oct 2019

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 ?

scarcoco on 1 Nov 2019

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