Changing the port the Vite dev server uses

Set it in the config

This is the version that survives, because everyone running the project gets the same port.

export default defineConfig({
  server: {
    port: 3000,
  },
})

Set it for one run

The CLI flag wins over the config file. Useful when two projects collide and you only need one of them somewhere else for an afternoon.

npm run dev -- --port 3000

# directly, without the npm script in between
npx vite --port 3000

Why it says 5174

If 5173 is already taken, Vite does not stop — it takes the next free port and prints it. That is why the browser tab you kept open from yesterday shows nothing: the server is running, just one port further along. Read the URL Vite printed, not the one you remember.

$ npm run dev

  VITE v7.1.0  ready in 213 ms

  Port 5173 is in use, trying another one...
  ➜  Local:   http://localhost:5174/

Make it fail instead of moving

strictPort: true turns the silent fallback into an error. Worth setting whenever something else depends on the exact port — an OAuth redirect URL, a proxy in front, a container port mapping, a teammate following a README.

export default defineConfig({
  server: {
    port: 3000,
    strictPort: true,   // exit instead of trying 3001
  },
})

Free the port instead

Sometimes you do not want a different port, you want the old process gone. It is usually a dev server from a terminal tab you closed without stopping it.

# macOS / Linux
$ lsof -ti:5173 | xargs kill -9

# Windows (PowerShell)
$ Get-NetTCPConnection -LocalPort 5173 | Select-Object -ExpandProperty OwningProcess
$ Stop-Process -Id <pid> -Force

# either, without looking anything up
$ npx kill-port 5173

The preview server is a different port

vite preview does not use server.port. It serves the built files on 4173 and is configured under preview.port. Changing server.port and wondering why preview still opens 4173 is a common half-hour.

• Port 4173: vite preview, not the dev servervite preview serves the finished build from dist/ on port 4173, while the dev server on 5173 compiles your source on the fly — they are two different servers with two different ports.
• What happens between npm run dev and the page on localhost:5173Starting the Vite dev server takes five steps: npm resolves the vite binary, Vite reads the config, dependencies are pre-bundled, the server listens on 5173, and the browser opens an HMR WebSocket on the first request.
• localhost:5173 — the port itselfWhat the address means, common dev ports, and the autocomplete fix.