Azure Static Web Apps部署NuxtJS 3时无法找到_nuxt文件夹

问题描述 #

在Azure DevOps中配置构建流水线，构建工件生成正常，下载后用swa发布也能正常运行，但通过发布流水线的「Deploy Azure Static Web App (Preview)」任务部署时，浏览器开发者工具出现大量访问_nuxt文件夹的404错误。直接从构建流水线部署正常，但不符合需求。已尝试添加空的.nojekyll文件，无效果。

现有配置 #

发布流水线YAML步骤（已解压到zip目录） #

steps:
- task: AzureStaticWebApp@0
  displayName: 'Publishing Website'
  inputs:
    workingDirectory: zip
    app_location: .app/.output/public
    output_location: .app/.output/public
    api_location: .app/.output/server
    config_file_location: .app
    skip_app_build: true
    is_static_export: false
    verbose: true
    azure_static_web_apps_api_token: 'mytoken'
    deployment_environment: Dev
    production_branch: development

.app/swa-cli.config.json配置 #

{
  "$schema": "https://aka.ms/azure/static-web-apps-cli/schema",
  "configurations": {
    ".app": {
      "appLocation": ".output/public",
      "apiLocation": ".output/server",
      "outputLocation": ".output/public",
      "apiLanguage": "node",
      "apiVersion": "18",
      "appName": "test123",
      "resourceGroup": "dev-resources"
    }
  }
}

构建流水线定义 #

trigger:
  - development

pool:
  vmImage: ubuntu-latest

variables:
  - group: dev-variable-group
  - name: buildVersion
    value: $(Date:yyyyMMdd).$(Rev:r)
  - name: artifactName
    value: 'ui-artifact'

stages:
- stage: Build
  jobs:
  - job: BuildJob
    steps:
    - script: echo "##vso[task.setvariable variable=buildVersion;]$(Build.BuildNumber)"
      displayName: 'Set Build Version Variable'

    - task: NodeTool@0
      inputs:
        versionSpec: '18.x'
      displayName: 'Install Node.js'

    - script: npm install -g pnpm
      displayName: 'Install pnpm'

    - script: |
        pnpm i
        pnpm build
      displayName: 'npm install and build'

    # Package the app into a zip file
    - script: zip -r $(buildVersion).zip .app
      displayName: 'Package app into ZIP'

    # Publish the zip as an artifact of the build
    - task: PublishBuildArtifacts@1
      inputs:
        pathtoPublish: '$(buildVersion).zip'
        artifactName: $(artifactName)

问题排查与解决步骤 #

1. 验证发布路径的正确性 #

发布任务的workingDirectory为zip，需确保解压后zip目录下直接包含.app文件夹。添加目录检查步骤确认结构：

- script: ls -la zip/.app/.output/public
  displayName: 'Verify App Public Directory'

2. 修正发布任务的output_location配置 #

Nuxt3部署时，output_location无需重复设置为app_location的值，静态Web App任务会自动从app_location读取静态资源。删除或注释该配置项：

steps:
- task: AzureStaticWebApp@0
  displayName: 'Publishing Website'
  inputs:
    workingDirectory: zip
    app_location: .app/.output/public
    # output_location: .app/.output/public  # 删除或注释此行
    api_location: .app/.output/server
    config_file_location: .app
    skip_app_build: true
    is_static_export: false
    verbose: true
    azure_static_web_apps_api_token: 'mytoken'
    deployment_environment: Dev
    production_branch: development

3. 确保构建打包完整 #

手动zip命令可能遗漏文件，改用Azure DevOps的ArchiveFiles@2任务打包，保证所有文件被包含：

- task: ArchiveFiles@2
  inputs:
    rootFolderOrFile: '.app'
    includeRootFolder: true
    archiveType: 'zip'
    archiveFile: '$(buildVersion).zip'
    replaceExistingArchive: true
  displayName: 'Package app into ZIP'

同时在构建流水线中添加步骤，验证_nuxt文件夹存在：

- script: ls -la .app/.output/public/_nuxt
  displayName: 'Verify Nuxt Build Output'

4. 添加静态Web App路由配置 #

在.app/.output/public目录下创建staticwebapp.config.json，确保_nuxt资源能被正确访问：

{
  "routes": [
    {
      "route": "/_nuxt/*",
      "serve": "/_nuxt/{file}"
    },
    {
      "route": "/*",
      "serve": "/index.html",
      "statusCode": 200
    }
  ]
}

确保该文件在构建时被包含到.app目录中，随打包工件发布。

内容的提问来源于stack exchange，提问作者Pieter