Create React App配置basename后开发正常，生产构建报错空白

AI 小北

2026-8-4

问题解决步骤

1. 修复代码中不一致的basename配置

你的代码里存在两处basename不匹配的冲突：

createBrowserHistory({ basename: '/admin' }) 设置了路由基准路径为/admin
但传给CustomRouter的basename参数是"/thug-app"

修改index.js中的CustomRouter配置，把basename统一为/admin：

<CustomRouter history={history} basename="/admin">
  <ScrollToTop>
      <App />
  </ScrollToTop>
</CustomRouter>

2. 配置create-react-app的homepage字段

在项目根目录的package.json中添加或修改homepage字段，值为"/admin"——这会让构建工具自动为静态资源路径加上/admin前缀，避免资源加载错误：

{
  "homepage": "/admin"
}

3. 重新构建生产版本

执行构建命令，确保新配置生效：

npm run build

4. 正确配置生产服务器

使用serve包

需要指定-s参数（处理SPA路由）和--prefix /admin参数，确保静态资源和路由都能正确映射：

serve -s build --prefix /admin

使用pm2（配合express）

pm2本身不直接处理静态资源和SPA路由，需要写一个简单的express服务：

安装express依赖：

npm install express --save-dev

在项目根目录创建server.js文件：

const express = require('express');
const path = require('path');
const app = express();

// 托管/build下的静态资源，路径前缀为/admin
app.use('/admin', express.static(path.join(__dirname, 'build')));

// 所有/admin下的非静态资源请求，返回index.html以支持SPA路由
app.get('/admin/*', (req, res) => {
  res.sendFile(path.join(__dirname, 'build', 'index.html'));
});

// 启动服务，监听3000端口（可按需修改）
app.listen(3000, () => {
  console.log('Server running on port 3000');
});