如何访问已启动的react

访问已启动的React应用

确保React应用已通过npm start或yarn start命令启动。默认情况下，开发服务器会运行在本地主机的3000端口。

打开浏览器并输入以下地址之一：

• http://localhost:3000
• http://127.0.0.1:3000

修改默认端口

如果3000端口被占用或需要指定其他端口，可通过以下方式修改：

在package.json中修改启动脚本，添加端口参数：

"scripts": {
  "start": "set PORT=4000 && react-scripts start"
}

或通过环境变量临时指定端口：

PORT=4000 npm start

局域网内访问

允许同一网络下的其他设备访问开发中的React应用。启动时添加--host参数：

npm start -- --host 0.0.0.0

通过本机IP地址加端口访问，例如： http://192.168.x.x:3000

生产环境访问

构建生产版本后，通过静态文件服务器访问：

npm run build

生成的静态文件位于build目录，可通过以下方式部署：

• 使用serve模块快速启动服务器：

  npx serve -s build

• 配置Nginx/Apache指向build目录

解决常见访问问题

开发服务器无响应时检查：

• 终端是否显示成功启动信息
• 防火墙是否阻止了端口访问
• 是否存在控制台报错

跨域问题可通过配置代理解决，在package.json中添加：

"proxy": "http://api.example.com"

HTTPS访问配置

创建开发环境HTTPS证书：

mkcert localhost

在package.json中配置：

"scripts": {
  "start": "set HTTPS=true&&SSL_CRT_FILE=localhost.pem&&SSL_KEY_FILE=localhost-key.pem&&react-scripts start"
}