手机访问电脑本地移动端

日常开发调试移动端页面时，我们大多使用浏览器F12模拟手机模式，但模拟环境和真机存在差异。想要在手机真机上调试本地未部署上线的前端项目，可以按照下面局域网方案操作。

前置核心条件

✅手机与电脑处于同一个局域网
两种可行组网方式：

  1. 手机、电脑连接同一个WiFi
  2. 电脑连接手机开启的个人热点

⚠️ 注意：电脑单独开热点、手机连电脑热点也可以形成局域网；但电脑使用公司内网、VPN时容易出现互通失败。

步骤1：查询电脑本机局域网IPv4地址

  1. Windows按下Win + R，输入cmd打开命令提示符
  2. 执行命令：
ipconfig
  1. 在对应网卡（以太网/WLAN）中找到IPv4地址，示例：172.20.130.xxx

重点：不要使用127.0.0.1/localhost，这是本机回环地址，手机无法访问。

步骤2：启动本地前端项目（Vite/Webpack）

重要坑点

很多项目默认仅监听127.0.0.1，外部设备无法访问，需要修改启动参数监听全部地址0.0.0.0

Vite项目（主流Vue/React）

修改package.json启动命令，增加--host

"scripts":{"dev":"vite --host"}

执行启动后，终端会输出：

vite v2.9.15 dev server running at: > Network: http://172.20.130.88:8080/ > Local: http://127.0.0.1:8080/

Network那一行地址就是局域网访问地址。

Webpack Vue-CLI项目
"serve":"vue-cli-service serve --host 0.0.0.0"

步骤3：手机访问项目

  1. 手机连接和电脑同一网络
  2. 打开手机浏览器（不推荐微信内置浏览器，容易出现缓存、跨域、样式异常）
  3. 直接输入终端输出的Network地址：
    http://172.20.130.88:8080/
    如需访问子页面，直接拼接路由：
    http://172.20.130.88:8080/#/home

常见无法访问问题排查清单

  1. 启动命令没有加 --host
    项目只监听本地localhost，局域网其他设备无法接入，优先检查！

  2. Windows防火墙拦截端口
    临时关闭防火墙测试；或者放行项目端口（示例8080端口）

  3. 电脑开启VPN / 公司内网代理
    VPN会改变网卡路由，导致手机和电脑网络不通，调试时建议关闭

  4. 路由器开启AP隔离
    部分公共WiFi、校园WiFi开启AP隔离，局域网设备之间禁止互相访问，此时改用【手机开热点，电脑连热点】方案

  5. IP地址发生变动
    电脑重启、重连WiFi后局域网IP可能变化，需要重新执行ipconfig核对IP

  6. 端口被占用
    确认启动项目使用的端口号不要写错

补充拓展

  • 真机调试同时可以搭配Chrome远程调试，直接在电脑浏览器审查手机页面元素
  • 如果需要外网访问本地项目（给其他人测试），可以使用内网穿透工具：ngrok、frp