GitHub Pages无法正确查看我的项目

Github页面

GitHub Pages可以显示静态网页。因此,您需要代码的生产版本,您可以构建并上传到 dist 存储库的文件夹。

解决方案:自动构建生产和部署

需要为此存储库配置Github Action。

步骤#1

需要在Vite上定义你的基础。

// vite.config.js

export default defineConfig({
  build: {
    base: process.env.NODE_ENV === 'production' ? '/reponame/' : '/',
    // Other build configuration options...
  },
})

或者可以使用相对默认路径——我更喜欢Github页面-

// vite.config.js

export default defineConfig({
  build: {
    base: './',
    // Other build configuration options...
  },
})

步骤#2

生成一个新文件 /.github/workflows 作为 deploy.yml .

• 使用 actions/checkout for可以运行操作
• 使用 actions/setup-node for可以使用node.js和npm
• 使用 peaceiris/actions-gh-pages for可以更新Github页面

添加配置:

name: Deploy to GitHub Pages

on:
  push:
    branches:
      - main

jobs:
  build-and-deploy:
    runs-on: ubuntu-latest

    steps:
      - name: Checkout repository
        uses: actions/checkout@v3

      - name: Setup Node.js
        uses: actions/setup-node@v3
        with:
          node-version: 18

      - name: Install dependencies
        run: npm ci

      - name: Build
        run: npm run build

      - name: Deploy to GitHub Pages
        uses: peaceiris/actions-gh-pages@v3
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}
          publish_dir: ./dist

步骤#3

承诺并推动你的新 deploy.yml .

步骤#4

在浏览器中访问您的GitHub存储库,然后单击“操作”选项卡。在这里,您应该看到推送后开始的标记为“部署到GitHub页面”的工作流。等待工作流成功完成。

它生成您的生产版本并将其部署到Github Pages。

步骤#5

打开你的Github Pages静态应用程序:

https://<github-username>.github.io/<repository-name>/

摘要

现在,如果你对源代码(dev)进行更改并推送它们,GitHub Actions将在短时间内编译你的生产代码并更新你的GitHub Pages网站。