將 Vite React App 部署到 GitHub Pages 步驟：

初始化 Git，提交所有檔案並將它們推送到您的新儲存庫：

第一步：

git init
git add -A

第二步：

git commit -m 「第一次提交」
git 分支 -M main
git Remote add origin https://github.com/[username]/[repo_name].git # 替換為您的使用者名稱和倉庫 URL
git push -u origin main

第三步：

在 vite.config.ts 中設定基本路徑

/ vite.config.ts
import { defineConfig } from “vite”;
import react from “@vitejs/plugin-react”;

// https://vitejs.dev/config/
export default defineConfig({
plugins: [react()],
base: “/vite-react-deploy/”, // YOUR REPO NAME HERE
});

第四步：

新增 GitHub 工作流程

在.github/workflows目錄中建立一個deploy.yml檔。複製並貼上此工作流程：

name: Deploy

on:
  push:
    branches:
      - main

jobs:
  build:
    name: Build
    runs-on: ubuntu-latest

    steps:
      - name: Checkout repo
        uses: actions/checkout@v3

      - name: Setup Node
        uses: actions/setup-node@v3

      - name: Install dependencies
        uses: bahmutov/npm-install@v1

      - name: Build project
        run: npm run build

      - name: Upload production-ready build files
        uses: actions/upload-artifact@v3
        with:
          name: production-files
          path: ./dist

  deploy:
    name: Deploy
    needs: build
    runs-on: ubuntu-latest
    if: github.ref == 'refs/heads/main'

    steps:
      - name: Download artifact
        uses: actions/download-artifact@v3
        with:
          name: production-files
          path: ./dist

      - name: Deploy to GitHub Pages
        uses: peaceiris/actions-gh-pages@v3
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}
          publish_dir: ./dist

在您的儲存庫頁面上：

• 1.前往設定 → 操作 → 常規，
• 2.向下捲動到工作流程權限，
• 3.選擇讀取和寫入，然後儲存：

重新運行操作：

操作 → 選擇失敗的部署 → 重新執行失敗的作業。等待完成。

設定 GitHub 頁面：

• 前往設定 → 頁面
• 在「來源」下，選擇「從分支部署」並選擇「gh-pages」分支。
• 點選儲存。

最重要的事。

專案名稱、連結名稱（基底值）或 Repo 名稱大多數同名建立。

以上是將 Vite React App 部署到 GitHub Pages 步驟：的詳細內容。更多資訊請關注PHP中文網其他相關文章！