将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和工作流程权限
- 在您的GitHub仓库设置中，前往Settings → Actions → General。
- 向下滚动到Workflow permissions，选择Read and write permissions，然后保存。
第五步：触发部署并配置GitHub Pages
- 手动触发GitHub Actions工作流程（如果部署失败，请重新运行失败的作业）。
- 完成后，前往Settings → Pages。
- 在“Source”下，选择“Deploy from a branch”并将“Branch”设置为
gh-pages。 - 点击“Save”。
关键提示: 确保您的项目名称、仓库名称和vite.config.ts中的base路径一致。 任何不一致都可能导致部署失败。
完成以上步骤后，您的Vite React应用应该成功部署到GitHub Pages。
