现有React项目嵌入Docusaurus后构建访问异常求助

1. 修正Docusaurus的baseUrl配置 #

打开Docusaurus项目的docusaurus.config.js，把baseUrl改成'/my-docs/'——这步是让Docusaurus构建出来的所有资源都以/my-docs/为根路径，避免后续访问时资源找不到。

module.exports = {
  // 其他配置保持不变
  baseUrl: '/my-docs/',
  // ...
};

改完重新运行Docusaurus的构建命令，把新生成的build文件夹内容替换到React项目的/public/my-docs目录下。

2. 确保React构建时完整复制my-docs目录 #

Create React App默认会把public文件夹下的所有内容复制到build目录，但如果你有自定义的webpack或craco配置，得确认没把my-docs目录排除在外。

3. 处理路由重写（核心步骤） #

React构建后用serve启动时，默认会把所有路径都指向index.html，导致/my-docs下的静态文件无法直接访问，需要添加路由规则：

• 在React项目根目录创建serve.json文件，内容如下：

{
  "rewrites": [
    { "source": "/my-docs/**", "destination": "/my-docs/$1" },
    { "source": "**", "destination": "/index.html" }
  ]
}

• 把React项目package.json里的homepage字段改成'.'，保证静态资源用相对路径加载：

{
  "homepage": ".",
  // 其他配置不变
}

之后启动服务器时，使用命令：npx serve -s build -c serve.json，这样访问/my-docs开头的路径时，serve会直接返回对应的静态文件，其他路径仍交由React处理。

4. 验证流程 #

1. 按步骤1重新构建Docusaurus，替换React的/public/my-docs内容
2. 执行npm run build构建React应用
3. 用npx serve -s build -c serve.json启动服务
4. 分别访问http://localhost:3000（主应用）和http://localhost:3000/my-docs/intro（Docusaurus文档），确认都能正常打开

内容的提问来源于stack exchange，提问作者Amit Pande