Vue.js webapp not accessible under localhost:<port>

Question

so I have this Vue.js webapp which I developed on one PC, where I could always access it via either localhost:<portnr>, 127.0.0.1:<portnr> or <ip>:<portnr>.

Now I work on another PC and the project is running fine so far, the problem just is that if I enter the url with localhost or 127.0.0.1 into the browser I will get an "unable to connect error".

If I use the PCs ip or its hostname in the url I can visit the page as I normal. I wonder what the problem could be. I don't know much about networking but as the PC before probably did not have a hostname set I thought maybe this could be a problem?

When starting the project via npm run serve I get the output

App running at:
  - Local:   http://<host_name>:5050/ 
  - Network: http://<ip>:5050/

On the other pc it used to print localhost instead of the hostname at the url for local access. Thank you for any hint on how to solve this!

NotARobot · Accepted Answer · 2020-10-05 10:05:48Z

3

Right after asking the question, I found a similar one here for everyone that has a similar issue.

To summarize the solution for me was to add --host 0.0.0.0 to the npm run serve command in the package.json so that the line looks like this:

"scripts": {
    "serve": "vue-cli-service serve --host 0.0.0.0",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },

After this the output when running the command changed back to displaying localhost and I can access the page again via localhost:<portnr>.

I can't see any disadvantage in doing this simple fix. If there is, I will be glad to hear about a better solution!

answered Oct 5, 2020 at 10:05

NotARobot

5254 gold badges15 silver badges28 bronze badges

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

1 Comment

Silvia Over a year ago

I have a similar problem stackoverflow.com/questions/69898563/… Can you help me?

Michael Benares · Accepted Answer · 2020-10-05 11:09:30Z

1

I tend to see you have local DNS server setting problem on the pc.

Windows

Open %systemroot%\system32\drivers\etc\hosts file with notepad or other editors as administrator. Maybe the file looks like this:

... ... ...
# localhost name resolution is handled within DNS itself.
#       127.0.0.1       localhost
#       ::1             localhost

You will need to uncomment 2 bottom lines if localhost wasn't be bound on Windows

Unix(Linux/macOS)

Open /etc/hosts file with nano or other editors with sudo privilege.

You should get something similar to the below. If not, please make it like this.

##
# Host Database
# ... ... ...

127.0.0.1       localhost
255.255.255.255 broadcasthost
::1             localhost

answered Oct 5, 2020 at 11:09

Michael Benares

1261 silver badge3 bronze badges

1 Comment

NotARobot Over a year ago

I checked this and the file seemed to be correct, thanks for the detailed explanation though!

Collectives™ on Stack Overflow

Vue.js webapp not accessible under localhost:<port>

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related