如何在手机上访问本地运行的React项目localhost:3000？

实操排查方案 #

1. 确保项目启动配置正确生效 #

• 如果你用Create React App（CRA），直接修改package.json里的启动脚本更稳妥，避免命令行参数传递失效：

  "scripts": {
    "start": "react-scripts start --host 0.0.0.0"
  }
  

  保存后重新运行npm start，启动成功后控制台会打印局域网可访问的地址，直接用这个地址在手机打开。
• 用Vite搭建的项目，修改vite.config.js：

  export default defineConfig({
    server: {
      host: '0.0.0.0',
      port: 3000
    }
  })
  

2. 确认局域网IP无误 #

• Mac终端执行ifconfig | grep inet，找到WiFi网卡（通常是en0）对应的inet地址，别选虚拟机或VPN的IP；Windows命令行执行ipconfig，找WiFi适配器的IPv4地址。
• 先在本地浏览器访问这个IP+端口（比如http://192.168.1.100:3000），确认本地能打开再去手机测试。

3. 检查路由器限制 #

• 部分路由器开了AP隔离，会阻止局域网设备互访，登录路由器后台关闭该功能（一般在WiFi或局域网设置里）。
• 试试换个端口启动项目，比如npm start --host 0.0.0.0 --port 3001，避免路由器默认屏蔽3000端口。

4. 系统网络权限检查 #

• Mac：打开「系统设置」→「网络」→「高级」→「防火墙」，要么关闭防火墙，要么在防火墙规则里添加Node.js允许接收网络连接。
• Windows：打开「Windows Defender防火墙」→「允许应用通过防火墙」，确保Node.js在允许列表里。

5. 关闭VPN/代理 #

• 全局代理或VPN会干扰局域网IP访问，先关掉再测试。

内容的提问来源于stack exchange，提问作者akilesh raj