本技能是一份关于 SvelteKit SPA 模式的参考指南,用于在纯客户端渲染(CSR)下构建单页应用,适合前后端分离、后端仅提供 API 的项目(如 Golang + Echo)。核心要求是禁用服务端渲染并使用 adapter-static 提供 fallback 页面。
主要能力与配置:安装 @sveltejs/adapter-static,在 svelte.config.js 中配置 pages、assets、fallback(如 200.html、404.html 或 index.html)等;在 src/routes/+layout.ts 中设置 export const ssr = false 与 export const prerender = false;所有路由由客户端处理,禁用 +server.js 等服务器路由。
使用方式:新建项目时按清单配置适配器、环境变量(VITE_API_URL)与后端 CORS;迁移已有项目时替换适配器、将 +page.server.js 改为 +page.ts、把服务器 API 迁到后端、load 函数改用绝对 API URL。数据加载在浏览器端通过 +page.ts 的 load 函数完成,使用 fetch 请求后端 API。构建与预览命令为 bun run build 与 bun run preview。
安全与限制:文中示例用 localStorage 保存令牌,但明确提示其存在 XSS 风险,生产环境推荐 HttpOnly Cookie 或内存存储;后端 CORS 不应在生产使用通配符。是否可选择性预渲染部分静态页需按资料中说明配置。其余未在资料中提及的部署平台限制暂未提供。