如何将Create React App构建的React应用部署到子目录？

没问题，这两个需求都能轻松实现，我一步步给你捋清楚！

步骤1：配置React项目的子路径前缀 #

首先得让Create React App知道它要部署在/app1这个子路径下，不然构建出来的静态资源会找不到。在你的项目根目录的package.json里添加homepage字段：

{
  "name": "your-app-name",
  "homepage": "/app1",
  // 其他原有字段...
}

步骤2：构建项目 #

执行常规的构建命令生成适配子路径的静态文件：

npm run build

这时候/build目录里的所有资源路径都会自动带上/app1前缀，避免访问时出现404。

步骤3：用serve命令指定子路径运行 #

使用serve的--prefix参数来绑定访问前缀，运行以下命令：

serve build --prefix /app1

现在你的应用就可以通过myserver:5000/app1正常访问了！

当然可以！只需要把多个应用的构建产物整理到同一个父目录下，用serve托管这个父目录即可：

步骤1：分别配置每个React项目的子路径 #

• 第一个项目的package.json添加"homepage": "/app1"
• 第二个项目的package.json添加"homepage": "/app2"
• 分别对两个项目执行npm run build，得到各自的/build目录。

步骤2：整理目录结构 #

创建一个总目录（比如叫multi-apps），然后在里面创建app1和app2两个子目录，把两个项目的/build内容分别复制进去：

multi-apps/
├── app1/
│   ├── static/
│   ├── index.html
│   └── ...（第一个项目的build文件）
└── app2/
    ├── static/
    ├── index.html
    └── ...（第二个项目的build文件）

步骤3：用serve托管总目录 #

运行以下命令：

serve multi-apps

现在就可以通过myserver:5000/app1访问第一个应用，myserver:5000/app2访问第二个应用了！

内容的提问来源于stack exchange，提问作者Shai UI