react项目如何打开预览

在开发环境中启动预览

启动本地开发服务器通常使用 npm start 或 yarn start。确保项目根目录下有 package.json 文件，并已安装依赖（通过 npm install 或 yarn install）。命令执行后，默认会在浏览器打开 http://localhost:3000 的实时预览页面。

使用自定义端口

若默认端口被占用，可通过修改启动命令指定端口。在 package.json 的 scripts 部分添加环境变量：

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

或直接运行：

PORT=4000 npm start

生产环境构建预览

使用 npm run build 生成优化后的静态文件，存放在 build 文件夹。通过 serve 工具快速预览：

npm install -g serve
serve -s build

默认访问 http://localhost:5000。

配置自动打开浏览器

在 package.json 中设置 BROWSER 环境变量可指定浏览器：

"start": "BROWSER=firefox react-scripts start"

或通过 .env 文件配置：

BROWSER=chrome

解决常见问题

若预览未自动打开，手动访问终端显示的本地地址（如 http://localhost:3000）。检查防火墙或网络设置是否阻止了端口访问。确保项目无编译错误，终端日志会提供具体错误信息。