本篇文章以自己創建的項目為例，用Github Actions構建。

Github地址：https://github.com/ling08140814/myCarousel

訪問地址：https://ling08140814.github.io/myCarousel/

具體步驟：

1、創建一個Vue3的項目，并完成代碼開發。

2、在Github創建倉庫，并將代碼推到倉庫。

3、在package.json配置homepage。

"homepage": "https://<Github用戶名>.github.io/<Github倉庫名>"

舉例：

"homepage": "https://ling08140814.github.io/myCarousel"

4、在vite.config.js配置base。

base: "/<Github倉庫名>/"

舉例：

base: "/myCarousel/"

5、在Github Actions 創建 workflow，生成.yml文件，進行構建。

5.1 新建workflow

5.2 選擇workflow

5.3 打開之后，將.yml默認內容進行替換，然后commit

替換內容：

name: GitHub Actions Build and Deploy Demo        # 大標題
on:push:branches:- master                                   # 監聽哪個分支的哪個動作
permissions:contents: write                                # 設置權限，可寫，也可以不用配置，v4版本新增的
jobs:build-and-deploy:                              # 其中一個任務的名稱，IDruns-on: ubuntu-latest                       # 這個任務運行所需的環境steps:- name: Checkout                           # 第一步：獲取源碼uses: actions/checkout@v3                # 使用的工具- name: Install and Build                  # 第二步：下載依賴和構建run: |npm installnpm run build- name: Deploy                           # 第三步：部署uses: JamesIves/github-pages-deploy-action@v4with:folder: dist                         # 部署的目錄branch: deploy                       # 部署到哪個分支

5.4 commit之后，會自動構建，構建成功后展示如下內容

6、配置部署分支，進行訪問。

部署分支和.yml里的部署分支保持一致

7、輸入第3步中homepage的路徑，可以正常訪問啦。