将 Vite React App 部署到 GitHub Pages 步骤：

本篇文章主要是结合我之前面试的各种经历和实战开发中遇到的问题解决经验整理的，希望这篇《将 Vite React App 部署到 GitHub Pages 步骤：》对你有很大帮助！欢迎收藏，分享给更多的需要的朋友学习~

将Vite React应用部署到GitHub Pages的完整指南

本文将引导您完成将Vite React应用程序部署到GitHub Pages的步骤。请确保您的项目已初始化并准备好部署。

第一步：初始化Git并提交代码

使用以下命令初始化Git仓库，添加所有文件并提交到本地仓库：

git init
git add -a
git commit -m "Initial commit"

然后，创建一个名为main的分支（如果还没有）：

git branch -M main

最后，将代码推送到GitHub远程仓库：

git remote add origin https://github.com/[username]/[repo_name].git  # 替换为您的用户名和仓库URL
git push -u origin main

第二步：配置Vite项目基本路径

在vite.config.ts文件中，设置base属性为您的GitHub Pages仓库名称。 这通常与您的仓库名称相同。 例如，如果您的仓库名为my-vite-app，则base应设置为/my-vite-app/。

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

export default defineConfig({
  plugins: [react()],
  base: '/[your-repo-name]/', // 替换为您的仓库名称
});

第三步：创建GitHub Actions工作流程

在.github/workflows目录下创建一个名为deploy.yml的文件。 复制并粘贴以下代码：

name: Deploy

on:
  push:
    branches:
      - main

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
      - uses: bahmutov/npm-install@v1
      - run: npm run build
      - uses: actions/upload-artifact@v3
        with:
          name: production-files
          path: ./dist

  deploy:
    needs: build
    runs-on: ubuntu-latest
    if: github.ref == 'refs/heads/main'
    steps:
      - uses: actions/download-artifact@v3
        with:
          name: production-files
          path: ./dist
      - uses: peaceiris/actions-gh-pages@v3
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}
          publish_dir: ./dist

第四步：配置GitHub Pages和工作流程权限

1. 在您的GitHub仓库设置中，前往Settings → Actions → General。
2. 向下滚动到Workflow permissions，选择Read and write permissions，然后保存。

第五步：触发部署并配置GitHub Pages

1. 手动触发GitHub Actions工作流程（如果部署失败，请重新运行失败的作业）。
2. 完成后，前往Settings → Pages。
3. 在“Source”下，选择“Deploy from a branch”并将“Branch”设置为gh-pages。
4. 点击“Save”。

关键提示: 确保您的项目名称、仓库名称和vite.config.ts中的base路径一致。 任何不一致都可能导致部署失败。

完成以上步骤后，您的Vite React应用应该成功部署到GitHub Pages。

今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~