Sometimes, we want to change the port number of the dev server of the Vue-CLI project.
In this article, we’ll look at how to change the port number of the dev server of the Vue-CLI project.
Change the Port Number in Vue-CLI Project
We can change the port number of the dev server runs on by adding the port property into vue.config.js in the root folder.
For instance, we can write:
module.exports = {
// ...
devServer: {
open: process.platform === 'darwin',
host: '0.0.0.0',
port: 8080,
https: false,
hotOnly: false,
},
// ...
}
to add the port property and set it to 8080.
Now the Vue-CLI dev server will run on port 8080.
We can also change the scripts.serve property in package.json to add the port to the serve command.
For instance, we can write:
vue-cli-service serve --port 8080
to set the port of the Vue-CLI dev server to 8080.
Conclusion
We can change the port number of the dev server runs on by adding the port property into vue.config.js in the root folder.
