将 Vite React App 部署到 GitHub Pages 步骤：-js教程-PHP中文网

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

心靈之曲

发布： 2025-01-08 22:33:32

原创

425人浏览过

将vite react应用部署到github pages的完整指南

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

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

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

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

<code class="bash">git init
git add -a
git commit -m "Initial commit"</code>

登录后复制

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

<code class="bash">git branch -M main</code>

登录后复制

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

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

登录后复制

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

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

GitHub Copilot

GitHub AI编程工具，实时编程建议

查看详情

<code class="typescript">// vite.config.ts
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

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

登录后复制

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

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

<code class="yaml">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</code>

登录后复制

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