Theo mặc định, server của Vite chỉ chạy trên localhost, nên bạn không thể mở từ điện thoại hay máy khác trong cùng mạng. Muốn truy cập đa thiết bị? Hãy khởi động với tùy chọn --host và dùng IP của máy tính
🚀 Vite --host là gì? Tại sao dev nên bật?
Khi bắt đầu một project React/Vue/Svelte với Vite, đa phần chúng ta chỉ cần chạy:
npm run dev
Server lập tức chạy ở http://localhost:5173.
Tuy nhiên, chỉ cần một chỉnh sửa nhỏ là bạn đã có thể test trực tiếp trên điện thoại hoặc tablet.
Mở package.json dự án của bạn và đi tới khóa scripts. Trong scripts, hãy đổi "dev": "vite" 👉 "dev" : "vite --host".
Sau khi thực hiện những thay đổi cần thiết, khóa scripts của bạn sẽ giống như thế này 👇
LƯU Ý
Nếu chỉ cần mở tạm thời (một lần), bạn có thể chạy trực tiếp:
npm run dev -- --host
Truy cập máy chủ phát triển Vite trên thiết bị di động của bạn
Bây giờ máy chủ phát triển Vite đang chạy với tùy chọn --host, bạn có thể truy cập nó trên thiết bị di động.
Vite hiển thị url mà bạn cần trong chính thiết bị đầu cuối.
Đầu ra của thiết bị đầu cuối khi máy chủ phát triển Vite được khởi động.
Bây giờ bạn sẽ thấy máy chủ phát triển Vite đang chạy trên thiết bị di động của mình. Bạn có thể tương tác với nó giống như trên máy tính.
💡 Lợi ích khi bật --host
- Test giao diện ngay trên điện thoại, tablet thật chứ không chỉ giả lập.
- Demo cho đồng đội trong cùng Wi-Fi cực nhanh, không cần deploy.
- Debug responsive, sự kiện chạm… chính xác hơn nhiều so với dev tools.
🛠️ Lưu ý
- Một số framework/build tool yêu cầu ghi rõ:
vite --host 0.0.0.0
nhưng trong hầu hết trường hợp, chỉ cần --host là đủ.
- Nếu bạn muốn chia sẻ ra ngoài Internet, có thể kết hợp với ngrok hoặc Cloudflare Tunnel để tạo public URL.
👉 Tóm lại: vite --host là một flag nhỏ nhưng cực kỳ hữu ích cho frontend dev khi cần test đa thiết bị. Nếu bạn hay phát triển giao diện responsive, đây là “must-have” trong package.json.