Recording the process of deploying a project on GitHub and encountering pitfalls.

In order to deploy a comprehensive Vue3+Vite project on GitHub, I encountered some issues during this stage for a few days, so I will write an article to document it.

After two days of struggling on GitHub, I finally gained some understanding and configuration of GitHub workflows, pages, and Vite project packaging.

GitHub workflows (build.yml)#

# Simple workflow to deploy static content to GitHub Pages
name: Deploy static content to Pages

on:
  # Only run when pushing to the default branch.
  push:
    branches: ['main']

  # This option allows you to manually trigger the workflow on the Action tab page.
  workflow_dispatch:

# Set permissions for GITHUB_TOKEN to allow deployment to GitHub Pages.
permissions:
  contents: read
  pages: write
  id-token: write

# Allow concurrent deployment.
concurrency:
  group: 'pages'
  cancel-in-progress: true

jobs:
  # Description of the deployment job.
  deploy:
    environment:
      name: github-pages
      url: ${{ steps.deployment.outputs.page_url }}
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v4
      - name: Set up Node
        uses: actions/setup-node@v3
        with:
          node-version: 18
      - name: Install dependencies
        run: npm install
      - name: Build
        run: npm run build
      - name: Setup Pages
        uses: actions/configure-pages@v3
      - name: Upload artifact
        uses: actions/upload-pages-artifact@v2
        with:
          # Upload dist repository
          path: './dist'

      - name: Deploy to GitHub Pages
        id: deployment
        uses: actions/deploy-pages@v2

Points to note#

Need to configure a key with permissions for the repository to use (if not available, initialize the repository)
Different configurations are required based on different "uses". Specific libraries need to be checked for corresponding workflows (I have tried many workflows, some of which are outdated. It is recommended to check the official website of the corresponding packaging tool for the corresponding workflows)
npm cache issue
!!! When selecting the current workflow, there is no need to manually specify the branch and directory. Otherwise, the target file cannot be found.

Points to note for Vite#

Need to set the base attribute. Official link: https://cn.vitejs.dev/guide/static-deploy.html#github-pages
Image settings
The public directory will not be packaged by Vite, based on the premise of setting the base (by default, /xx.html can be accessed directly) base/xx.html
import.meta.env.BASE_URL directly accesses the base attribute.