react如何发布项目

打包 React 项目

运行以下命令生成生产环境代码，代码会被压缩并优化，输出到 build 文件夹：

npm run build

选择部署方式

根据项目需求选择以下常见部署方式之一：

静态服务器部署
适用于纯前端项目，将 build 文件夹上传至静态服务器（如 Nginx、Apache）。配置服务器根目录指向 build 文件夹即可。

Netlify/Vercel 托管
通过拖拽 build 文件夹到 Netlify 或 Vercel 的控制面板，或关联 GitHub 仓库自动部署。这些平台提供免费 HTTPS 和 CDN 加速。

GitHub Pages 部署
安装 gh-pages 包并配置 package.json：

npm install gh-pages --save-dev

在 package.json 中添加：

"homepage": "https://username.github.io/repo-name",
"scripts": {
  "predeploy": "npm run build",
  "deploy": "gh-pages -d build"
}

运行 npm run deploy 完成部署。

配置路由兼容性

若使用 React Router，需在静态服务器中配置重定向规则（如 Nginx）：

location / {
  try_files $uri /index.html;
}

确保直接访问路由时返回 index.html，避免 404 错误。

环境变量处理

生产环境变量需以 REACT_APP_ 为前缀，并在 .env.production 中定义：

REACT_APP_API_URL=https://api.example.com

打包时会自动替换代码中的 process.env.REACT_APP_API_URL。

验证部署

访问部署后的 URL，检查功能是否正常。使用浏览器开发者工具查看网络请求和错误日志，确保资源加载无误。