SvelteKit应用部署至Azure Static Web App失败求助

问题根源 #

你遇到的错误是因为Azure Static Web Apps的Oryx构建器无法识别SvelteKit项目的构建规则，且未正确指向SvelteKit的静态输出目录，导致找不到index.html。

分步解决方案 #

1. 修正GitHub Actions工作流配置 #

找到仓库中自动生成的.github/workflows/azure-static-web-apps-<你的应用名称>.yml文件，修改以下关键配置项：

app_location: "."          # 指向项目根目录
api_location: ""           # 无Azure Functions API则留空
output_location: "build"   # SvelteKit构建后的静态文件输出目录
app_build_command: "npm run build"  # 对应你的包管理器命令（pnpm build/yarn build）

2. 配置SvelteKit静态适配器 #

SvelteKit默认不是纯静态输出，必须使用adapter-static生成Azure所需的静态资源：

• 安装适配器：

  npm install @sveltejs/adapter-static --save-dev
  

• 修改svelte.config.js：

  import adapter from '@sveltejs/adapter-static';
  import { vitePreprocess } from '@sveltejs/kit/vite';
  
  const config = {
    preprocess: vitePreprocess(),
    kit: {
      adapter: adapter({
        pages: 'build',
        assets: 'build',
        fallback: 'index.html'  // 启用SPA路由支持（可选，根据你的应用需求）
      })
    }
  };
  
  export default config;
  

3. 验证本地构建 #

执行本地构建命令确认输出目录存在index.html：

npm run build

检查项目根目录下的build文件夹，确认包含index.html及其他静态资源。

4. 同步Azure Portal配置（可选） #

如果Azure Portal中初始配置有误，进入你的Static Web App → 配置 → 构建与部署，更新以下参数：

• 应用位置：.
• 输出位置：build
• 构建命令：npm run build

关键说明 #

• Oryx构建器需要明确的构建命令和输出路径才能识别SvelteKit项目，默认配置无法自动检测
• 不要修改本地index.html名称，SvelteKit的adapter-static会自动在build目录生成符合要求的静态入口文件

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