要让手机访问电脑上运行的前端开发服务器比如 Vite、Webpack Dev Server、http-server 等核心原理是让手机和电脑处于同一局域网并让服务器监听局域网的 IP 地址。下面是完整步骤和常见问题解决方法。1. 基本条件手机和电脑连接同一个 Wi-Fi或者电脑用网线、手机连同一路由器的 Wi-Fi。电脑上已经启动了一个前端开发服务器例如http://localhost:3000能正常访问。2. 获取电脑的局域网 IPWindows打开命令提示符CMD输入ipconfig找到正在使用的网络适配器通常是“无线局域网适配器 Wi-Fi”或“以太网适配器”记下IPv4 地址例如192.168.1.100macOS / Linux打开终端输入ifconfig或ip addr找到en0Wi-Fi或eth0有线找到inet后面的地址例如192.168.1.1003. 配置服务器允许局域网访问不同的开发服务器默认只监听localhost127.0.0.1需要改为监听0.0.0.0所有网络接口。常见工具配置方法工具 / 框架如何允许局域网访问Vite默认支持。启动时自动显示 Network 地址或运行npm run dev -- --host或在项目的 vite.config.js 文件中你可以添加一个 server 配置将 host 设置为 ‘0.0.0.0’。这样你的服务就会监听所有网络接口包括局域网和公网地址。例如import { defineConfig } from vite; export default defineConfig({ server: { host: 0.0.0.0 } });Create React App默认支持。启动后控制台会显示局域网地址如http://192.168.1.100:3000Webpack Dev Server在配置中添加host: 0.0.0.0或在package.json的scripts中加--host 0.0.0.0http-server运行时加参数http-server -a 0.0.0.0Next.js运行npm run dev -H 0.0.0.0或在package.json中加-H 0.0.0.0Angular CLIng serve --host 0.0.0.0示例Vitenpmrun dev ----host或import{defineConfig}fromvite;exportdefaultdefineConfig({server:{host:0.0.0.0}});控制台会输出类似➜ Local: http://localhost:5173/ ➜ Network: http://192.168.1.100:5173/4. 检查并关闭电脑防火墙或添加规则Windows打开“Windows 安全中心” → “防火墙和网络保护” → “允许应用通过防火墙”找到你的 Node.js 或对应程序勾选“专用”和“公用”或者临时关闭防火墙测试不建议长期关闭macOS系统设置 → 网络 → 防火墙 → 允许指定程序通过Linux (Ubuntu)sudoufw allow3000# 以端口3000为例5. 用手机访问手机浏览器地址栏输入http://电脑的局域网IP:端口号例如http://192.168.1.100:3000如果能正常打开说明成功。常见问题及解决办法❌ 手机无法访问连接超时原因 1不在同一局域网。检查手机 Wi-Fi 名称是否和电脑一致电脑如果用网线确保和手机 Wi-Fi 是同一个路由器下的网段。原因 2防火墙阻止。临时关闭电脑防火墙测试。原因 3服务器没有监听0.0.0.0。回到第 3 步重新启动服务器。原因 4端口被占用或服务器崩溃。确保电脑上localhost:端口能正常访问。❌ 手机访问时提示“不安全”或无法加载资源HTTPS 问题如果你的网页需要调用摄像头、地理位置等 API浏览器可能强制要求 HTTPS。解决办法使用内网穿透工具如 ngrok提供 HTTPS 地址。或者在手机上临时访问http://版本部分 iOS 默认允许 http但某些功能受限。iOS 可尝试关闭“自动检测网站是否支持 HTTPS”等实验性选项。❌ 手机访问样式/资源加载不出来页面中使用了//localhost:3000/xxx.js这样的绝对路径或http://127.0.0.1的硬编码资源。解决办法使用相对路径或根据环境变量动态设置资源 URL。❌ 刷新页面后接口请求失败跨域或后端地址写死前端请求后端 API 时如果写的是http://localhost:8080手机无法识别。解决办法将 API 地址改为电脑的局域网 IP或使用代理配置。备选方案不在同一局域网时如果你和手机不在同一个网络比如电脑在公司手机用流量可以使用内网穿透工具ngrokngrok http 3000→ 生成一个公网 https 地址手机直接访问该地址。localtunnellt --port 3000serveossh -R 80:localhost:3000 serveo.net这些工具会自动处理防火墙、HTTPS 等问题适合临时远程演示。总结命令速查场景命令Vite 允许局域网npm run dev -- --hostWebpack Dev Server在配置中加host: 0.0.0.0获取电脑 IPWinipconfig获取电脑 IPMac/Linuxifconfig或ip addr临时关闭 Windows 防火墙测试netsh advfirewall set allprofiles state off按照以上步骤操作绝大多数情况都能顺利用手机访问电脑上的前端页面。如果仍遇到问题请提供你使用的具体工具和错误现象我可以进一步帮你分析。