将 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中文网其他相关文章！