vite github pages deployer
v1.4.0
將您的 Vite 應用程式部署到 Github Pages，一目了然。
vite作為build工具，就可以與任何前端框架一起使用。 Vue、React、Svelte...應有盡有！ - name: Vite Github Pages Deployer
uses: skywarth/[email protected]
您只需將其適當地添加到操作的yaml檔案中即可使用此操作。
請務必將此步驟放在「結帳」步驟之後。
- name : Vite Github Pages Deployer
uses : skywarth/[email protected]
id : deploy_to_pages您必須將環境部分放在steps之前。這可以在環境選項卡下釋放環境。
environment :
name : demo
url : ${{ steps.deploy_to_pages.outputs.github_pages_url }}您需要為該操作設定適當的權限，以便成功發布環境和工件。如果不這樣做，您可能會收到權限錯誤。
權限聲明可以放在jobs:部分之前的任何位置。
# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
permissions :
contents : read
pages : write
id-token : write如果您不知道要做什麼、執行什麼操作或將程式碼片段放置在使用部分的何處，請按照以下步驟操作：
./.github/workflows/vite-github-pages-deploy.yml 。因此，本質上是在專案根目錄中建立一個.github資料夾，並在其中建立一個yml檔案。master分支時，或者您下次從「操作」標籤手動運行時，此操作將運行，並且您的專案將部署到 github 頁面。 name : Vite Github Pages Deploy
on :
# Runs on pushes targeting the default branch
push :
branches : ["master", "main"]
# Allows you to run this workflow manually from the Actions tab
workflow_dispatch :
# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
permissions :
contents : read
pages : write
id-token : write
concurrency :
group : " pages "
cancel-in-progress : false
jobs :
# Build job
build :
runs-on : ubuntu-latest
environment :
name : demo
url : ${{ steps.deploy_to_pages.outputs.github_pages_url }}
steps :
- name : Checkout
uses : actions/checkout@v3
- name : Vite Github Pages Deployer
uses : skywarth/vite-github-pages-deployer@master
id : deploy_to_pages
想看看它的實際效果嗎？當然可以，前往這個 vue 專案現場觀看：https://github.com/skywarth/country-routing-algorithm-demo-vue
public_base_path （可選）| 類型 | 預設 | 範例值 |
|---|---|---|
string | /{your-repo-name}或/如果您有 CNAME | /my-vite-project |
Vite 的公共基本路徑字串，這會影響路由、歷史記錄和資產連結。請確保提供適當的訊息，因為 GitHub Pages 將您的應用程式儲存在子網域下的目錄中。如果您打算部署到 Vercel 等替代平台，則只需提供/即可。
正常情況下，您不需要提供/覆寫此參數，操作會將其適當地設定為您的儲存庫名稱。
public_base_path的解析方式如下：public_base_path參數/輸入，則無論如何都會使用它。public_base_path參數/輸入：CNAME文件，則public_base_path預設值將解析為/CNAME ，則public_base_path預設值將解析為/{your-repo-name} 請參閱此處的 CNAME 擴充建議
感謝 Greg Sadetsky 關於此輸入的交替預設值的提議。另外，感謝他在解釋 GitHub 頁面自訂網域設定和這些變更的測試階段方面的合作。
build_path （可選）| 類型 | 預設 | 範例值 |
|---|---|---|
string | ./dist | - ./deploy- ./dist/browser |
在建置過程之後，您希望 GitHub 頁面使用哪個資料夾作為根目錄。簡而言之，它是您的建置輸出目錄，例如./dist 。如果您的vite配置匯出到./dist以外的資料夾，那麼您應該將其作為參數傳遞。
install_phase_node_env （可選）| 類型 | 預設 | 範例值 |
|---|---|---|
string | dev | - dev- production- staging- test- my-little-pony-env |
將用於安裝依賴項的節點環境。您必須使用具有“vite”作為依賴項的環境。通常且自然地，該 env 是dev 。
如果您不提供具有vite作為依賴項的 NODE_ENV（檢查您的 package.json），您將在建置階段收到sh: 1: vite: not found 。
build_phase_node_env （可選）| 類型 | 預設 | 範例值 |
|---|---|---|
string | production | - dev- production- staging- test- my-little-pony-env |
將用於建置階段的節點環境。您可以為此提供任何有效的 NODE_ENV 值，因為節點建置往往會根據不同的環境而變化（例如：您在生產中隱藏偵錯功能）。
artifact_name （可選）| 類型 | 預設 | 範例值 |
|---|---|---|
string | github-pages | - what-a-cool-artifact- ah-yes-ze-artifact |
暴露工件的所需名稱。此名稱在作業中可見，並用作工件名稱。
package_manager （可選）| 類型 | 預設 | 範例值 |
|---|---|---|
string | npm | - npm- yarn |
指示首選的套件管理器。它將用於安裝依賴項和建置dist 。例如，如果您更喜歡/使用yarn作為專案的套件管理器，那麼您可以傳遞package_manager: 'yarn'作為輸入，然後將其用作yarn install和yarn build 。
debug_mode （可選）| 類型 | 預設 | 範例值 |
|---|---|---|
string | 'false' | - 'true'- 'false' |
控制調試模式，字串， 'true'表示開啟。開啟後，它會輸出某些步驟的某些資訊。主要用於開發，但可以隨意使用它來檢查環境和變數。
github_pages_url| 類型 | 範例值 |
|---|---|
string | - 'https://skywarth.github.io/country-routing-algorithm-demo-vue/' |
此輸出值將用於取得部署後的 github 頁面 url。可以這樣存取它： ${{ steps.deploy_to_pages.outputs.github_pages_url }} （deploy_to_pages是您執行Vite Github Pages Deployer的步驟的ID）。
預計它將被用作在工作期間發布環境的一種方式，如下所示：
environment:
name: demo
url: ${{ steps.deploy_to_pages.outputs.github_pages_url }}
請參閱範例工作流程以了解如何利用此輸出
錯誤： Environment URL '' is not a valid http(s) URL, so it will not be shown as a link in the workflow graph.
原因：操作中缺少環境聲明，您應該將其新增至操作yaml檔案中，以便解決錯誤/警告並在儲存庫的environments標籤中顯示已發佈的環境。
解決方案：將以下內容新增至您的操作：
environment :
# Name could be whatever you wish. It'll be visible publicly under the environments tab.
name : demo
url : ${{ steps.deploy_to_pages.outputs.github_pages_url }}deploy_to_pages名稱應該與您執行Vite GitHub pages deployer程式的步驟的id相同。有關詳細信息，請參閱範例工作流程。
GITHUB_TOKEN的權限要求錯誤： Error: Ensure GITHUB_TOKEN has permission "id-token: write".
原因：未依照使用部分中的指示設定權限。如果未向該操作授予適當的權限，它將無法建立工件或建立環境。
解決方案：將以下有關權限的程式碼新增至您的操作yaml檔案。
# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
permissions:
contents: read
pages: write
id-token: write
如果您不確定將其放置在哪裡，請參閱範例工作流程。
npm作為套件管理器首選項時， package-lock.json不存在。錯誤： npm ci The command can only install with an existing package-lock.json...
原因：如果package_manager輸入首選項設定為npm （或默認，未分配），它將使用npm ci利用package-lock.json 。在這種情況下，請確保package-lock.json存在於您的專案根目錄中。
解決方案：將package-lock.json檔案加入專案。如果它在目錄中但沒有出現在儲存庫中，請檢查您的 gitignore 檔案並將其從 gitignore 中刪除。或者，您可以透過操作的package_manager參數輸入將yarn設定為首選套件管理器以進行依賴項安裝。
bash-files ） bash-files ）您是否需要某些東西，此操作是否無法滿足您的期望，或者它缺乏某些阻止您使用它的未來？打開一個問題，我們將其添加到路線圖/TODO 中。歡迎貢獻。
${{github.action_path}} ：為您提供此操作本身的目錄。
${{ github.workspace }} ：提供您專案的目錄（例如：/home/runner/work/country-routing-algorithm-demo-vue/country-routing-algorithm-demo-vue）
當您在 bash shell 中匯入 sh 檔案時，只能在該步驟中存取該檔案。這是因為每個步驟都是獨立的 shell。
在單獨的sh檔案中，您可以透過各自的大寫名稱存取操作的輸入變數。例如：
inputs:
package_manager:
description: "Your preference of package manager: 'npm' and 'yarn' are possible values."
required: false
default: 'npm'
${{ inputs.package_manager }}sh檔案中存取此輸入 **： $PACKAGE_MANAGER env:
SOME_OTHER_NAME: ${{ inputs.package_manager }}
如果您分步驟執行sh文件，請不要期望每個 shell 共用環境。例如，在一個步驟中，您在 install.sh 中安裝依賴項，在另一個步驟中，您透過 build.sh 建置。它不起作用，因為安裝的庫僅可用於 install.sh 步驟。這就是bash-files失敗的原因，我查閱了 GPT 但顯然沒有辦法實現它。
