This tutorial covers how to change the default port in the Vue project, created using the Vue CLI tool.

What is the default port of vuejs
Vue application is created with vue-cli tool using vue create command. By default applications created with default, package.json scripts are as follows
"scripts": {
"serve": "vue-cli-service serve",
"start": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
}
When you run npm run serve
or npm run start
it starts the webserver listens at 8080 port.
B:\vue-app>npm run start
DONE Compiled successfully in 9556ms
App running at:
- Local: http://localhost:8081/
- Network: http://192.168.29.53:8081/
Note that the development build is not optimized.
To create a production build, run npm run build.
This post covers multiple ways to change the default port in vuejs projects.
The first way is to change the port option in a terminal window
In the terminal, Pass -- -- port 7000
option to npm command.
B:\vue-app>npm run start -- --port 7000
> vue-google-font@0.1.0 start B:\blog\jswork\vue-google-font
> vue-cli-service serve "--port" "7000"
DONE Compiled successfully in 1836ms
App running at:
- Local: http://localhost:7000/
- Network: http://192.168.29.53:7000/
Note that the development build is not optimized.
To create a production build, run npm run build.
It always needs to pass the option when you are running every time with the command line. This approach is temporary.
Second, The same can be simplified by changing the scripts block in package.json
"scripts": {
"serve": "vue-cli-service serve",
"start": "vue-cli-service serve --port 7000",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
changing port with webpack devserver
VueCli uses a webpack dev server internally.
- Create a vue.config.js in the root of your project
- Add the below content to the vue.config.js file
module.exports = {
devServer: {
historyApiFallback: true,
port: 7000,
noInfo: true,
overlay: true
},
}
Change property port to the desired port number in the devserver section.
Conclusion
Discussed multiple ways to configure default port change in Vue application with –port option and webpack devServer port option.