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 不同，容易照搬出错。

Springboot Vue Builder

从零开始编排 SpringBoot+Vue 全栈项目工作流，适用于新建全栈项目或完整脚手架请求，触发后依次调用 product‑spec‑builder（需求调研）等模块。

下载

立即学习“前端免费学习笔记（深入）”；

• 改 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 变了还得同步改配置。