Vue-cli: The default port 8080 cannot work

Created on 14 Feb 2016 · 19Comments · Source: vuejs/vue-cli

The npm run dev command can run without any problem, but i can see nothing in the browser with localhost:8080.

The lsof command shows:

lsof -i :8080
COMMAND   PID   USER   FD   TYPE             DEVICE SIZE/OFF NODE NAME
node    24732 Calvin   24u  IPv4 0xb6920191477c7e03      0t0  TCP localhost:http-alt (LISTEN)

So i'm sure no other applications bind this port, when i change the port in dev-server.js to 8090, it worked.

Source

rdmclin2

Most helpful comment

In build/dev-server.js, try changing app.listen(8080, 'localhost', function () { ... }) to just app.listen(8080, function () { ... }).

yyx990803 on 18 Feb 2016

👍8

All 19 comments

What OS are you on?

yyx990803 on 18 Feb 2016

i can see nothing in the browser with any ports.
The lsof command shows:

lsof -i :8080
COMMAND PID   USER   FD   TYPE            DEVICE SIZE/OFF NODE NAME
node    829 buuyii   26u  IPv6 0x6fcfabd1b9b0999      0t0  TCP localhost:http-alt (LISTEN)

InsCake on 18 Feb 2016

In build/dev-server.js, try changing app.listen(8080, 'localhost', function () { ... }) to just app.listen(8080, function () { ... }).

yyx990803 on 18 Feb 2016

👍8

@yyx990803 Great, it works, but can you explain why to remove the 'localhost' option? I did some search but still cannot figure it out :(

rdmclin2 on 18 Feb 2016

I am using the simple-webpack template. No built/dev-server.js can be found.

InsCake on 19 Feb 2016

👍4

the same problem when using the simple-webpack template

1994 on 26 Feb 2016

👍2

This issue has gotten a little stale and it seems to be chronicling problems with two separate templates, so I'm closing. If anyone is still experiencing a problem (or has found a solution to a problem), please post an issue or pull request for the appropriate template here. :smiley:

chrisvfritz on 4 Apr 2016

On Windows 10, I had the same with 8080 already in use. After vue init webpack I was unable to start the build server with error : EADDRINUSE.

In the config folder, index.js file I changed the de object, port key to 8081 and it fixed it for me.

Changed from:

dev: {
env: require('./dev.env'),
port: 8080,
autoOpenBrowser: true,
assetsSubDirectory: 'static',
assetsPublicPath: '/',
proxyTable: {},
// CSS Sourcemaps off by default because relative paths are "buggy"
// with this option, according to the CSS-Loader README
// (https://github.com/webpack/css-loader#sourcemaps)
// In our experience, they generally work as expected,
// just be aware of this issue when enabling this option.
cssSourceMap: false
}

to:

dev: {
env: require('./dev.env'),
port: 8081,
autoOpenBrowser: true,
assetsSubDirectory: 'static',
assetsPublicPath: '/',
proxyTable: {},
// CSS Sourcemaps off by default because relative paths are "buggy"
// with this option, according to the CSS-Loader README
// (https://github.com/webpack/css-loader#sourcemaps)
// In our experience, they generally work as expected,
// just be aware of this issue when enabling this option.
cssSourceMap: false
}

dsottimano on 13 Feb 2017

👍3

If you're using vue init webpack-simple {{project_name}} with vue-cli, also checkout node_modules >> webpack-dev-server >> bin >> webpack-dev-server.js line 62 for the port number.

owenmorrill on 19 Jun 2017

This is one of those things that always seem odd to me in boilerplates. Why not make it dynamic so it finds an open port on it's own? it's pretty easy implementation. I could PR it for the webpack template.

adi518 on 17 Aug 2017

@adi518 I think a PR would be welcome and should indeed be easy using portfinder.

chrisvfritz on 17 Aug 2017

@chrisvfritz Done.

adi518 on 8 Sep 2017

When using the webpack-simple template, you can add a "port" property to the devServer object in webpack.config.js and assign it to whatever value you want, like so:

devServer: { historyApiFallback: true, noInfo: true, port: 9080 },

ewmiller on 4 Oct 2017

👍1

This issue might be closed, but i found a work around for the same issue using webpack-simple.

OS: Mac OS X
Using: vue init webpack-simple project-name

project-name/node_modules/webpack-dev-server/bin/webpack-dev-server.js
line#: 210
host: {
type: 'string',
// default: 'localhost',
default: '127.0.0.1',
describe: 'The hostname/ip address the server will bind to',
group: CONNECTION_GROUP
},
changed: 'locahost' to '127.0.01'
save the file.
npm run dev
127.0.0.1:8080 works fine.

atlroc99 on 10 Dec 2017

👍1

Under node_modules? how did you come up with that? :)

What you need is right here.

adi518 on 1 Apr 2018

Cool, good to know. Was just learning vue and related frameworks. Couldn't find any solution and that worked for me. Thanks for the suggestion.

atlroc99 on 1 Apr 2018

i take a vue project from git and when i run it .it gives me http://192.168.1.33:8080/sockjs-node and the project is not in this link

marsanaemi on 3 Jul 2019

If you're using vue init webpack-simple {{project_name}} with vue-cli, also checkout node_modules >> webpack-dev-server >> bin >> webpack-dev-server.js line 62 for the port number.

But there is nothing except '}' in line 62