将vite react应用部署到github pages的完整指南
本文将引导您完成将Vite React应用程序部署到GitHub Pages的步骤。请确保您的项目已初始化并准备好部署。
第一步：初始化Git并提交代码
使用以下命令初始化Git仓库，添加所有文件并提交到本地仓库：
git initgit add -agit commit -m "Initial commit"
登录后复制
然后，创建一个名为main的分支（如果还没有）：
git branch -M main
登录后复制
最后，将代码推送到GitHub远程仓库：
git remote add origin https://github.com/[username]/[repo_name].git # 替换为您的用户名和仓库URLgit push -u origin main
登录后复制
第二步：配置Vite项目基本路径
在vite.config.ts文件中，设置base属性为您的GitHub Pages仓库名称。 这通常与您的仓库名称相同。 例如，如果您的仓库名为my-vite-app，则base应设置为/my-vite-app/。
// vite.config.tsimport { 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: Deployon: push: branches: - mainjobs: 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。
以上就是将 Vite React App 部署到 GitHub Pages 步骤：的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2643165.html
