通用代码协作平台

介绍主流的代码协作平台，包括它们的核心特点、适用场景和基础使用差异。

一、主流代码协作平台对比（核心维度）

平台	核心定位	优势	适用场景	国内访问	免费版限制
GitHub	全球最大开源协作平台	开源生态丰富、GitHub Actions、Pages	开源项目、海外团队、个人开发者	需代理	无限公共仓库，私有仓库人数≤3
GitLab	企业级一站式 DevOps 平台	私有化部署、功能全（CI/CD、Issue、Wiki）	企业/团队、需私有化、国内可访问	友好	无限私有仓库，CI/CD 分钟数有限
Gitee（码云）	国内版 GitHub	访问快、本土化服务、企业版适配国内	国内团队、中小企业、不想搭代理	极佳	无限公共仓库，私有仓库≤5 人
Bitbucket	Atlassian 旗下 Git 平台	与 Jira/Confluence 集成、适合敏捷开发	用 Atlassian 套件的团队、海外中小团队	一般	无限私有仓库，人数≤5
Coding.net（腾讯云）	国内企业级研发协作平台	一站式研发（Git、CI/CD、文档、测试）	国内中大型企业、全流程研发管理	极佳	个人版免费，企业版按人数收费

---

二、核心平台详解（新手易上手）

1. Gitee（码云）- 国内首选

核心特点

• 完全适配国内网络，无需代理，访问速度快；
• 功能和操作逻辑几乎和 GitHub 一致（克隆、推送、PR/合并请求、Issue），新手无缝切换；
• 支持「Gitee Pages」部署前端项目（Vue/React），流程和 GitHub Pages 类似；
• 本土化服务：实名认证、企业备案、客服支持。

基础操作（和 GitHub 几乎一致）

# 克隆 Gitee 仓库
git clone https://gitee.com/你的用户名/项目名.git
# 推送代码
git push origin main

适用场景

• 国内小团队/个人开发，不想折腾代理；
• 前端项目快速部署（Gitee Pages 比 GitHub Pages 访问快）；
• 企业项目需合规、备案。

2. GitLab - 企业级首选

核心特点

• 支持私有化部署（把平台搭在自己公司服务器上），数据更安全，适合对隐私要求高的企业；
• 一站式 DevOps：内置 CI/CD（持续集成/部署）、代码审查、测试管理、容器仓库等；
• 开源版免费，功能无阉割，企业版收费（多高级权限/支持）。

基础操作

和 GitHub/Gitee 命令完全一致，仅仓库地址不同：

# 克隆 GitLab 仓库（私有部署版）
git clone http://你的公司GitLab地址/用户名/项目名.git
# 公有 GitLab 地址
git clone https://gitlab.com/用户名/项目名.git

适用场景

• 中大型企业、团队，需私有化部署；
• 想一站式管理研发流程（从代码提交到上线）；
• 开源项目也可托管（GitLab 开源生态不如 GitHub，但功能更全）。

3. Coding.net（腾讯云）- 国内企业级

核心特点

• 腾讯旗下，国内稳定，支持私有化部署+公有云；
• 除了 Git 仓库，还集成「项目管理（敏捷/瀑布）、测试管理、文档、在线协作」；
• 适合国内企业做全流程研发管理，合规性强（符合等保、隐私法）。

适用场景

• 国内中大型企业，需全流程研发协作；
• 团队需要「代码+文档+测试+部署」一体化管理。

4. Bitbucket - 海外团队适配

核心特点

• 属于 Atlassian 生态（和 Jira/Confluence 无缝集成），适合用敏捷开发的团队；
• 免费版支持无限私有仓库，人数≤5，适合小团队；
• 内置 CI/CD，支持多语言项目。

适用场景

• 海外中小团队，已在用 Jira 做项目管理；
• 对「Git 仓库+任务管理」集成要求高的团队。

---

三、平台选择建议（新手/团队）

1. 个人开发者/开源项目

• 优先选 GitHub（生态最丰富，开源项目曝光度高）；
• 国内访问不便 → 选 Gitee（同步 GitHub 仓库一键操作）。

2. 国内小团队（≤5 人）

