打包好的react代码如何在本地跑
运行打包后React项目的本地方法
安装serve工具
全局安装serve包，用于快速启动本地静态服务器。通过npm或yarn执行以下命令：
npm install -g serve
# 或
yarn global add serve启动本地服务器
进入项目打包后的目录（通常是build或dist），运行以下命令：
serve -s build-s参数会将所有路由重定向到index.html，适合单页应用（SPA）。
指定端口运行
若默认端口被占用，可通过-l指定端口号：
serve -s build -l 4000替代方案：使用Node.js原生模块
创建简易HTTP服务器
在打包目录下创建server.js文件，添加以下代码：
const express = require('express');
const path = require('path');
const app = express();
app.use(express.static(path.join(__dirname)));
app.get('*', (req, res) => {
res.sendFile(path.join(__dirname, 'index.html'));
});
const PORT = process.env.PORT || 3000;
app.listen(PORT, () => console.log(`Server running on port ${PORT}`));运行自定义服务器
确保已安装express，执行以下命令启动：
npm install express
node server.js解决常见问题
路由404问题
若使用前端路由（如React Router），需确保服务器配置了URL重定向。在serve工具中使用-s参数，或在Express中添加通配路由。
跨域API请求
开发环境下配置代理的proxy设置需替换为生产环境API绝对地址，或通过Nginx反向代理解决。
环境变量失效
打包时环境变量会被硬编码，需通过运行时环境变量注入工具（如env-cmd）或后端接口传递配置。
性能优化建议
启用Gzip压缩 在Express服务器中添加压缩中间件：
const compression = require('compression');
app.use(compression());缓存控制 设置静态资源缓存头：
app.use(express.static('build', {
maxAge: '1y',
setHeaders: (res, path) => {
if (path.endsWith('.html')) {
res.setHeader('Cache-Control', 'no-cache');
}
}
}));
