プロジェクトのGitHubデプロイのトラブルシューティングの経過を記録する

本着 github 部署する vue3+vite の総合サイトプロジェクトを作成しましたが、この段階で数日間詰まりましたので、記事を書いて記録します〜
github で 2 日間もがき苦しんだ後、ようやく github のワークフロー、ページ、vite プロジェクトのパッケージングについての理解と設定ができました。

github ワークフロー (build.yml)#

# GitHub Pagesに静的コンテンツをデプロイするための簡単なワークフロー
name: Deploy static content to Pages

on:
  # デフォルトブランチにプッシュされた場合のみ実行
  push:
    branches: ['main']

  # このオプションを使用すると、Actionタブページでワークフローを手動でトリガーできます
  workflow_dispatch:

# GITHUB_TOKENの権限を設定して、GitHub Pagesへのデプロイを許可します。
permissions:
  contents: read
  pages: write
  id-token: write

# 並行してデプロイを許可します
concurrency:
  group: 'pages'
  cancel-in-progress: true

jobs:
  # デプロイのジョブの説明
  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

注意点#

リポジトリに使用する権限のあるキーを設定する必要があります（ない場合はリポジトリを初期化する必要があります）
異なる uses に基づいて、異なる設定が必要です。対応するライブラリに詳細を確認する必要があります（多くのワークフローを試しましたが、一部のワークフローは古すぎるため、対応するパッケージングツールの公式ウェブサイトで対応するワークフローを見つけることをお勧めします）
npm のキャッシュの問題
！！！現在のワークフローを選択する場合、ブランチやディレクトリを手動で指定する必要はありません！！！そうしないと、対象のファイルが見つからなくなります

vite 注意点#

base 属性を設定する必要があります。公式リンク：https://cn.vitejs.dev/guide/static-deploy.html#github-pages
画像の設定
public ディレクトリは vite によってパッケージングされません。base が設定されている前提で（デフォルトでは /xx.html に直接アクセスできます）base/xx.html
import.meta.env.BASE_URL で base 属性に直接アクセスできます