vue3項目部署到Github

此教程適應於以webpack，vue-cli，vite等腳手架構建的vue項目。當然，vue2和vue3都是可以滴。

1. 前提：你的代碼庫已經提交到Github上

如果沒有的話，請到GitHub上新建倉庫，並把你本地的項目提交到GitHub上新建的倉庫里。
具體方法，可以參考我的博客 Git使用記錄 - 持續更新 - 將本地項目關聯到遠程倉庫

2. 在GitHub上設置部署配置

3. 到你的項目根目錄創建工作流文件

根目錄下新建 .github 文件夾，然後在其目錄下新建 workflows 文件夾，在裡面新建 main.yml 。

main.yml 里的內容如下：

# 將靜態內容部署到 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@v3
      - name: Set up Node
        uses: actions/setup-node@v3
        with:
          node-version: 20
          cache: 'npm'
      - 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@v1
        with:
          # Upload dist repository
          path: './dist'
      - name: Deploy to GitHub Pages
        id: deployment
        uses: actions/deploy-pages@v1

其中我們需要修改的內容：

1. node版本，根據你的項目實際使用版本設置
2. 打包目錄，一般都是 dist，如果不是的話請修改
3. 項目腳本，此項目是使用npm構建，如果你使用的是pnpm，或者ymal等，需要手動修改。下麵給出pnpm的設置：

steps:
  - name: Checkout
	uses: actions/checkout@v4
  - name: Set up pnpm
	uses: pnpm/action-setup@v4
	with:
	  version: 9
  - name: Set up Node
	uses: actions/setup-node@v3
	with:
	  node-version: 20
	  cache: 'pnpm'
  - name: Install dependencies
	run: pnpm install
  - name: Build
	run: pnpm run build

pnpm的版本也根據你的實際使用而定，後面的內容都一樣。其他的請自行查找。

4. 修改你的項目部署根目錄

正常情況下一般都在 vite.config.ts 或 vue.config.js 或 webpack.config.js 里，取決於你使用了哪種腳手架。
以 vite.config.ts 為例，存在 base 欄位中。參考代碼 vite-vue3-charts

如果你有封裝的話，如上圖，可能是一個變數，一般都在根目錄的 .env.production 文件中，修改此變數的值即可。如下圖：

5. 提交代碼，你的項目即可自動部署

或者到GitHub網站倉庫目錄，在 Actions 頁簽中，手動部署

6. 訪問路徑

訪問路徑：[github賬號名稱].github.io/[倉庫名稱]
例如：https://weizwz.github.io/vite-vue3-charts

實例項目代碼參考 weiz-vue3-charts

文章作者：唯之為之

文章出處：https://www.cnblogs.com/weizwz/p/18411342

版權聲明：本博客所有文章除特別聲明外，均採用 「CC BY-NC-SA 4.0 DEED」 國際許可協議，轉載請註明出處！

內容粗淺，如有錯誤，歡迎大佬批評指正