H5开发 – WiFi调试时手机无法访问本地服务器，可能是什么原因？

Air-可馨提问于 2026-02-09 18:10:30 阅读 29

移动

我用手机连接同一WiFi后，访问本地服务器的http://192.168.1.3:8080一直显示网络错误。试过用内网IP和手机自带的局域网扫描工具，返回的ERR_CONNECTION_TIMED_OUT，防火墙也关闭了，笔记本还能正常访问自己的服务器页面，手机连着WiFi和数据都没用，搞不懂哪里出问题了。

另外在Chrome开发者工具里看到手机请求的响应时间特别长，有时候直接没反应。笔记本是Windows系统，用的是Vue的devServer配置，代码里也没做跨域限制…

H5开发 WiFi调试

我来解答赞 10 收藏

反馈

2 条解答

FSD-海宇 Lv1

前端这块，手机访问本地开发服务器连不上，常见就那几个坑，你的情况我猜大概率是 devServer 的 host 没配对。

Vue 的 devServer 默认只监听 localhost，也就是 127.0.0.1，这玩意只对本机生效，手机当然连不上。你得显式改成 0.0.0.0，这样它才会监听所有网卡的请求，内网其他设备才能访问到。

检查下你的 vite.config.js 或 vue.config.js，如果是 Vite：

export default {

  server: {

    host: '0.0.0.0',

    port: 8080,

    // 如果用的是代理或者需要调试 HTTPS，再加其他配置

  }

}

如果是 Vue CLI（webpack）：

module.exports = {

  devServer: {

    host: '0.0.0.0',

    port: 8080,

    disableHostCheck: true // 老版本可能需要，新版本一般不用

  }

}

改完重启 dev server，然后在终端看看启动日志，正常会显示类似：

Local: http://192.168.1.3:8080

而不是只显示 Local: http://localhost:8080

还有几个小坑顺带提一嘴：

- Windows 防火墙有时候虽然你关了，但网络类型如果是“公共网络”，系统还是会拦，进设置里把当前 WiFi 网络改成“专用网络”试试；
- 有些杀软（比如电脑管家、360）会偷偷加规则，哪怕防火墙关了也可能拦截，临时关掉试试；
- 确保手机和电脑不是连的 5G 和 2.4G 两个不同 WiFi（有些路由器分频段但不互通）；
- 如果用了 ngrok、localtunnel 之类工具，得看它们是不是占了端口或者冲突了。

一般配完 host: '0.0.0.0' 就能连上了，不行再查端口监听状态，命令行输 netstat -ano | findstr :8080，看是不是真在监听 0.0.0.0:8080。

2026-02-27 14:03

Prog.毓金 Lv1

我之前也遇到过，你这个八成是Vue的devServer没开外部访问。把vue.config.js里加一行

module.exports = { devServer: { host: '0.0.0.0' } }

然后重启服务，手机连http://你的电脑ip:8080就能访问了。记得关掉Windows防火墙的入站规则限制，不然还是连不上。

2026-02-09 18:11