Vue-cli: New app shows "Page isn't working" for http://localhost:8080/ but works for http://192.168.1.3:8080/

[RyanAtViceSoftware]

Version

3.10.0

Reproduction link

https://github.com/RyanAtViceSoftware/vue-localhost-error-example

Environment info

Environment Info:

  System:
    OS: macOS High Sierra 10.13.6
    CPU: (4) x64 Intel(R) Core(TM) i7-7567U CPU @ 3.50GHz
  Binaries:
    Node: 10.15.1 - /usr/local/bin/node
    Yarn: 1.13.0 - /usr/local/bin/yarn
    npm: 6.9.0 - /usr/local/bin/npm
  Browsers:
    Chrome: 76.0.3809.100
    Firefox: Not Found
    Safari: 12.1.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.11.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.11.0 
    @vue/cli-plugin-babel: ^3.11.0 => 3.11.0 
    @vue/cli-plugin-eslint: ^3.11.0 => 3.11.0 
    @vue/cli-service: ^3.11.0 => 3.11.0 
    @vue/cli-shared-utils:  3.11.0 
    @vue/component-compiler-utils:  3.0.0 
    @vue/eslint-config-prettier: ^5.0.0 => 5.0.0 
    @vue/preload-webpack-plugin:  1.1.1 
    @vue/web-component-wrapper:  1.2.0 
    eslint-plugin-vue: ^5.0.0 => 5.2.3 (4.7.1)
    vue: ^2.6.10 => 2.6.10 
    vue-eslint-parser:  5.0.0 (2.0.3)
    vue-hot-reload-api:  2.3.3 
    vue-loader:  15.7.1 
    vue-router: ^3.0.3 => 3.1.2 
    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

1. Create new vue app using the command line with the following options
   
   
   
   • manual
   
   
   • vuex
   
   
   • vue router
   
   
   • eslint prettier
   
   
   • history mode
   
   
   • config files
   
   
2. yarn serve
3. open browse to http://localhost:8080/

What is expected?

App to be shown

What is actually happening?

Get "Page isn't working" error

---

Browsing to http://192.168.1.3:8080/ works

[sodatea]

Can't reproduce locally. Maybe it's due to bad cookies on the localhost:8080 domain? Have you tried to open it in an incognito window?

[RyanAtViceSoftware]

@sodatea thanks but that doesn't make a difference for me

I downloaded a Vue CLI based app from Vue Mastery and same thing

[sodatea]

Does any of the replies help? https://github.com/webpack/webpack-dev-server/issues/183

Likely to be a network setting issue but I've no idea why.

[vue-bot]

Hello!
This issue has gone quiet. Spooky quiet. 👻

We get a lot of issues, so we currently close issues requiring feedback after 20 days of inactivity. It’s been at least 10 days since the last update here. If we missed this issue or if you want to keep it open, please reply here. (A maintainer can also add the label not stale to keep this issue open.)

Thanks for being a part of the Vue community! 💪💚️

[RyanAtViceSoftware]

@sodatea thanks for the reply and sorry for the delayed response but none of the suggested fixed mentioned there worked for me. Also note that I can open http://localhost for create-react-app based apps so this is something specific to what vue-cli is doing in it's configurations and maybe some incompatibility with mac??? not sure about that second part. But localhost works on my mac book for other things.

[jwillson]

@sodatea I'm experiencing the exact same issue as @RyanAtViceSoftware. I'm on macOS Mojave 10.14.6, and am working with Vue cli 4.0.5. I've reproduced the issue in Chrome 78.0.3904.70, Firefox 69.0.3, Opera 62.0.3331.119, and Safari 13.0.3 (14608.3.10.10.1). I also can open http://localhost for other apps and open the ip-based link provided by Vue. The suggested fixes mentioned also did not work for me.

[benplain]

I'm also on macOS Mojave 10.14.6 and @vue/cli 4.0.5, I had the same issue.
I am not entirely sure why I had the issue. For some reason, port 8080 is being blocked.

Anyway, I worked around this by changing the port.

In your vue.config.js, add the following to change the port:

module.exports = {
    devServer: {
        // other config
        port: 8081 // or any other port you wish to use other than 8080
    }
}

After that it worked for me.

[CssHammer]

Hi! I'm experiencing the same problem on Catalina. Same symptoms, anything can work on 8080 except vue server. lsof -nP -iTCP:8080 | grep LISTEN shows that vue listens to the port but no response is visible in browser

[faisal3389]

Hi, I'm also experiencing same issue, however, the apps works on 127.0.0.1:8080 and not localhost, in most cases this should at least unblock me but the APIs are configured on localhost:8080. hence need a fix for this.
After changing the port to 8081, the localhost is working.

[faisal3389]

https://github.com/webpack/webpack-dev-server/issues/183
This issue also looks similar to the webpack-dev-server issue. People seemed to have resolved the issues themselves there, but the provided solutions didn't work for me. Posting it here, as it might help someone else.