vue項目
- 編輯你的 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()]
})
- 安裝部署工具
npm install gh-pages --save-dev
- 修改 package.json 添加腳本
{"scripts": {"dev": "vite","build": "vite build","deploy": "gh-pages -d dist"}
}
- 把打包后的 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
- 設置 GitHub Pages
打開你的 GitHub 倉庫
點右上角的「?? Settings」
左側點擊「Pages」
選擇 gh-pages 分支，目錄為 / (root)
保存設置
稍等幾分鐘，你的網站就可以通過這個地址訪問：
https://your-username.github.io/my-vue-app/
公有倉庫才能免費使用github pages
