GitHub Pages如何部署Vite项目

1.创建vite项目

• 创建项目

yarn create vite my-repo

• 运行项目

cd my*
yarn
yarn dev

• 修改 vite.config.js文件的base

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

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  base: '/my-repo/' // 为/仓库名/
})

• 提交代码

echo "# my-repo" >> README.md
git init
git add README.md
git commit -m "first commit"
git branch -M main
git remote add origin 远程仓库ssh地址 // 例：git@github.com:EchoVie/my-repo.git
git push -u origin main

2. 生成git的key

也可使用 Travis CI

1. 生成key
2. 复制生成后的token
3. 添加到仓库的key

3.设置 GitHub Actions

1. 设置 .yml
2. 添加 ${name}.yml文件 ${name}.yml文件内容如下:

push:  # 指定触发事件
    branches:
      - master  # 指定触发 action 的分支

jobs:
  main:
    runs-on: ubuntu-latest
    steps:

    # 拉取github仓库代码
    - name: Checkout
      uses: actions/checkout@v2
      with:
        persist-credentials: false

    # 执行依赖安装
    - name: 安装依赖
      run: |
          npm install
        
    # 执行构建步骤
    - name: 构建
      run: |
          npm run build
    # 执行部署
    - name: 部署
      uses: JamesIves/github-pages-deploy-action@releases/v3 # 这个action会根据配置自动推送代码到指定分支
      with:
        ACCESS_TOKEN: ${{ secrets.ACCESS_TOKEN }} # 指定密钥
        BRANCH: gh-pages  ##指定推送到的远程分支
        FOLDER: /dist # 指定构建之后要推送哪个目录的代码

3. 提交修改

4.设置 GitHub Pages

5.查看部署进程

6. 查看页面

部署的地址为： https://github.com/${username}/${reponame}

例如：https://github.com/EchoVie/my-repo