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?
The vue application is created with the vue-cli tool using the 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 the 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 the -- -- port 7000
option to the npm command.
B:\vue-app>npm run start -- --port 7000
> [email protected] 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"
},
How to change the default port with the webpack dev server in the VueJS Application?
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 the property port to the desired port number in the devserver section.
Conclusion
Discussed multiple ways to configure default port change in the Vue application with the –port option and webpack devServer port option.