手机访问电脑本地移动端

日常开发调试移动端页面时我们大多使用浏览器F12模拟手机模式但模拟环境和真机存在差异。想要在手机真机上调试本地未部署上线的前端项目可以按照下面局域网方案操作。前置核心条件✅手机与电脑处于同一个局域网两种可行组网方式手机、电脑连接同一个WiFi电脑连接手机开启的个人热点⚠️ 注意电脑单独开热点、手机连电脑热点也可以形成局域网但电脑使用公司内网、VPN时容易出现互通失败。步骤1查询电脑本机局域网IPv4地址Windows按下Win R输入cmd打开命令提示符执行命令ipconfig在对应网卡以太网/WLAN中找到IPv4地址示例172.20.130.xxx重点不要使用127.0.0.1/localhost这是本机回环地址手机无法访问。步骤2启动本地前端项目Vite/Webpack重要坑点很多项目默认仅监听127.0.0.1外部设备无法访问需要修改启动参数监听全部地址0.0.0.0Vite项目主流Vue/React修改package.json启动命令增加--hostscripts:{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手机访问项目手机连接和电脑同一网络打开手机浏览器不推荐微信内置浏览器容易出现缓存、跨域、样式异常直接输入终端输出的Network地址http://172.20.130.88:8080/如需访问子页面直接拼接路由http://172.20.130.88:8080/#/home常见无法访问问题排查清单启动命令没有加 --host项目只监听本地localhost局域网其他设备无法接入优先检查Windows防火墙拦截端口临时关闭防火墙测试或者放行项目端口示例8080端口电脑开启VPN / 公司内网代理VPN会改变网卡路由导致手机和电脑网络不通调试时建议关闭路由器开启AP隔离部分公共WiFi、校园WiFi开启AP隔离局域网设备之间禁止互相访问此时改用【手机开热点电脑连热点】方案IP地址发生变动电脑重启、重连WiFi后局域网IP可能变化需要重新执行ipconfig核对IP端口被占用确认启动项目使用的端口号不要写错补充拓展真机调试同时可以搭配Chrome远程调试直接在电脑浏览器审查手机页面元素如果需要外网访问本地项目给其他人测试可以使用内网穿透工具ngrok、frp