将vite react应用部署到github pages的完整指南
本文将引导您完成将Vite React应用程序部署到GitHub Pages的步骤。请确保您的项目已初始化并准备好部署。
第一步：初始化Git并提交代码
使用以下命令初始化Git仓库，添加所有文件并提交到本地仓库：
1
2
3
git init
git add -a
git commit -m "Initial commit"
然后，创建一个名为main的分支（如果还没有）：
1
git branch -M main
最后，将代码推送到GitHub远程仓库：
1
2
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/。
1
2
3
4
5
6
7
8
// 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的文件。 复制并粘贴以下代码：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
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 Actions工作流程（如果部署失败，请重新运行失败的作业）。 完成后，前往Settings → Pages。 在“Source”下，选择“Deploy from a branch”并将“Branch”设置为gh-pages。 点击“Save”。关键提示: 确保您的项目名称、仓库名称和vite.config.ts中的base路径一致。 任何不一致都可能导致部署失败。
完成以上步骤后，您的Vite React应用应该成功部署到GitHub Pages。
以上就是将 Vite React App 部署到 GitHub Pages 步骤：的详细内容，更多请关注php中文网其它相关文章！