第一部分：常用 Git 提交代码指令详解
Git 是目前最主流的分布式版本控制系统，以下是前端开发中常用的 Git 指令及其作用说明：
1. git init
初始化一个新的 Git 仓库（通常在项目根目录首次使用）。
git init注意：一般从远程克隆项目时不需要手动执行此命令。
2. git clone <url>
克隆远程仓库到本地。
git clone https://github.com/yourname/your-project.git3. git status
查看当前工作区状态（哪些文件被修改、新增、未跟踪等）。
git status4. git add <file> 或 git add .
将文件添加到暂存区（staging area）。
-
添加单个文件：
git add src/App.vue -
添加所有变更：
git add .
5. git commit -m "提交信息"
将暂存区的内容提交到本地仓库，并附带提交说明。
git commit -m "feat: 新增用户登录页面"提交信息建议遵循 Conventional Commits 规范，如
feat:、fix:、docs:、style:、refactor:等。
6. git push
将本地提交推送到远程仓库。
git push origin main
origin是远程仓库的默认名称，main是分支名（也可能是master）。
7. git pull
从远程拉取最新代码并合并到当前分支（相当于 fetch + merge）。
git pull origin main建议在推送前先执行
pull，避免冲突。
8. 其他实用命令
| 命令 | 说明 |
|---|---|
git log |
查看提交历史 |
git branch |
查看本地分支 |
git checkout <branch> |
切换分支 |
git switch <branch> |
（Git 2.23+）更安全的分支切换方式 |
git merge <branch> |
合并指定分支到当前分支 |
git stash |
临时保存工作区改动（不提交） |
git reset --hard HEAD~1 |
回退到上一个提交（慎用！会丢失更改） |
第二部分：前端项目部署到 Linux 服务器完整流程
📝 前端项目部署实战：从本地构建到 Linux 服务器上线（含 SSH + SCP + 解压）
一、准备工作
-
本地环境：
- 已完成
npm run build，生成dist文件夹。 - 安装了 Git、Node.js、以及支持 SCP 的终端（如 Windows 的 PowerShell、Git Bash 或 WSL）。
- 已完成
-
服务器环境：
- IP：
11.111.111.11 - 用户：
root - 密码：
123123 - Web 目录：
/web/ - 已安装 Nginx 并配置好站点
- IP：
二、部署步骤详解
Step 1：清理旧版本（可选但推荐）
首先通过 SSH 登录服务器：
ssh root@11.111.111.11
# 输入密码：123123进入 Web 目录，备份或删除旧的 dist：
cd /web/
ls -l # 查看当前文件
rm -rf dist1 # 删除无用旧目录（根据实际情况）
mv dist dist20240126 # 将当前线上版本重命名备份（建议加上日期）✅ 为什么重命名而不是直接删？
便于回滚。如果新版本出问题，可快速
mv dist20240126 dist恢复。
退出 SSH：
exit⚠️ 注意：不能在一个终端里既保持 SSH 会话又执行 SCP 。实际操作中，我们先退出 SSH，再用本地终端执行
scp。
Step 2：上传新构建包
在本地（Windows）执行：
scp C:\zhongzi\a-project-code\qzj-front\dist.zip root@11.111.111.11:/web💡 如果使用 Git Bash，路径需改为 Unix 风格：
scp /c/zhongzi/a-project-code/qzj-front/dist.zip root@11.111.111.11:/web
输入密码后，文件将上传至服务器的 /web/dist.zip。
Step 3：解压并生效
重新 SSH 登录服务器：
ssh root@11.111.111.11
cd /web
unzip dist.zip # 解压后生成 dist 目录此时新代码已就位。若 Nginx 配置的 root 路径为 /web/dist，则刷新浏览器即可看到新版本。
🔁 可选：重启 Nginx（通常静态资源无需重启）
nginx -s reload
三、自动化建议（进阶）
为提升效率，可考虑：
- 编写部署脚本 （如
deploy.sh）自动完成上传、解压、备份。 - 使用 CI/CD（如 GitHub Actions + rsync）实现一键部署。
- 使用
rsync替代scp，只同步差异文件，更快更省流量。
四、常见问题
- 权限问题 ：确保
nginx用户有读取/web/dist的权限。 - 缓存问题 ：浏览器可能缓存旧 JS/CSS，建议在构建时启用 hash 文件名（如
app.a1b2c3.js）。 - SCP 失败 ：检查防火墙是否开放 22 端口，或改用
sftp。
五、总结
通过 SSH + SCP + unzip 三步，我们完成了前端项目的快速部署。虽然简单，但在小型项目或测试环境中非常高效。掌握这些基础命令，是每个前端工程师走向 DevOps 的第一步！
🌟 小贴士：生产环境建议使用 Docker + Nginx 容器化部署，更稳定可控。