The default port 8080 cannot work

[rdmclin2]

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.

[yyx990803]

What OS are you on?

[InsCake]

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)

[yyx990803]

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

[rdmclin2]

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

[InsCake]

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

[1994]

the same problem when using the simple-webpack template

[chrisvfritz]

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

[dsottimano]

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
}

[owenmorrill]

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.

[adi518]

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.

[chrisvfritz]

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

[adi518]

@chrisvfritz Done.

[ewmiller]

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 },

[atlroc99]

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.

[adi518]

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

What you need is right here.

[atlroc99]

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.

[marsanaemi]

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

[bidhyapokharel]

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

[mehdirokhsati]

Do this:

1.remove your Node.js and again install latest version here link to install Node.js

2.On the installation path choose npm package manager and install

3.open cmd and inter

npm install -g @vue/cli

4.after install vue cli (Previous step)inter to cmd

vue create name-app

5. after some minutes (It depends on how fast your internet is) be sure You have the correct
   installation

6.so inter in cmd

npm run serve

7.the you'll see localhost page Local host:http://localhost:8080/) code here`