手机上访问你电脑上的前端项目
✅ 一、前提条件
为了能在手机上访问你电脑上的前端项目，需要满足以下几个条件：
- 电脑和手机处于同一个局域网（比如连着同一个 Wi-Fi）
- 你的电脑上已经启动了一个前端项目（比如运行在
http://localhost:3000或http://127.0.0.1:5173） - 你要找到电脑在局域网中的 IP 地址
- 前端项目需要监听局域网 IP 或允许外部设备访问（有些工具默认只允许 localhost）
✅ 二、操作步骤详解
第 1 步：确保你的前端项目已经启动
你已经在电脑上通过如下命令启动了一个前端项目，比如：
React（Vite / Create React App）:
npm run dev # 或者 yarn dev启动后通常会显示：
VITE v5.x ready in 300ms➜ Local: http://localhost:5173/ ➜ Network: http://192.168.x.x:5173/ ← 这个就是关键！Vue（Vue CLI / Vite）:
npm run serve # Vue CLI # 或 npm run dev # Vue 3 + Vite通常也会显示类似：
App running at: - Local: http://localhost:8080/ - Network: http://192.168.x.x:8080/
🎯 重点来了！
请你仔细看启动后终端打印的信息，一般会有两行：
Local:→ 只能在本机用localhost或127.0.0.1访问Network:或On Your Network:→ 这是你局域网内其他设备（比如手机）可以访问的地址！
👉 如果你的终端输出里 没有显示 Network 地址，那可能是你的开发服务器 默认只绑定了 localhost，需要手动设置让它监听局域网 IP 或 0.0.0.0。
第 2 步：确保你的开发服务器监听 0.0.0.0（如果必要）
大多数现代前端工具（如 Vite、Create React App、Vue CLI）默认已经支持局域网访问，会自动绑定到 0.0.0.0，所以你通常 无需额外配置，只要看终端是否打印了类似：
Network: http://192.168.1.100:5173但如果你的工具没有显示 Network 地址，或者你明确想让服务监听所有网络接口，可以：
▶ 对于 Vite 项目（比如 React / Vue 3）
Vite 默认就已经监听 0.0.0.0，无需配置。但如果你自己配置了 server，确保：
// vite.config.js
export default {server: {host: '0.0.0.0', // 允许局域网访问port: 5173,},
}然后重启项目，再看终端是否打印了类似：
Network: http://192.168.x.x:5173▶ 对于 Vue CLI（旧版）
在 vue.config.js 中配置：
module.exports = {devServer: {host: '0.0.0.0',port: 8080,},
};然后重启 npm run serve，终端会显示局域网地址。
第 3 步：找到你电脑在局域网中的 IP 地址
即使工具打印了 Network 地址（比如 http://192.168.1.100:5173），你也可以手动确认一下你的电脑 IP，方便手机直接输入访问。
▶ Windows 查 IP：
- 按下
Win + R，输入cmd打开命令提示符 - 输入：
ipconfig - 找到你当前连接的 Wi-Fi 适配器（通常是 无线局域网适配器 WLAN）
- 找到一行 IPv4 地址，例如：
IPv4 地址 . . . . . . . . . . . . : 192.168.1.100
✅ 这个 192.168.1.100 就是你电脑在局域网中的 IP，手机可以通过这个 IP 访问你电脑上的服务。
▶ Mac / Linux 查 IP：
打开“终端”，输入：
ifconfig | grep "inet "或者更精准的（适用于 Wi-Fi）：
ipconfig getifaddr en0或者：
ifconfig | grep "inet 192.168"找到类似 192.168.x.x 的地址，通常是以 192.168 开头的，那个就是你的局域网 IP。
第 4 步：确保手机和电脑连接同一个 Wi-Fi
这是关键中的关键！
- 电脑和手机必须连在同一个路由器下的 Wi-Fi，这样它们才能通过局域网互相访问。
- 如果你电脑用网线连接路由器，手机连 Wi-Fi，只要属于同一网络也是可以的。
第 5 步：在手机浏览器中访问你电脑的 IP + 项目端口
假设你通过上面的步骤得知：
- 电脑的局域网 IP 是：
192.168.1.100 - 你的前端项目运行在端口：
5173（比如 Vite 默认端口）
那么，在你的手机浏览器地址栏输入：
http://192.168.1.100:5173然后回车 👇
✅ 如果一切正常，你应该可以看到和你电脑上打开的一模一样的前端页面！
✅ 三、常见问题及解决办法
❌ 1. 手机访问显示“无法连接”或“拒绝连接”
可能原因：
- 电脑和手机 不在同一个 Wi-Fi
- 你的前端服务 没有监听 0.0.0.0 或局域网 IP
- 防火墙或安全软件阻止了外部访问
- 服务没有正确启动，或者端口不对
解决方法：
- 确认电脑和手机连同一个 Wi-Fi
- 确保服务监听
0.0.0.0（现代工具一般默认支持） - 检查终端是否打印了类似
Network: http://192.168.x.x:xxxx的地址 - 确保你输入的 IP 和端口完全正确
- 暂时关闭防火墙测试（不推荐长期关闭）
❌ 2. 我的终端没有显示 Network 地址怎么办？
如前面所说，多数现代工具（Vite、Vue CLI、CRA）默认已经支持局域网访问，会打印 Network 地址。
如果没有，你可以：
- 检查你的
vite.config.js或vue.config.js或webpack.config.js，确保host: '0.0.0.0' - 重启项目
- 再看终端是否打印了类似：
Network: http://192.168.1.100:5173
❌ 3. 项目启动在 localhost:3000，但没看到 Network 地址
很多脚手架工具（比如 CRA、Vite）在启动时都会同时显示：
Local: http://localhost:3000On Your Network: http://192.168.x.x:3000
👉 一定要看启动日志！
如果没有显示，尝试升级你的工具版本，或者手动设置 host: '0.0.0.0'。
✅ 四、进阶：不想记 IP？可以使用局域网域名（可选）
如果你不想每次都输入 IP 地址，可以考虑：
- 使用工具如 **
ngrok 或 localtunnel** 将本地服务暴露为公网 HTTPS 链接，手机也能通过一个网址访问（适合临时演示，但需要外网） - 或者使用路由器给电脑设置一个固定的局域网 IP，方便记忆
但作为日常开发预览，记住你的局域网 IP（如 192.168.1.100）+ 端口（如 5173） 是最简单实用的。
✅ 总结：手机访问电脑前端项目步骤一览
| 步骤 | 操作内容 |
|---|---|
| 1️⃣ | 确保电脑上已启动前端项目（如 npm run dev） |
| 2️⃣ | 查看终端是否打印了 Network: 或局域网访问地址（如 http://192.168.x.x:5173） |
| 3️⃣ | 如果没有，确保你的开发服务器配置了 host: '0.0.0.0' |
| 4️⃣ | 查看电脑的局域网 IP（如 192.168.1.100，通过 ipconfig 或 ifconfig） |
| 5️⃣ | 确保手机和电脑连的是同一个 Wi-Fi |
| 6️⃣ | 在手机浏览器输入：http://<电脑IP>:<端口>，如 http://192.168.1.100:5173 |
| 7️⃣ | 成功访问！你可看到与电脑一样的页面，可用来预览、调试响应式布局等 |