vs code 中 vue 项目局域网无法访问是因默认只监听 localhost；需在 vue.config.js 或 vite.config.ts 中配置 host: '0.0.0.0' 并开放对应端口，同时配置 hmr 的 websocket 地址。
vscode 里启动 Vue 项目后局域网访问不到？
默认情况下 npm run serve 或 vue-cli-service serve 只监听 localhost，其他设备 ping 得通但打不开页面，就是这个原因。
要让手机、平板或同一网段的电脑能访问，得显式放开 host 绑定，并确认防火墙没拦住端口（通常是 8080）。
- 在项目根目录的
vue.config.js中加：module.exports = { devServer: { host: '0.0.0.0', port: 8080, hot: true } } - 没这个文件就新建一个，注意是 JavaScript 文件，不是 JSON；
host: '0.0.0.0'表示监听所有网卡，不是'127.0.0.1'或省略 - Windows 用户如果仍连不上，检查「Windows Defender 防火墙」是否放行了 8080 端口（入站规则）
怎么知道本机局域网 IP 是多少？
VS Code 里看不到 IP，得靠系统命令查，而且不能只看 ifconfig 或 ipconfig 输出里的第一个地址——有些是虚拟网卡、Docker 或 WSL 的，根本不在物理局域网里。
- macOS / Linux：运行
ifconfig | grep "inet " | grep -v 127.0.0.1，找带192.168.x.x或10.x.x.x的那一行 - Windows：运行
ipconfig，找「无线局域网适配器 WLAN」或「以太网适配器 以太网」下的IPv4 地址，忽略「vEthernet」或「Hyper-V」开头的 - 查到后，在其他设备浏览器里输入
http://192.168.x.x:8080（别漏端口号）
用 vite 创建的 Vue 项目怎么配？
Vite 默认也不允许外部访问，配置位置和写法跟 Vue CLI 不同，容易照搬出错。
立即学习“前端免费学习笔记（深入）”；
- 改
vite.config.ts（或.js）里的server选项：export default defineConfig({ server: { host: '0.0.0.0', port: 5173 } }) -
host: true也行，Vite 会自动设成0.0.0.0，但显式写出来更稳妥，避免某些版本解析异常 - 注意 Vite 默认端口是
5173，不是8080，手机访问时别输错
为什么有时候能连上但热更新失效？
WebSocket 连接走的是另一条路径，host: '0.0.0.0' 只解决了 HTTP 服务，HMR（热模块替换）可能还在往 localhost 回连。
- 在
vue.config.js或vite.config.ts中补上client配置（Vite）或devServer的client（Vue CLI） - Vite 示例：
server: { host: '0.0.0.0', port: 5173, hmr: { overlay: true, clientPort: 5173 // 关键：告诉 HMR 客户端连哪个端口 } } - Vue CLI 示例：
devServer: { host: '0.0.0.0', port: 8080, client: { webSocketURL: 'ws://你的局域网IP:8080/ws' } }
IP 写死在这里容易忘改，建议用脚本或环境变量动态注入——不过大多数小项目手动填一次就够了。真正麻烦的是多人共用一台开发机时，IP 变了还得同步改配置。
