GitHub Pages託管Vue3+Vite專案

青明尘下發表於2024-06-07
GithubVueVite

前面都沒有問題的兄弟，可以直接跳到第七步

一、建立一個Vue3+Vite專案並執行

1. 建立

npm create vue@latest

可以根據自己的需求進行選擇

image-20240607081809068

2. 安裝依賴

npm i

3. 執行

npm run dev
image-20240607082206152

二、修改 vite.config.js 檔案

在此檔案中，defineConfig 中加入 base 引數，具體如下：

export default defineConfig({
  base: '/vue3-vite',
  plugins: [
    vue(),
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
})

此時你會發現，本地執行的專案路徑變成了 http://localhost:5173/vue3-vite/

三、初始化git倉庫並提交

可以使用命令

git init

也可以使用vscode的視覺化操作來初始化git倉庫

說明：使用此方式，建立的預設的分支是main，如果想要使用master作為預設分支需要修改vscode配置【設定 → 使用者 → 擴充套件 → Git → 一直滾，直到找到如下 → 將輸入框中的main改為master即可】

image-20240607093113839

image-20240607082954956

輸入提交資訊( 我這邊使用的是 git-commit-plugin GitHub Pages託管Vue3+Vite專案 )

具體使用可以參考這篇文章 結合企業實踐來規範你的Git commit（含外掛使用指南）-阿里雲開發者社群 (aliyun.com)

🎉 init: 完成建立

然後點選 √ 提交，在彈出的警示框中，點選 是即可完成提交

四、建立倉庫

進入 Github 主頁，點選右上角的 +按鈕

有人會問，你這邊怎麼是中文的？那自然是安裝了瀏覽器外掛GithubCN( GitHub Pages託管Vue3+Vite專案 )了，可以再外掛市場GithubCN - Microsoft Edge Addons自己下載

image-20240607083934180

輸入倉庫名稱(一般跟上面的base儲存一致)和描述資訊(隨意)，然後點選 建立倉庫 按鈕即可

image-20240607084634584

五、繫結遠端倉庫

說明一下，我這邊推送上去的是master分支，你們可能是main分支，這是由於我做過預設分支修改的

如果想要把預設分支更改成master分支可以參考這篇文章的第二點 github將預設main分支改成master - 簡書 (jianshu.com)

可以使用他所提供的命令

git remote add origin https://github.com/qmcx-ming/vue3-vite.git
git branch -M master
git push -u origin master

1. 複製倉庫地址

image-20240607085704928

2. 新增遠端儲存庫

這邊我使用的是視覺化的形式，操作如下：

image-20240607102306534

3. 貼上地址

image-20240607085849147

當然，你也可以 從 GitHub 新增遠端儲存庫

4. 輸入遠端儲存庫的名稱

此處我命名為GitHub，是為了後續新增其他遠端儲存庫便於區分，如：Gitee...

image-20240607093430176

回車即可

如果出現了什麼報錯，不要慌，檢視一下遠端視窗有沒有繫結上就好了

git remote

出現以下，一般是ok的了

GitHub

六、推送

點選 釋出 Branch 按鈕即可完成推送

image-20240607093753016

重新整理一下GitHub頁面，就OK了

七、GitHub Pages

1. 切換構建和部署源為 GitHub Actions

image-20240607094855112

image-20240607094927464

2. 輸入檔案的名稱

image-20240607095010723

image-20240607095126877

3. 貼上配置

部署靜態站點 | Vite 官方中文文件 (vitejs.dev)

# 將靜態內容部署到 GitHub Pages 的簡易工作流程
name: Deploy static content to Pages

on:
  # 僅在推送到預設分支時執行。
  push:
    branches: ['main']

  # 這個選項可以使你手動在 Action tab 頁面觸發工作流
  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@v4
        with:
          node-version: 20
          cache: 'npm'
      - name: Install dependencies
        run: npm ci
      - name: Build
        run: npm run build
      - name: Setup Pages
        uses: actions/configure-pages@v4
      - name: Upload artifact
        uses: actions/upload-pages-artifact@v3
        with:
          # Upload dist folder
          path: './dist'
      - name: Deploy to GitHub Pages
        id: deployment
        uses: actions/deploy-pages@v4

將線上編輯器中的內容清理掉，貼上官方文件的配置

4. 調整格式

此時，需要調整一下格式( 下面的中文“分支”無需在意，這是外掛導致的😆 )

image-20240607095509308

5. 提交

點選右上角的 提交更改(Commit changes)

在彈出的對話方塊中，輸入提交資訊(Commit message)

✨ feat: 增加GitHub Pages配置

點選 提交更改(Commit changes)

建立需要一些時間，一般等圈圈轉完了就好了，或者也可以點進入看看

image-20240607100104338

6. 建立完成

image-20240607100305960

然後回到Pages

image-20240607100536412

點選連結即可訪問😆

不要忘了，遠端倉庫加了配置檔案後，本地也需要做一次拉取的，同步一下

相關文章