Git 推送 Vue 项目到远程仓库完整流程

一、正常推送流程（无冲突 / 全新仓库场景）

适用于远程仓库为空，或本地代码与远程代码完全同步的场景，是最基础的标准流程。

步骤 1：本地环境准备

# 1. 检查 Git 是否安装（输出版本则已安装）
git --version

# 2. 进入你的 Vue 项目根目录（替换为实际路径）
cd G:\6.projects\vue3-element-admin-master

# 3. 初始化 Git 仓库（仅首次推送时执行）
git init

步骤 2：配置 Vue 项目专属 .gitignore（核心！必做）

Vue 项目有大量无需上传的冗余文件（如 node_modules），必须先配置 .gitignore，避免推送无用文件：

1. 在项目根目录新建 .gitignore 文件，粘贴以下内容：

# 依赖包（核心，绝不上传）
node_modules/
npm-debug.log*
yarn-debug.log*
yarn-error.log*

# 构建产物
dist/
build/
dist-ssr/
*.local

# 环境变量文件（包含敏感信息）
.env
.env.local
.env.development.local
.env.test.local
.env.production.local

# IDE 配置文件
.idea/
.vscode/
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?

# 其他冗余文件
.DS_Store
Thumbs.db

1. 保存文件后执行命令：

# 将 .gitignore 纳入暂存（确保生效）
git add .gitignore

步骤 3：本地代码提交

# 1. 将所有 Vue 项目文件加入暂存区
git add .

# 2. 提交本地代码（备注清晰，便于追溯）
git commit -m "初始化 Vue 项目：基于 Vue3 + Element Plus 搭建后台管理系统"

步骤 4：关联远程仓库并推送

# 1. 关联远程仓库（替换为你的远程仓库地址）
git remote add origin ssh://lianyan@192.168.00.000:29418/Auth.git

# 2. 推送代码到远程 master 分支（-u 绑定默认分支，后续可直接 git push）
git push -u origin master

---

二、常见冲突及解决方案

推送过程中最易遇到以下 3 类冲突，按 "报错→原因→解决步骤" 梳理，可直接对照处理：

冲突场景 1：推送提示 (fetch first)

报错信息

! [rejected] master -> master (fetch first)
error: failed to push some refs to '远程仓库地址'
hint: Updates were rejected because the remote contains work that you do not have locally.

原因

远程仓库有本地未同步的提交（如他人推送的代码、远程默认的 README.md 等），Git 防止覆盖拒绝推送。

解决步骤

# 1. 拉取远程最新代码并合并
git pull origin master

# 2. 若拉取后无冲突，直接重新推送
git push -u origin master

# 若拉取后提示"合并冲突"，先处理冲突再推送（见场景 3）

冲突场景 2：拉取提示 refusing to merge unrelated histories

报错信息

fatal: refusing to merge unrelated histories

原因

本地 Vue 仓库与远程仓库无任何共同提交历史（如本地全新初始化、远程已有独立提交），Git 默认禁止合并 "无血缘" 仓库。

解决步骤

# 1. 强制允许合并不相关历史（核心命令）
git pull origin master --allow-unrelated-histories

# 2. 处理冲突（多为 README.md 冲突，见场景 3）
# 3. 提交冲突解决结果后推送
git add .
git commit -m "合并远程不相关历史，解决 README 冲突"
git push -u origin master

冲突场景 3：合并时出现文件冲突（如 README.md、package.json）

报错信息

Auto-merging README.md
CONFLICT (add/add): Merge conflict in README.md
Automatic merge failed; fix conflicts and then commit the result.

原因

本地和远程对同一个文件的同一部分做了不同修改，Git 无法自动合并。

解决步骤

1. 打开冲突文件（如 README.md），会看到以下标记：

<<<<<<< HEAD
# 本地 Vue 项目的内容
=======
# 远程仓库的内容
>>>>>>> 一串哈希值

1. 编辑文件：保留需要的内容（可整合双方有用信息），删除所有冲突标记（<<<<<<<、=======、>>>>>>>），示例：

# Vue3 + Element Plus 后台管理系统（DeviceKeyAuth 版）
## 项目说明
基于 Vue3 开发的 DeviceKeyAuth 前端管理界面
## 远程仓库原说明
（粘贴远程 README 里的有用内容）

1. 提交并推送：

   git add 冲突文件名（如 README.md）
   git commit -m "解决 README.md 合并冲突，整合项目说明"
   git push -u origin master

应急方案：强制推送（谨慎使用）

若确认远程仓库内容无保留价值，只想用本地代码完全覆盖远程，可执行：

# 强制推送（会清空远程所有内容，务必确认！）
git push -f origin master

---

三、核心总结

1. 正常流程核心 ：Vue 项目推送前必须配置 .gitignore → 本地提交 → 关联远程 → 推送，避免冗余文件上传。
2. 冲突解决逻辑 ：先拉取（git pull）再推送，无共同历史加 --allow-unrelated-histories，文件冲突手动编辑后提交。
3. 关键提醒 ：强制推送（-f）会覆盖远程数据，仅在确认远程无重要内容时使用；推送前先 git pull 可大幅减少冲突。