使用AWS Amplify部署SvelteKit 1.0后页面空白问题求助

核心问题排查与修复 #

1. 修正构建输出目录配置 #

你的Amplify构建配置中，baseDirectory设置为/.svelte-kit/build是错误的。SvelteKit的构建产物目录取决于你使用的适配器：

• 若使用adapter-static（静态站点部署），正确的输出目录是项目根目录下的build文件夹
• 若使用adapter-auto或针对Amplify的适配器，需确认实际输出路径

修改构建配置的baseDirectory为build：

version: 1
frontend:
  phases:
    preBuild:
      commands:
        - npm ci
    build:
      commands:
        - npm run build
  artifacts:
    baseDirectory: build
    files:
      - '**/*'
  cache:
    paths:
      - node_modules/**/*

2. 确保配置了正确的SvelteKit适配器 #

SvelteKit 1.0必须配置适配器才能生成可部署的静态或服务器端产物：

1. 安装adapter-static：

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

2. 修改svelte.config.js，配置适配器并指定路由模式：

import adapter from '@sveltejs/adapter-static';

/** @type {import('@sveltejs/kit').Config} */
const config = {
	kit: {
		adapter: adapter({
			pages: 'build',
			assets: 'build',
			fallback: 'index.html' // 解决SPA路由刷新404问题
		}),
		prerender: {
			default: true // 预渲染所有路由，适合静态站点
		}
	}
};

export default config;

3. 修复Amplify的SPA路由设置 #

Amplify默认不会处理SPA的客户端路由，需要在Amplify控制台中配置：

• 进入你的Amplify应用 → Hosting → Rewrites and redirects
• 添加一条规则：
  • 源地址：</^[^.]+$|\.(?!(css|gif|ico|jpg|js|png|svg|txt|woff|woff2|ttf|map)$)([^.]+$)/>
  • 目标地址：/index.html
  • 类型：200 (Rewrite)

4. 检查构建日志中的警告 #

即使构建显示成功，也要查看构建日志，确认是否有以下问题：

• 适配器未正确安装或配置的警告
• 路由预渲染失败的提示
• 资源路径引用错误的信息

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