如何配置使外部设备可访问npm start启动的create-react-app项目（无需npm eject）

没问题！不用执行npm eject就能轻松实现，只需要修改package.json里的启动配置就行，具体步骤如下：

• 修改package.json的start命令
  打开项目根目录的package.json，找到scripts里的start字段，修改成带HOST参数的形式：

  "scripts": {
    "start": "HOST=0.0.0.0 react-scripts start",
    // 其他脚本保持不变
  }
  

  这里的0.0.0.0表示让开发服务器监听电脑上的所有网络接口，而不是只绑定本地的localhost，这样同一局域网的设备就能访问到。

  如果需要指定自定义端口（比如不想用默认的3000），可以同时加上PORT参数：

  "scripts": {
    "start": "HOST=0.0.0.0 PORT=3001 react-scripts start",
  }
  

• Windows系统注意事项
  Windows的环境变量设置语法和Mac/Linux不同，需要改成这种写法：

  "scripts": {
    "start": "set HOST=0.0.0.0 && react-scripts start",
    // 指定端口的话：
    // "start": "set HOST=0.0.0.0 && set PORT=3001 && react-scripts start"
  }
  

• 获取你的局域网IP
  其他电脑需要通过你的电脑局域网IP来访问，获取方式：

  • Windows：打开命令提示符，执行ipconfig，找到「IPv4地址」（通常是192.168.x.x格式）
  • Mac/Linux：打开终端，执行ifconfig或ip addr，找到对应的局域网IP（比如en0或wlan0下的inet地址）

• 其他电脑访问
  在同一局域网的其他电脑浏览器中输入：

  http://你的局域网IP:3000
  

  如果指定了自定义端口，就把3000换成你设置的端口号。

额外注意 #

• 确保你的电脑和其他测试电脑在同一局域网（比如同一个WiFi或有线网络）
• 检查电脑防火墙是否允许3000端口（或你自定义的端口）的入站连接，必要时临时关闭防火墙测试

内容的提问来源于stack exchange，提问作者Ben Carp