设置host后仍无法通过网络访问Vite(Vue3)服务器

针对同一局域网下安卓Chrome无法访问Vite dev server，但本地和Flask同配置可正常访问的问题，按以下步骤排查解决：

1. 检查Windows防火墙规则 #

Windows Defender防火墙可能未允许Vite进程通过5173端口，即使Flask能用，Vite的进程可能未被授权：

• 打开「Windows Defender防火墙」→「高级设置」→「入站规则」
• 查看是否存在允许Vite（或node.exe）访问5173端口的规则，若无则手动新建：
  1. 规则类型选「端口」，下一步
  2. 选择TCP，输入5173，下一步
  3. 选择「允许连接」，下一步
  4. 勾选「域」「专用」「公网」（按需），命名规则为「Vite Dev Server」

2. 确认Vite监听的端口和配置一致 #

Vite可能因端口占用自动切换端口，导致你访问的端口并非实际监听端口：

• 执行npm run dev后，仔细查看终端输出的Network地址，比如Network: http://192.168.x.x:5173，确保访问的是该端口
• 在vite.config.js中强制指定端口并启用严格检查：

  export default defineConfig({
    server: {
      host: '0.0.0.0',
      port: 5173,
      strictPort: true // 端口被占用时直接报错，避免自动切换
    }
  })
  

3. 排查安卓设备和路由器设置 #

• 关闭安卓Chrome的「数据节省模式」「安全浏览」功能，这些可能拦截局域网资源加载
• 登录路由器后台，检查是否开启了AP隔离功能，该功能会阻止局域网内设备互相访问，若开启则关闭

4. 临时禁用HMR测试 #

热模块替换（HMR）的WebSocket连接可能导致局域网访问异常：

• 在vite.config.js中关闭HMR：

  export default defineConfig({
    server: {
      host: '0.0.0.0',
      port: 5173,
      hmr: false
    }
  })
  

• 重启dev server后尝试访问，若能正常加载，说明是HMR的WebSocket问题，可进一步指定clientPort：

  export default defineConfig({
    server: {
      host: '0.0.0.0',
      port: 5173,
      hmr: {
        clientPort: 5173
      }
    }
  })
  

5. 验证端口连通性 #

• 在Windows终端执行netstat -ano | findstr :5173，确认输出中存在0.0.0.0:5173（而非仅127.0.0.1:5173），说明Vite正在监听所有网卡
• 在安卓设备上用工具（如Termux）执行ping 192.168.x.x确认网络连通，再执行telnet 192.168.x.x 5173，若telnet失败则说明端口仍被拦截

内容的提问来源于stack exchange，提问作者Karthik Sankaran