react 打包后如何启动
启动 React 打包后的项目
React 项目打包后会生成静态文件（通常位于 build 目录），可以通过以下方式启动：
使用静态文件服务器启动
安装 serve 工具（全局或局部安装均可）：
npm install -g serve运行以下命令启动服务：
serve -s build-s 参数确保单页应用（SPA）路由正确重定向到 index.html。
使用 Node.js 或 Express 服务器
如果需要自定义服务器逻辑，可以创建一个简单的 Express 服务器：
-
安装 Express：
npm install express -
创建
server.js文件：const express = require('express'); const path = require('path'); const app = express();
// 托管静态文件 app.use(express.static(path.join(__dirname, 'build')));
// 处理 SPA 路由 app.get('*', (req, res) => { res.sendFile(path.join(__dirname, 'build', 'index.html')); });
const PORT = process.env.PORT || 3000;
app.listen(PORT, () => {
console.log(Server is running on port ${PORT});
});
3. 启动服务器：
```bash
node server.js配置生产环境变量
确保环境变量（如 API 地址）在打包时已正确配置。React 项目通常通过 .env.production 文件定义生产环境变量：
REACT_APP_API_URL=https://api.example.com打包时变量会被注入到静态文件中。
处理路由问题
若使用 React Router 等客户端路由，需确保服务器配置了通配路由（如上文 Express 示例），将所有请求重定向到 index.html。
启用 HTTPS
生产环境建议使用 HTTPS。可通过以下方式实现：
- 使用 Nginx 或 Apache 反向代理并配置 SSL 证书。
- 直接在 Express 中启用 HTTPS：
const https = require('https'); const fs = require('fs'); const options = { key: fs.readFileSync('path/to/key.pem'), cert: fs.readFileSync('path/to/cert.pem') }; https.createServer(options, app).listen(443);
性能优化
打包后可通过以下方式优化加载速度：
- 启用静态文件压缩（如 Express 的
compression中间件）。 - 配置 CDN 托管静态资源。
- 使用
Cache-Control头缓存静态文件。
