What the address block Vite prints on localhost:5173 tells you

Read the block line by line

Every line here is generated, none of it is a template. Local is whatever resolved to loopback, Network is everything else, and the greyed-out name at the end of a Network line is the operating system’s interface name for that address — en0, eth0, wlan0. It is there so you can tell Wi-Fi from a VPN adapter from a Docker bridge when three of them answer at once.

$ npm run dev -- --host

  VITE v8.3.0  ready in 214 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: http://192.168.1.24:5173/   en0
  ➜  Network: http://172.17.0.1:5173/     docker0
  ➜  press h + enter to show help

Why it says "use --host to expose" instead of an address

That line is not a general hint, it is a conditional one. Vite prints it only when two things are true at the same time: there is not a single network URL to show, and no host option was passed at all. It is the default state — bound to loopback, nothing to expose, here is the flag that changes it.

if (urls.network.length === 0 && optionsHost === undefined) {
  info(… 'Network: use ' … '--host' … ' to expose')
}

You passed --host and there is still no Network line

Then the hint is gone too, because the condition needs optionsHost to be undefined. What you are looking at is a startup that bound wider and found nothing worth printing — an empty result, not a silent failure. On a machine with no active non-loopback IPv4 address, that is exactly what happens: the enumeration filters on family === "IPv4", so an interface that only has an IPv6 address contributes no Network line no matter how the server is bound.

• No Network line and no hint: host was set, the address list came back empty.
• No Network line but the hint is there: host was never set — this is the default.
• An interface you expected is missing: it has no IPv4 address, or it is down.

server.host: false removes the hint without changing anything else

A quiet one. In resolveHostname, both undefined and false end up binding localhost, so the server behaves identically. But false is not undefined, so the hint line disappears. If a project prints no Network line and no advice about --host, look for an explicit false in the config before you look at the network.

export default {
  server: {
    host: false   // binds like the default, but hides the --host hint
  }
}

The port in that line is the port it actually got

The URLs are built from server.address().port, the port the HTTP server is really listening on — not from server.port, which is only the request. Because Vite moves to the next free port when 5173 is taken unless strictPort is set, this block is the most reliable place to read the real port. If it says 5174, something else has 5173.

$ npm run dev

Port 5173 is in use, trying another one...

  ➜  Local:   http://localhost:5174/

Two cases where the block looks wrong but is not

First: a specific host. Passing a concrete non-loopback address puts the single URL in the network list and leaves local empty, so you get a Network line and no Local line at all. Second: localhost that is not localhost. When Node resolves localhost to an address the browser would not use, Vite substitutes the resolved address into the printed name — a Local line reading 127.0.0.1 instead of localhost is that substitution, and it is deliberate.

$ npm run dev -- --host 192.168.1.24

  ➜  Network: http://192.168.1.24:5173/   en0
# no Local line — the address is not a loopback one

The printed URL carries your base path

Everything after the port comes from the resolved base. With base: "/app/" the block prints http://192.168.1.24:5173/app/, and copying only the origin gives you a 404 that has nothing to do with the network. The two values that mean "no base", "./" and the empty string, are printed as a single slash.

Which address the second device needs

The Network one, and only while both devices are on the same network. Opening the Local address on a phone reaches the phone. The host allowlist does not get in the way here — IP addresses pass the check without configuration — but a tunnel or a custom hostname instead of an IP is a different gate.

• Phone on the same Wi-Fi: use the Network URL as printed, base included.
• Several Network lines: pick the one whose interface name is your Wi-Fi or ethernet adapter, not the Docker or VPN one.
• A name instead of an IP: that request is checked against server.allowedHosts.

Getting the same addresses without reading the terminal

The dev server object exposes exactly what was printed, as local and network arrays, URL-encoded. It is null in middleware mode and when the server is not listening on a port — which is the honest answer in both cases, since there is no address to give.

const server = await createServer()
await server.listen()

console.log(server.resolvedUrls)
// { local: ['http://localhost:5173/'], network: [...] }

• Reaching the Vite dev server from anything other than localhostThe Vite dev server binds to localhost only and rejects unknown hostnames, so a second device, a container or a tunnel needs two separate settings: server.host to bind wider, and server.allowedHosts to accept the name being used.
• Reaching localhost:5173 from your phone or another machineThe dev server listens on localhost by default, so nothing else on the network can reach it — start it with --host (or set server.host) to listen on your LAN address.
• Running the Vite dev server in a containerInside a container localhost means the container, so the dev server has to listen on 0.0.0.0 and the port has to be published — mapping the port alone is not enough.
• localhost:5173 — the port itselfWhat the address means, common dev ports, and the autocomplete fix.