• 首选 Gitee 免费版（够用、访问快）；
• 需更多协作功能 → Coding.net 个人版。

3. 国内中大型企业

• 需私有化部署 → GitLab 开源版 / Coding.net 企业版；
• 需全流程研发管理 → Coding.net 企业版。

4. 海外团队

• 开源/个人 → GitHub；
• 企业/私有化 → GitLab；
• 用 Jira 生态 → Bitbucket。

---

四、跨平台仓库同步（实用技巧）

如果想同时把代码托管到多个平台（比如 GitHub + Gitee），可添加多个远程仓库：

# 1. 先关联 GitHub 仓库（origin 为默认别名）
git remote add origin https://github.com/用户名/项目名.git
# 2. 添加 Gitee 仓库（别名设为 gitee）
git remote add gitee https://gitee.com/用户名/项目名.git# 推送代码到 GitHub
git push origin main
# 推送代码到 Gitee
git push gitee main# 拉取 Gitee 最新代码
git pull gitee main

---

总结

1. 核心选择逻辑：国内优先 Gitee/Coding.net，海外优先 GitHub/GitLab，企业私有化优先 GitLab/Coding.net；
2. 操作一致性：所有 Git 协作平台的命令（clone/push/pull）完全一致，仅仓库地址不同，上手成本低；
3. 免费版够用性：个人/小团队用各平台免费版基本满足需求，企业按需升级付费版即可。

举例平台的具体使用教程：Gitee 部署 Vue 项目

从「前置准备」「项目配置」「部署操作」「常见问题解决」四个环节一步步讲解：

前置条件

1. 本地已有 Vue 项目（已完成开发，能正常运行 npm run build 打包）；
2. Gitee 账号已注册，且新建了一个空仓库（命名为 vue-gitee-demo）；
3. 已将 Vue 项目代码推送到该 Gitee 仓库。

---

一、Vue 项目关键配置（核心步骤）

部署前必须修改 Vue 项目的公共路径配置，否则部署后会出现「页面空白、资源 404」的问题。

步骤 1：修改 vue.config.js（Vue 2/Vue 3 通用）

在 Vue 项目根目录找到 vue.config.js（没有则新建），添加 publicPath 配置（值为Gitee 仓库名，小写）：

// vue.config.js
module.exports = {// 关键：公共路径 = /仓库名/（必须以 / 开头和结尾）publicPath: process.env.NODE_ENV === 'production'? '/vue-gitee-demo/'  // 替换为你的 Gitee 仓库名！: '/'
}

• 示例：如果 Gitee 仓库名是 my-vue-project，则 publicPath: '/my-vue-project/'；
• 本地开发时（npm run serve）会用 '/'，不影响本地调试；打包部署时用仓库名路径，适配 Gitee Pages。

步骤 2：打包 Vue 项目

在终端进入项目根目录，执行打包命令：

# 安装依赖（首次打包需执行）
npm install
# 打包生成 dist 文件夹
npm run build

打包完成后，项目根目录会生成 dist 文件夹，里面是部署所需的静态文件（HTML/CSS/JS/图片）。

---

二、方式 1：手动部署到 Gitee Pages（新手推荐）

这种方式无需额外配置，手动上传打包后的 dist 文件即可，适合新手。

步骤 1：将 dist 文件夹推送到 Gitee 仓库

默认 .gitignore 会忽略 dist 文件夹，需先取消忽略，再提交推送：

1. 打开项目根目录的 .gitignore 文件，删除 dist/ 这一行（或注释掉：# dist/）；
2. 执行以下命令提交 dist 文件夹到 Gitee：

# 暂存 dist 文件夹
git add dist/
# 提交备注
git commit -m "添加打包后的 dist 文件夹，用于 Gitee Pages 部署"
# 推送到 Gitee 仓库
git push origin main

步骤 2：开启 Gitee Pages

1. 打开 Gitee 仓库页面（比如 https://gitee.com/你的用户名/vue-gitee-demo）；
2. 点击仓库页面顶部的「服务」→「Gitee Pages」；
3. 在 Pages 配置页面：
   • 部署分支：选择 main（或所推送代码的分支）；
   • 部署目录：填写 dist（打包后的文件夹名，必须填）；
   • 其他保持默认，点击「启动部署」；
