How to change port number in vue-cli project

javascript

vue-cli

port-number

development-server

byAlex Kataev·Dec 16, 2024

To change the port number in a Vue CLI project, insert a devServer object containing the new port into the vue.config.js file in your project root:

module.exports = {
  devServer: {
    port: 8081 // Yes, it really is this simple!
  }
};

Remember to restart your Vue app so the new port setting is applied. Now, let's dive into it.

Assessing potential port conflicts

Before hopping headfirst into making changes, it's wise to scan your system for any services potentially hogging the port you desire. By choosing a more unconventional port number, aka the road less traveled, you're less likely to encounter conflicts.

Changing port on the fly

For fleeting or temporary port changes, we can use the serve command, along with the port flag like a knight wielding his sword in a hot pursuit.

npm run serve -- --port 8082 // We're serving on port 8082 now, isn't it cool chill?

This trick is particularly nifty when testing scenarios or running multiple project instances, each performing its own special jig on a different stage, or well, ports!

Making port changes stick

If you want to dig deeper and make that port change stick around, like that catchy tune you can't get out of your head, you'll use the PORT environment variable.

Port declaration in environment variables

To set this up, create a .env file in your project root and define the port there:

PORT=8083 // Just like branding a steer, but easier and less noisy.

Working with older versions (Vue CLI v2)

In the stormy seas of an older Vue CLI v2 project, set the port through the environment before firing up your development server:

export PORT=8084 && npm run dev // ancient spells are cast!

Tuning the frequency of your project

Consider adjusting the port number of your Vue CLI project analogous to changing the broadcast channel of a radio station:

Vue CLI Project (📻): Turns out, we don't love 8080 anymore!

Onwards on this frequency hopping journey:

.env

PORT=1234 // 1234 seems catchy, let's roll with it!

With the swipe of a pen, your Vue project is now jazzing up on a new frequency:

📻 ➡️ 🔄 ➡️ 🎵: Look Ma, we're on channel 1234 now!

Advancing to port and host configuration

In scenarios where changing the game has wholesale effects on the host, or runs in special network settings, advanced configuration techniques come to the rescue.

Bringing hosts into play

You can set a custom host by adding the host property in your vue.config.js:

module.exports = {
  devServer: {
    host: 'localhost', // Move over, localhost is my humble abode now!
    port: 8085 // My rules, my port!
  }
};

Exploring the webpack-dev-server options galaxy

You can unearth a multitude of configuration riches from the DevServer webpack documentation. It is loaded with a plethora of options that can customize your development server further like proxy configurations, HTTPS settings, and hot module replacement tactics.

Navigating through port changing hiccups

When trying to change ports, you could run into a stubborn firewall or an ambiguous service squatting on your desired port. Employ network utilities like netstat or lsof to scan for port occupancy.

Dealing with errors head-on

Facing "port already in use" nightmares? Fear not! Exterminate the troublesome processes with this simple command:

sudo lsof -i :8086 // Call out the port hog!

Play safe by replacing 8086 with your port number. If still fighting, put on your brave face and terminate the infringing process.

Ensuring smooth sailing post-port change

Once your app is up and running on the new port, don't forget to verify all functionalities. Port changes could have side-effects on some services integrated into your app.