如何将react打包成静态页面

使用 Create React App 构建

React 项目可以通过 create-react-app 工具快速生成，并内置了打包功能。运行以下命令生成生产环境代码：

npm run build

构建完成后，静态文件会生成在 build 目录中，包含 HTML、CSS 和 JavaScript 文件，可直接部署到任何静态服务器。

配置路由为静态模式

如果项目使用 React Router，需确保路由兼容静态部署。在 BrowserRouter 中设置 basename 或在 HashRouter 中使用哈希路由：

import { HashRouter } from 'react-router-dom';

<HashRouter>
  <App />
</HashRouter>

优化静态资源路径

在 package.json 中设置 homepage 字段，确保资源路径正确：

{
  "homepage": "."
}

或在 webpack.config.js 中配置 publicPath：

output: {
  publicPath: './'
}

部署到 GitHub Pages

安装 gh-pages 包并添加部署脚本：

npm install gh-pages --save-dev

在 package.json 中添加：

"scripts": {
  "deploy": "gh-pages -d build"
}

运行 npm run deploy 将构建的 build 目录推送到 GitHub Pages。

使用 Vite 构建

对于更快的构建速度，可以使用 Vite。初始化 Vite React 项目：

npm create vite@latest my-app --template react

构建静态文件：

npm run build

生成的 dist 目录可直接部署。

处理环境变量

静态页面中如需环境变量，在项目根目录创建 .env 文件，变量以 VITE_ 开头：

VITE_API_URL=https://api.example.com

在代码中通过 import.meta.env.VITE_API_URL 访问。

静态文件托管

将生成的 build 或 dist 目录上传至静态托管服务（如 Netlify、Vercel、AWS S3）。Netlify 支持拖拽部署，Vercel 提供 CLI 工具：

npm install -g vercel
vercel deploy --prod