How to change vite application port

In Vite, changing the port on which your application runs is straightforward. Vite offers multiple configuration options that can be implemented by modifying the vite.config.js file.

First, ensure that there is a vite.config.js file in the root directory of your project. If not, you can create one as needed.

In the vite.config.js file, you need to import Vite's configuration and set the server configuration, which includes the port property to specify the desired port number. Here is a simple example:

javascript
// vite.config.js
import { defineConfig } from 'vite';

export default defineConfig({
  server: {
    port: 3001 // Set the port to 3001
  }
})

In the example above, we set the port on which the Vite server runs to 3001. When you run the vite or vite dev command, the development server will start on port 3001.

Additionally, if you need to dynamically set the port based on different requirements in the development environment, you can specify the port using the --port parameter in the startup command, as shown below:

bash
vite --port 3002

This will override the settings in vite.config.js, causing the server to run on port 3002.

Finally, I would like to emphasize that you should ensure the chosen port is not occupied by other applications to avoid startup failures due to port conflicts. If the specified port is already in use, Vite will typically attempt to use the next available port.