【GitHub Pages】部署指南

七灵微2025-05-30 5:04

vue项目

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

js 复制代码

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()]
})

安装部署工具

bash 复制代码

npm install gh-pages --save-dev

修改 package.json 添加脚本

js 复制代码

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

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

bash 复制代码

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