使用GitHub Actions部署Vue.js项目到Azure失败问题求助

你遇到的核心问题是：GitHub Actions的Workflow里没有执行Vue应用的构建命令，导致Azure部署时找不到dist文件夹里的index.html（因为dist根本没生成，或者是空的）。

具体修改方案： #

在actions/checkout步骤之后、Azure/static-web-apps-deploy步骤之前，添加Node环境配置、依赖安装和Vue构建的步骤：

- name: 设置Node.js环境
  uses: actions/setup-node@v4
  with:
    node-version: '20' # 替换为你项目使用的Node.js版本（比如18、16）
- name: 安装项目依赖
  run: npm install
- name: 构建Vue应用
  run: npm run build

额外检查项： #

• 确认Vue项目的构建产物路径：如果是Vue CLI创建的项目，默认产物在dist；如果是Vite创建的，检查vite.config.js里的build.outDir配置，确保和Workflow里的output_location一致。
• 确认app_location路径：如果你的Vue项目不在仓库根目录（比如在frontend子文件夹），需要把app_location改成对应路径，比如"frontend"。

修改后的完整Workflow示例： #

name: Azure Static Web Apps CI/CD

on:
  push:
    branches:
      - test
  pull_request:
    types: [opened, synchronize, reopened, closed]
    branches:
      - test

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: 设置Node.js环境
        uses: actions/setup-node@v4
        with:
          node-version: '20'
      - name: 安装项目依赖
        run: npm install
      - name: 构建Vue应用
        run: npm run build
      - 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_AMBITIOUS_ROCK_03380B103 }}
          repo_token: ${{ secrets.GITHUB_TOKEN }}
          action: "upload"
          app_location: "/"
          api_location: ""
          output_location: "dist"

内容的提问来源于stack exchange，提问作者Hasan Özkaynak