【GitHub Pages】部署指南

vue项目

1. 编辑你的 vite.config.ts 文件，加上 base 路径，设置为你的 GitHub 仓库名

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'// 假设你的仓库是 https://github.com/your-username/my-vue-app
export default defineConfig({base: '/my-vue-app/', // ← 这里改成你的仓库名plugins: [vue()]
})

2. 安装部署工具

npm install gh-pages --save-dev

3. 修改 package.json 添加脚本

{"scripts": {"dev": "vite","build": "vite build","deploy": "gh-pages -d dist"}
}

4. 把打包后的 dist/ 目录部署到你 GitHub 仓库的 gh-pages 分支。
   源码上传： 上传到主分支（如 main 或 master）
   构建产物上传： dist/ 目录上传到 gh-pages 分支

npm run build
npm run deploy# 1. 构建项目
yarn build   # 产物在 dist/# 2. 安装 gh-pages 工具（仅第一次）
yarn add -D gh-pages# 3. 发布 dist 到 gh-pages 分支
npx gh-pages -d dist#启动一个本地静态服务器，预览 dist 目录中的构建结果
npx serve dist --port 5173 --single 
## single 适用于SPA 所有404重定向到index.html

5. 设置 GitHub Pages
   打开你的 GitHub 仓库
   点右上角的「⚙️ Settings」
   左侧点击「Pages」
   选择 gh-pages 分支，目录为 / (root)
   保存设置
   稍等几分钟，你的网站就可以通过这个地址访问：
   https://your-username.github.io/my-vue-app/

公有仓库才能免费使用github pages