如何项目发布到github上

将你的 Vue 3 智能办公中心项目发布到 GitHub 上，主要分为两个阶段：第一阶段是把项目源代码推送到 GitHub 仓库 ，第二阶段是利用 GitHub Pages 将项目部署上线（让你的项目能通过网址直接访问）。

以下是保姆级的操作步骤：

🚀 第一阶段：把代码推送到 GitHub 仓库

创建远程仓库
- 登录 GitHub，点击右上角的 + 号，选择 New repository。
- 填写仓库名称（例如 smart-office），保持仓库为 Public（公开）（GitHub Pages 免费部署需要公开仓库）。
- 不要勾选"Add a README file"，直接点击 Create repository。

本地代码初始化与推送

打开 VS Code 的终端，确保你当前在 smart-office 项目的根目录下，依次执行以下命令：

复制代码

# 1. 初始化本地 Git 仓库
git init

# 2. 检查 .gitignore 文件（非常重要！）
# 确保项目根目录有 .gitignore 文件，并且里面包含了 node_modules 和 dist
# 如果没有，手动创建一个 .gitignore 文件，填入以下内容：
# node_modules
# dist
# .DS_Store

# 3. 将所有代码添加到暂存区
git add .

# 4. 提交代码到本地仓库
git commit -m "feat: 初始化智能办公中心项目"

# 5. 将本地仓库与你的 GitHub 远程仓库关联
# ⚠️ 请将下面的 your-username 替换为你自己的 GitHub 用户名
git remote add origin https://github.com/your-username/smart-office.git

# 6. 修改默认分支名为 main（GitHub 现在的默认分支）
git branch -M main

# 7. 将代码推送到 GitHub
git push -u origin main

(推送时如果弹出浏览器或终端提示，请按指引完成 GitHub 账号的授权登录)

🌐 第二阶段：配置项目并部署到 GitHub Pages

为了让你的 Vue 项目能在 GitHub Pages 上正常运行，我们需要先安装一个部署插件，并修改相关配置。

安装部署插件

在终端中运行以下命令：
复制代码
```
npm install --save-dev gh-pages
```

修改 vite.config.js 配置

打开项目根目录下的 vite.config.js，在 defineConfig 中添加 base 配置。注意： base 的值必须是你 GitHub 仓库的名字，前后都要带上斜杠 /。

复制代码

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

export default defineConfig({
  plugins: [vue()],
  // ⚠️ 将 smart-office 替换为你实际的仓库名
  base: '/smart-office/', 
})

修改 package.json 配置

打开 package.json，在 "scripts" 里面添加一行 "deploy" 命令：

复制代码

"scripts": {
  "dev": "vite",
  "build": "vite build",
  "preview": "vite preview",
  "deploy": "npm run build && gh-pages -d dist" 
}

执行一键部署

在终端中运行你刚刚添加的部署命令：
复制代码
```
npm run deploy
```
运行成功后，终端会提示 Published，这代表打包好的静态文件已经自动上传到了你 GitHub 仓库的一个名为 gh-pages 的新分支上。

⚙️ 第三阶段：开启 GitHub Pages 服务

回到你的 GitHub 仓库页面，点击顶部的 Settings（设置）。
在左侧边栏找到并点击 Pages。
在 Build and deployment 区域：
- Source 选择 Deploy from a branch。
- Branch 选择 gh-pages 分支，文件夹保持 / (root)。
- 点击 Save 保存。

等待大约 1-2 分钟，刷新该页面，你会在顶部看到一行字：
Your site is live at https://your-username.github.io/smart-office/

点击这个链接，你的"智能办公中心"项目就成功发布到互联网上啦！🎉

💡 温馨提示： 每次你修改了本地代码后，只需要重复执行 git add .、git commit、git push 推送源码，然后再运行一次 npm run deploy，线上的网站就会自动更新。