深入理解 Vite 开发服务器的 Local 与 Network 地址
好的，我帮你把这个知识点整理成一篇完整的博客，内容面向前端开发者，条理清晰，附带原理分析和示例代码：
一、Vite 本地开发服务器监听地址解析
在使用 Vite 进行本地开发时，你可能注意到在启动 dev server 后，终端会显示类似如下信息：
➜ Local: http://localhost:8080/➜ Network: http://192.168.0.202:8080/
有时候，你可能只看到 Local 地址，却没有 Network 地址。本文将深入讲解这是为什么，以及如何配置。
二、默认行为
如果你在 vite.config.js 中没有配置 server.host，Vite 的默认行为如下：
export default {server: {port: 8080, // 默认端口是 5173// host 未配置}
}
此时，终端输出可能只会显示：
➜ Local: http://localhost:8080/
原因是：
默认情况下，Vite dev server 只监听 localhost（127.0.0.1）。
Network 地址不会显示，因为 dev server 并没有绑定到局域网 IP。
也就是说，同一局域网的其他设备无法访问这个本地开发服务器。
三、配置 host: '0.0.0.0' 的作用
要让 dev server 支持局域网访问，同时显示 Network 地址，可以在 vite.config.js 中这样配置：
export default {server: {port: 8080,host: '0.0.0.0', // 绑定所有网卡}
}
效果：
➜ Local: http://localhost:8080/➜ Network: http://192.168.0.202:8080/
解释：
'0.0.0.0'表示 dev server 绑定到 所有网络接口：本机回环接口（localhost / 127.0.0.1）
局域网 IP（如 192.168.x.x 或 10.x.x.x）
这样，同一局域网的其他设备（手机、平板、其他电脑）也能访问你的开发服务器。
Vite 会自动检测网卡 IP 并显示 Network 地址。
四、不同 host 配置对访问的影响
| host 配置 | Local 显示 | Network 显示 | 局域网访问 |
|---|---|---|---|
| 默认（未配置） | ✅ | ❌ | ❌ |
'localhost' | ✅ | ❌ | ❌ |
'0.0.0.0' | ✅ | ✅ | ✅ |
| 指定 IP | ✅ | ✅（仅指定网卡） | ✅（可访问） |
五、总结
为什么不配置 host 就没有 Network 地址？
因为默认 dev server 只监听 localhost，不绑定局域网 IP。解决方法
在vite.config.js中配置server.host = '0.0.0.0'，即可同时显示 Local 和 Network 地址，并支持局域网访问。