Vite Port Detection Issue Caused by Host Configuration in Micro‑Frontend Projects

Problem: In a micro‑frontend setup using wujie, the child project must run on port 5173 for inter‑project communication, but when a new Vite React‑TS project was started, Vite did not automatically switch to an available port, leaving the port unchanged.

Investigation: The author created a Vite project with npm create vite@latest react_demos -- --template react-ts and started it using npm run dev , observing that the port remained 5173. Various Vite configuration attempts were made, including adding host settings in vite.config.ts , but the expected error did not appear.

Further research showed that the issue was unrelated to Vite version numbers (both Vite 3 and Vite 4 were tested). Adding a host configuration of 0.0.0.0 prevented Vite from attempting to find a free port, while the default host (localhost) allowed Vite to auto‑increment the port.

Result: Vite’s port detection mechanism first compares the host value; if one project specifies a custom host (e.g., 0.0.0.0) and another uses the default localhost, Vite treats the ports as matching and does not try the next available port. Setting both projects to the same host (localhost) enables Vite to automatically select a free port.

Conclusion: When encountering similar port conflicts in micro‑frontend development, consider the host configuration as a factor in Vite’s port‑selection logic, and adjust the host settings accordingly to allow automatic port fallback.