Vue3 + Vite 项目使用 GitBash 自动化部署GitHub

Vue3 + Vite 项目使用 GitBash 自动化部署到GitHub，（部署到服务端方式看这个）

本文档详细介绍如何在 Vue3 + Vite 项目中，通过 GitBash 编写 bash 脚本，实现「构建 → 部署」
全流程自动化。涵盖两种主流部署场景：GitHub Pages 静态托管与自有服务器部署，适用于 
Windows 环境（依赖 GitBash）。

一、前置准备

在开始自动化部署前，需完成以下基础配置，避免后续流程报错。

1.项目可正常构建 ：本地执行 npm run build 能成功生成 dist 目录（Vite 默认输出目录），确保无构建语法错误。

2.安装 GitBash：从 Git 官网 下载并安装 Git（含 GitBash），打开 GitBash 终端，执行 git --version 验证安装成功。

3.配置目标环境权限：

• 部署到 GitHub Pages：需拥有目标仓库的推送权限，建议配置 SSH 密钥实现免密登录（避免脚本执行时手动输入密码）。
• 部署到自有服务器：需通过 SSH 连接服务器的权限，同样建议配置 SSH 免密登录。

---

二、场景 1：部署到 GitHub Pages

GitHub Pages 适用于纯前端静态项目，可免费托管并生成公网访问地址（格式：https://<用户名>.github.io/<仓库名>/）

1.1 配置 Vite 基础路径

GitHub Pages 访问路径包含仓库名，需在 Vite 中配置 base 参数，否则会出现资源加载失败问题。

修改项目根目录的 vite.config.js 文件：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()],
  // 替换 <你的仓库名> 为实际 GitHub 仓库名称（如仓库地址是 github.com/abc/my-vue3，则填 /my-vue3/）
  base: '/<你的仓库名>/', 
})

1.2 编写自动化部署脚本

在项目根目录创建 deploy.sh 文件（bash 脚本），用于自动执行构建、提交、推送流程。

脚本内容如下（复制后需替换 <你的用户名> 和 <你的仓库名>）：

#!/bin/bash
set -e  # 脚本执行中若出现错误，立即终止执行

# 步骤 1：清理旧构建产物并重新构建
echo "=== 开始构建 Vue 项目 ==="
rm -rf dist  # 删除本地旧的 dist 目录（避免残留文件）
npm run build  # 执行 Vite 构建命令，生成新 dist 目录

# 步骤 2：进入构建产物目录，初始化 Git 仓库
echo "=== 准备提交构建产物 ==="
cd dist  # 进入 dist 目录
git init  # 初始化临时 Git 仓库（用于提交 dist 内容）
git add -A  # 暂存所有文件
# 提交信息包含当前时间，便于追溯部署版本
git commit -m "deploy: $(date +'%Y-%m-%d %H:%M:%S')"

# 步骤 3：推送 dist 内容到 GitHub 的 gh-pages 分支
echo "=== 推送至 GitHub Pages ==="
# 强制推送当前分支到 GitHub 仓库的 gh-pages 分支（覆盖旧内容）
# 注意：替换 <你的用户名> 和 <你的仓库名> 为实际信息（建议用 SSH 地址，免密登录）
git push -f git@github.com:<你的用户名>/<你的仓库名>.git master:gh-pages

# 步骤 4：返回项目根目录
cd -

# 部署完成提示
echo "=== 部署成功！==="
echo "访问地址：https://<你的用户名>.github.io/<你的仓库名>/"

1.3 执行部署脚本

1. 打开 GitBash 终端，进入项目根目录（例如：cd /e/projects/my-vue3-project）。

2. 给脚本赋予可执行权限（仅首次执行需操作）：

   chmod +x deploy.sh

3. 运行脚本，启动自动化部署：

   ./deploy.sh

1.4 注意事项

• 首次部署后，需在 GitHub 仓库配置 Pages 源：进入仓库 → 点击「Settings」→ 找到「Pages」→ 「Source」选择 gh-pages 分支 → 点击「Save」。

• 若推送失败，检查：① GitHub 仓库地址是否正确；② 本地 SSH 密钥是否已添加到 GitHub 账户（路径：GitHub 个人设置 → 「SSH and GPG keys」→ 「New SSH key」）。

---

此时项目代码已成功部署到 GitHub 上