Vite暴露的网络URL无法在移动设备打开的问题求助

问题场景 #

执行以下命令将Vite开发服务器暴露到网络：

npm run dev -- --host

服务器启动输出：

VITE v3.1.8  ready in 618 ms

  ➜  Local:   http://localhost:xxx/
  ➜  Network: http://xxx.xxx.x.xx:xxxx/
  ➜  Network: http://xxx.xxx.xxx.x:xxxx/

桌面端可正常打开网络URL，但移动设备访问时提示 "Safari could not open the page because the server stopped responding"。

排查与解决步骤 #

• 确认设备处于同一局域网
  移动设备必须和运行服务器的电脑连接同一Wi-Fi或有线局域网，跨网络无法直接访问。

• 检查系统防火墙规则
  电脑防火墙可能拦截了端口请求：

  • Windows：打开「Windows Defender防火墙」，添加允许服务器端口（输出中的xxxx）的入站规则；
  • macOS：进入「系统设置-网络-防火墙」，确保运行命令的程序（终端/VS Code）被允许接收传入连接。

• 验证局域网内设备互通性
  在移动设备上ping电脑的网络IP（输出中的xxx.xxx.x.xx），如果ping不通，检查路由器的AP隔离设置（部分路由器默认开启该功能，会阻止设备间通信），关闭后重试。

• 显式指定主机与端口
  尝试强制服务器监听所有网卡并固定端口，避免随机端口的兼容性问题：

  npm run dev -- --host 0.0.0.0 --port 5173
  

  之后使用http://[电脑IP]:5173在移动设备上访问。

• 调整Vite配置文件
  修改项目根目录的vite.config.js，明确服务器配置：

  export default {
    server: {
      host: '0.0.0.0',
      port: 5173,
      strictPort: true,
      cors: true // 确保移动设备浏览器的跨域请求被允许
    }
  }
  

  重启开发服务器后再次尝试访问。

• 清除浏览器缓存或使用隐私模式
  移动设备上清除Safari缓存，或开启隐私模式打开URL，避免旧缓存导致的连接异常；若设备使用了代理，关闭代理后测试。

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