vue-cli: The default port 8080 cannot work
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.
About this issue
- Original URL
- State: closed
- Created 8 years ago
- Comments: 19 (4 by maintainers)
In
build/dev-server.js, try changingapp.listen(8080, 'localhost', function () { ... })to justapp.listen(8080, function () { ... }).I am using the simple-webpack template. No
built/dev-server.jscan be found.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.
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 }
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 },the same problem when using the simple-webpack template