手机上访问你电脑上的前端项目

✅ 一、前提条件

为了能在手机上访问你电脑上的前端项目，需要满足以下几个条件：

1. ​电脑和手机处于同一个局域网（比如连着同一个 Wi-Fi）​​
2. ​你的电脑上已经启动了一个前端项目（比如运行在 http://localhost:3000 或 http://127.0.0.1:5173）​​
3. ​你要找到电脑在局域网中的 IP 地址​
4. ​前端项目需要监听局域网 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：

1. 按下 Win + R，输入 cmd 打开命令提示符
2. 输入： 

   ipconfig

3. 找到你当前连接的 Wi-Fi 适配器（通常是 ​无线局域网适配器 WLAN）
4. 找到一行 ​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:3000
• On 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）​​ 是最简单实用的。

✅ 总结：手机访问电脑前端项目步骤一览