4. 等待部署完成（约 10 秒），页面会显示访问地址（格式：https://你的用户名.gitee.io/仓库名/）；
5. 点击访问地址，即可看到 Vue 项目在线页面。

---

三、方式 2：自动部署（通过 Gitee Pages 插件，高效）

如果想实现「提交代码自动打包部署」，可使用 Gitee 官方的 vue-plugin-gitee-pages 插件，无需手动处理 dist 文件夹。

步骤 1：安装插件

npm install vue-plugin-gitee-pages --save-dev

步骤 2：修改 package.json 脚本

在 package.json 的 scripts 中添加部署脚本：

{"scripts": {"serve": "vue-cli-service serve","build": "vue-cli-service build","deploy": "vue-cli-service build --mode production && gh-pages -d dist -r https://gitee.com/你的用户名/vue-gitee-demo.git"}
}

• 替换 https://gitee.com/你的用户名/vue-gitee-demo.git 为 Gitee 仓库地址；
• 该脚本会自动打包，并将 dist 文件夹推送到 Gitee 仓库的 gh-pages 分支（专门用于部署）。

步骤 3：执行自动部署

# 执行部署脚本
npm run deploy

步骤 4：配置 Gitee Pages

回到 Gitee 仓库的 Pages 配置页面：

• 部署分支：选择 gh-pages；
• 部署目录：填写 /（根目录，因为 gh-pages 分支只有 dist 里的文件）；
• 点击「启动部署」，完成后即可访问。

---

四、常见问题解决

问题 1：部署后页面空白，控制台报 404

• 原因：publicPath 配置错误，或部署目录填错；
• 解决方案：
  1. 确认 vue.config.js 中 publicPath 是 /仓库名/（必须带前后斜杠）；
  2. 确认 Gitee Pages 的「部署目录」填的是 dist（手动部署）或 /（自动部署）；
  3. 重新打包并推送 dist 文件夹，再重启部署。

问题 2：路由跳转 404（Vue Router 使用 history 模式）

• 原因：Gitee Pages 不支持 history 模式的路由刷新，默认是 hash 模式；
• 解决方案：
  1. 方案 1（推荐）：路由改回 hash 模式（Vue Router 默认）：

     // router/index.js
     const router = createRouter({history: createWebHashHistory(), // 改为 hash 模式routes: [...]
     })
     

  2. 方案 2（进阶）：在 dist 文件夹新建 404.html，内容和 index.html 一致，适配 history 模式（部分场景仍有问题）。

问题 3：部署提示「未检测到 dist 文件夹」

• 原因：dist 文件夹未提交到仓库，或部署目录填错；
• 解决方案：
  1. 确认已执行 git add dist/ 和 git push；
  2. 确认 Gitee Pages 配置中「部署目录」是 dist（小写，和文件夹名一致）。

问题 4：访问速度慢/样式错乱

• 原因：静态资源路径错误，或 Gitee 缓存；
• 解决方案：
  1. 清理浏览器缓存（Ctrl+F5 强制刷新）；
  2. 确认打包后的 dist/index.html 中资源路径是 /仓库名/xxx.css，而非绝对路径。

---

五、部署成功后的优化

1. 自定义域名：Gitee Pages 支持绑定自己的域名（需备案），在 Pages 配置页面填写域名，再配置 DNS 解析即可；
2. 自动更新：每次本地修改代码后，执行 git add . → git commit → git push，然后在 Gitee Pages 页面点击「更新部署」，即可同步最新代码；
3. 隐私设置：如果项目不想公开，可在 Gitee 仓库设置为「私有」，但 Gitee Pages 仅支持公共仓库部署（私有仓库需升级企业版）。

---

总结

1. 核心配置：部署 Vue 到 Gitee 的关键是修改 vue.config.js 的 publicPath 为 /仓库名/，否则会出现 404；
2. 部署方式：新手用「手动部署」（提交 dist 文件夹+开启 Pages），高效开发用「自动部署插件」；
3. 常见坑：history 路由跳转 404 需改 hash 模式，部署目录填错会导致文件找不到。