如何将前后端文件夹作为同一项目提交到GitHub同一仓库？

拆分识别的核心原因是npx create-react-app执行时会默认在生成的React前端文件夹内初始化独立Git仓库，前端子目录会自带隐藏的.git文件夹。Git本身不支持无配置的嵌套仓库，你在根目录执行git init后，编辑器源代码管理面板会同时识别根目录仓库、前端子目录的独立仓库，就会出现拆分显示的问题。

不需要删除现有前端代码，按步骤操作即可：

• 第一步：删除前端文件夹内的独立Git仓库
  打开终端进入项目根目录，根据操作系统执行对应命令，将命令里的frontend替换为你实际的前端文件夹名：
  • Mac/Linux：

    rm -rf ./frontend/.git
    

  • Windows（PowerShell）：

    Remove-Item -Recurse -Force .\frontend\.git
    

• 第二步：清理根目录Git的残留缓存
  还是在项目根目录执行，避免Git把前端文件夹识别为子模块：

  # 替换frontend为你的前端文件夹名
  git rm --cached frontend
  

• 第三步：在根目录创建统一的.gitignore文件，过滤不需要提交的文件，参考配置如下，记得把路径里的文件夹名替换成你实际的名称：

  # 前后端依赖目录
  /backend/node_modules
  /frontend/node_modules
  # 前端构建产物
  /frontend/build
  # 环境变量文件
  **/.env
  **/.env.local
  **/.env.*.local
  # 日志文件
  npm-debug.log*
  yarn-debug.log*
  yarn-error.log*
  # 系统/编辑器临时文件
  .DS_Store
  .vscode
  .idea
  

• 第四步：验证效果
  重启编辑器或者刷新源代码管理面板，就只会显示一个根目录Git仓库，所有前后端的代码变更都会在同一个仓库下统一跟踪，后续正常提交推送到GitHub同一个仓库同一分支即可。

如果要从项目创建阶段彻底规避这个问题，按以下步骤操作，支持重建React项目：

• 第一步：创建项目根目录，先在根目录初始化Git
  不要在任何子目录提前执行Git相关命令：

  mkdir my-fullstack-project
  cd my-fullstack-project
  git init
  

• 第二步：提前在根目录创建好上面提到的.gitignore文件，写好过滤规则
• 第三步：初始化Express后端项目
  在根目录下创建后端文件夹，正常安装依赖、写代码即可，不要在backend文件夹内执行git init：

  mkdir backend
  cd backend
  npm init -y
  npm install express
  # 后续正常开发后端代码
  cd ..
  

• 第四步：创建React前端项目，必须加--no-git参数
  这个参数会禁止create-react-app自动在前端文件夹内生成独立Git仓库，所有文件都会归属于根目录的Git仓库管理：

  # 替换frontend为你想要的前端文件夹名
  npx create-react-app frontend --no-git
  

• 第五步：关联GitHub远程仓库，正常提交推送

  git add .
  git commit -m "initialize fullstack project"
  git branch -M main
  git remote add origin 你的GitHub仓库地址
  git push -u origin main
  

注意：后续所有Git操作都在项目根目录执行，不要进入前后端子目录执行Git相关命令，就不会再出现仓库拆分识别的问题。

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