SvelteKit静态SPA如何构建出含完整HTML的页面？

问题核心是SvelteKit默认的adapter-static配置下，本地构建仅生成客户端渲染入口，而Cloudflare Pages/Vercel这类平台会自动触发预渲染逻辑。要让本地构建直接产出包含完整HTML（含meta标签、标题等）的静态文件，只需调整配置并确保预渲染逻辑正确：

1. 调整SvelteKit配置文件 #

修改项目根目录的svelte.config.js，配置adapter-static并开启预渲染：

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

export default {
	kit: {
		adapter: adapter({
			pages: 'build', // 输出目录，保持默认即可
			assets: 'build',
			fallback: undefined // 不需要SPA fallback的话设为undefined
		}),
		// 配置预渲染路由：用'*'匹配所有路由，或指定具体路径
		prerender: {
			entries: ['*']
		}
	}
};

2. 确保页面元数据可预渲染 #

不要在onMount或客户端专属逻辑中生成title、OG标签等元数据，这些内容只会在客户端加载，预渲染时无法捕获。正确的做法是：

• 在页面的+page.js/+page.server.js中通过load函数返回元数据
• 在组件中通过$page.data读取并渲染到<svelte:head>中

示例代码：

<!-- +page.svelte -->
<script>
	export let data;
</script>

<svelte:head>
	<title>{data.pageTitle}</title>
	<meta name="description" content={data.pageDesc} />
	<meta property="og:title" content={data.pageTitle} />
</svelte:head>

<!-- 页面内容 -->

// +page.js
export async function load() {
	return {
		pageTitle: '首页 | 我的SvelteKit站点',
		pageDesc: '这是我的SvelteKit静态站点描述'
	};
}

3. 处理动态路由 #

如果项目有动态路由（如/blog/[slug]），需要：

• 在prerender.entries中列出所有具体的动态路由路径，或者
• 在动态路由的load函数中返回{ prerender: true }，并确保能获取到所有路由参数（比如从本地数据文件读取所有slug）

示例：

// src/routes/blog/[slug]/+page.js
import { getBlogPosts } from '$lib/data';

export async function load({ params }) {
	const posts = await getBlogPosts();
	const post = posts.find(p => p.slug === params.slug);

	return {
		post,
		prerender: true // 标记该路由可预渲染
	};
}

// 同时在svelte.config.js的prerender.entries中补充：
// entries: ['*', '/blog/post-1', '/blog/post-2']

4. 执行构建命令 #

运行npm run build（或项目对应的构建命令），此时build文件夹中每个路由都会生成独立的HTML文件，包含完整的预渲染内容。将整个build文件夹上传到S3等对象存储即可，搜索引擎能直接抓取到页面的title、meta标签等信息。

内容的提问来源于stack exchange，提问作者Лео