THE BEST NEWSLETTER ANYWHERE
Join 6,000 subscribers and get a daily digest of full stack tutorials delivered to your inbox directly.No spam ever. Unsubscribe any time.
This tutorials covers how to change default port in Vue project, created using vuecli tool.
What is default port of vuejs
Vue application is created with vue-cli tool using vue create command. By default application created with default package.json scripts 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 web server 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 default port in vuejs projects.
First way, is to change port option in 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.
This always need to pass the option when you are running every time with command line. This approach is temporary.
Second, The same can be simplified by changing 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 webpack dev server internally.
- Create a vue.config.js in root of your project
- Add the below content to vue.config.js file
module.exports = {
devServer: {
historyApiFallback: true,
port: 7000,
noInfo: true,
overlay: true
},
}
Change property port to desired port number in devServer section.
Conclusion
Discussed multiple ways to configure default port change in vue application with –port option and webpack devServer port option.
