使用 GitHub Actions 将 Vue.js 项目部署到 Azure 时遇到哪些问题？如何解决？

vue.js

2024-03-17 15:45:30

使用 GitHub Actions 将 Vue.js 项目部署到 Azure 时遇到的问题及其解决方案

问题

在使用 GitHub Actions 将 Vue.js 应用程序部署到 Azure 时，可能会遇到以下错误：

无法在应用程序构建产物文件夹 (dist) 中找到默认文件。有效默认文件：index.html、Index.html。

原因

此错误通常是由以下原因引起的：

未在构建过程中生成默认文件（index.html 或 Index.html）。
GitHub Actions 工作流中的路径配置不正确。

解决方法

要解决此问题，请按照以下步骤操作：

确保生成默认文件

确保你的构建过程会生成默认文件（index.html 或 Index.html）。
检查你的构建工具（如 Vue CLI 或 Vite）的配置，以确保它已正确配置为生成默认文件。

检查 GitHub Actions 工作流配置

导航到 GitHub 存储库中的“操作”选项卡。
选择“Azure 静态 Web 应用程序 CI/CD”工作流。
检查“构建并部署”作业中的以下配置：

app_location: "/" # App source code path
output_location: "dist" # Built app content directory - optional

确保 app_location 路径指向应用程序源代码的根目录。
确保 output_location 路径指向已构建应用程序内容的目录，其中应包含默认文件。

其他提示

确保你的 GitHub Actions 令牌具有访问 Azure 静态 Web 应用程序所需的权限。
确保你的 Azure 静态 Web 应用程序已正确配置，并具有有效的 API 令牌。
如果你仍然遇到问题，请尝试重新创建 GitHub Actions 工作流。

示例

以下是使用 Vue CLI 构建并部署 Vue.js 应用程序到 Azure 静态 Web 应用程序的示例 GitHub Actions 工作流配置：

name: Azure Static Web Apps CI/CD

on:
  push:
    branches:
      - main
  pull_request:
    branches:
      - main

jobs:
  build_and_deploy_job:
    if: github.event_name == 'push' || (github.event_name == 'pull_request' && github.event.action != 'closed')
    runs-on: ubuntu-latest
    name: Build and Deploy Job
    steps:
      - uses: actions/checkout@v3
        with:
          submodules: true
          lfs: false
      - name: Build And Deploy
        id: builddeploy
        uses: Azure/static-web-apps-deploy@v1
        with:
          azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN }}
          repo_token: ${{ secrets.GITHUB_TOKEN }} # Used for Github integrations (i.e. PR comments)
          action: "upload"
          ###### Repository/Build Configurations - These values can be configured to match your app requirements. ######
          # For more information regarding Static Web App workflow configurations, please visit: https://aka.ms/swaworkflowconfig
          app_location: "/" # App source code path
          api_location: "" # Api source code path - optional
          output_location: "dist" # Built app content directory - optional
          ###### End of Repository/Build Configurations ######