Vue CLI run serve always running on localhost

Question

I have a vue.js project created with Vue CLI and npm run serveit always run on localhost.

I want to access from my phone (another IP inside the same network), so I want the serve to run on 0.0.0.0. I tried adding the vue.config.js file and setting the host:

module.exports = {
    publicPath: '/',
    devServer: {
        host: '0.0.0.0',
        port: 8080
    }
}

Changing the port works fine, but the host override is ignored. This is the output of serve:

App running at:
  - Local:   http://localhost:8080/
  - Network: http://192.168.0.21:8080/

At first I thought it was being ignored, so I tried setting the host to 0.0.0.1 and the output is "correct", so the file is not ignored, only the 0.0.0.0 is being changed to localhost:

  App running at:
  - Local:   http://0.0.0.1:8080/
  - Network: http://0.0.0.1:8080/

I saw in some forums that devServer has a public option to set the URL, but if I try setting pubic: 'http://0.0.0.0:8080/' I get an error:

> npm run serve
Debugger attached.

> [email protected] serve <my project path>
> vue-cli-service serve

Debugger attached.
 INFO  Starting development server...
 ERROR  ValidationError: webpack Dev Server Invalid Options

options should NOT have additional properties

ValidationError: webpack Dev Server Invalid Options

options should NOT have additional properties

I need to run the server on 0.0.0.0 so I can test it on my phone.

Any help will be very appreciated.

selfagency · Accepted Answer · 2021-06-17 17:37:54Z

1

You shouldn't need to run it on 0.0.0.0 from your local machine to test it on your phone. As long as the port on which it's running is open to external traffic and your phone is connected to your LAN via wifi, you can just put the IP address of your computer and the port # in as the URL.

answered Jun 17, 2021 at 17:37

selfagency

1,5881 gold badge9 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Lluis Queralt Over a year ago

I already tried connecting to http://192.168.0.21:8080/ from the phone as you suggested, but it didn't work. Also, I don't get why I should need the port open to external traffic if the phone is in my LAN via wifi, but I'll try that.

selfagency Over a year ago

Just open port 8080 on your computer's firewall.

Lluis Queralt Over a year ago

ok, this fixed it for me, thanks a lot! Although, I still don't get why I couldn't run vue on 0.0.0.0

Collectives™ on Stack Overflow

Vue CLI run serve always running on localhost

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related