如何免费在单个域名下托管多个独立项目？

方案一：修复Netlify单仓库构建配置（解决之前的404问题） #

你之前的思路方向没问题，核心问题是构建产物未合并到同一发布目录，且React项目路由未适配子路径。按以下步骤调整：

1. 保持项目结构：./frontend（Vue业务平台）和./portfolio（React作品集）同属一个仓库
2. 修改netlify.toml构建命令，将React构建产物复制到Vue的dist目录下的developer-portfolio子文件夹：

[build]
command = "cd frontend && npm install && npm run build && cd ../portfolio && npm install && npm run build && cp -r ../portfolio/build ../frontend/dist/developer-portfolio"
publish = "frontend/dist/"

3. 配置React项目路由：在React Router（或你使用的路由库）中设置basename="/developer-portfolio"，确保路由跳转不会出现路径错误
4. 重新部署后，xyz.com会加载Vue业务平台，xyz.com/developer-portfolio会加载React作品集

方案二：Cloudflare Pages + 路由规则（多项目独立部署） #

Cloudflare Pages免费版支持多个项目，可通过路由规则实现单域名多路径分发：

1. 分别创建两个Cloudflare Pages项目：
   • 上传Vue业务平台代码，绑定xyz.com为主域名
   • 上传React作品集代码，部署后获得默认的Cloudflare Pages域名（如portfolio.pages.dev）
2. 进入Cloudflare域名管理后台，添加URL重写规则：
   • 规则匹配：xyz.com/developer-portfolio/*
   • 动作设置：转发到portfolio.pages.dev/$1（保留原路径参数）
3. 同样需给React项目设置路由basename="/developer-portfolio"，避免路由异常

方案三：本地合并构建后上传静态文件（最灵活） #

若不想依赖平台构建，可本地完成两个项目的构建与合并，再上传到免费静态托管平台（如Netlify、Cloudflare Pages、GitHub Pages）：

1. 本地构建Vue项目：cd frontend && npm run build
2. 本地构建React项目：cd portfolio && npm run build
3. 手动将React的build文件夹内容复制到Vue的dist/developer-portfolio目录下
4. 将合并后的dist文件夹上传至任意免费静态托管平台，绑定xyz.com即可

内容的提问来源于stack exchange，提问作者Francesco Gropplero Di Troppen