How to Run Vue.js (CLI) App in Different Port
In this tutorial, I’m going to share how to change a default port number in Vue.js (CLI) app. We can change port in 2 ways. Let’s see:
Method 1
If we need to run Vue app in another port temporarily, then we need to add --port option to npm run serve command. Here’s the example:
npm run serve -- --port 2020After running app, you’ll see that the port number has changed:
DONE Compiled successfully in 1187ms
App running at:
- Local: http://localhost:2020/
- Network: http://192.168.42.183:2020/
Note that the development build is not optimized.
To create a production build, run npm run build.Method 2
If we want to run an app in a specific port, then we need to create vue config file named vue.config.js in the root directory of the project.
In this config file, we have to define the port number like:
module.exports = {
devServer: {
port: 2020
}
}Then run the app using npm run serve command and you’ll notice that the port has changed.
Share on Social Media
Comment
Preview may take a few seconds to load.
Markdown Basics
Below you will find some common used markdown syntax. For a deeper dive in Markdown check out this Cheat Sheet
Bold & Italic
Italics *asterisks*
Bold **double asterisks**
Code
Inline Code
`backtick`Code Block```
Three back ticks and then enter your code blocks here.
```
Headers
# This is a Heading 1
## This is a Heading 2
### This is a Heading 3
Quotes
> type a greater than sign and start typing your quote.
Links
You can add links by adding text inside of [] and the link inside of (), like so:
Lists
To add a numbered list you can simply start with a number and a ., like so:
1. The first item in my list
For an unordered list, you can add a dash -, like so:
- The start of my list
Images
You can add images by selecting the image icon, which will upload and add an image to the editor, or you can manually add the image by adding an exclamation !, followed by the alt text inside of [], and the image URL inside of (), like so:
Dividers
To add a divider you can add three dashes or three asterisks:
--- or ***
Comments (0)