SvelteKit 是 Svelte 的官方全栈框架,提供基于文件的路由、服务端渲染(SSR)、静态站点生成(SSG)、带渐进增强的表单处理,以及面向任意平台的部署适配器。
主要能力
基于文件的路由:根据 src/routes/ 目录结构自动生成路由。文件命名决定路由行为,例如 +page.svelte 为页面组件,+page.ts 为通用 load(客户端与服务端),+page.server.ts 为仅服务端 load,+layout.svelte 为共享布局,+server.ts 为 API 端点,+error.svelte 为错误边界。支持动态路由([slug])、可选参数([[year]])和剩余参数([...path])。
Load 函数:类型安全的数据获取。通用 load(+page.ts)在服务端与客户端运行,需使用 fetch 获取数据;仅服务端 load(+page.server.ts)只在服务端运行,允许直接访问数据库。支持通过返回 Promise 实现流式数据加载。可设置 prerender、ssr、csr 等渲染选项。
表单 Actions:原生表单处理与渐进增强。支持默认 action 与命名 action,可返回 fail 状态、设置 cookies、重定向。配合 $app/forms 的 enhance 可实现无刷新提交与加载状态。
SSR/SSG/SPA:灵活的渲染模式,可按路由控制。
适配器:可部署到 Vercel、Netlify、Node.js、Cloudflare 等平台。
TypeScript 优先:从 $types 生成类型,提供类型安全。
Hooks:类似中间件的 handle、handleError、handleFetch,可用于认证、日志、路由保护等。
API 路由:+server.ts 文件用于 REST 端点,支持 GET、POST、PATCH、DELETE 等方法,可结合动态路由参数。
布局:支持共享布局、嵌套布局与布局分组((name) 不影响 URL 结构),并可通过 @ 跳出布局。
使用方式
创建新项目:
npm create svelte@latest my-app cd my-app npm install npm run dev -- --open
模板可选 skeleton、demo app、library;可选 TypeScript、ESLint、Prettier、Playwright、Vitest。
项目结构(标准布局):
my-sveltekit-app/ ├── src/ │ ├── routes/ # 基于文件的路由 │ │ ├── +page.svelte # /(首页) │ │ ├── +page.ts # 通用 load 函数 │ │ ├── +page.server.ts # 仅服务端 load 函数 │ │ ├── +layout.svelte # 共享布局 │ │ ├── +layout.ts # 布局 load 函数 │ │ ├── +error.svelte # 错误页面 │ │ ├── about/ │ │ │ └── +page.svelte # /about │ │ ├── blog/ │ │ │ ├── +page.svelte # /blog(列表) │ │ │ ├── +page.server.ts # 加载文章 │ │ │ └── [slug]/ │ │ │ ├── +page.svelte # /blog/my-post │ │ │ └── +page.server.ts │ │ └── api/ │ │ └── posts/ │ │ └── +server.ts # GET /api/posts │ ├── lib/ │ │ ├── components/ │ │ ├── server/ # 仅服务端工具 │ │ │ └── database.ts │ │ ├── stores/ │ │ └── utils/ │ ├── hooks.server.ts # 服务端 hooks │ ├── hooks.client.ts # 客户端 hooks │ ├── app.html # HTML 模板 │ └── app.d.ts # TypeScript 声明 ├── static/ # 静态资源(robots.txt、favicon) ├── tests/ # Playwright 测试 ├── svelte.config.js # SvelteKit 配置 ├── vite.config.ts # Vite 配置 └── package.json
适用场景
适用于构建全栈 Web 应用、静态站点、SPA,以及需要服务端逻辑、表单处理、API 端点与多平台部署的 Svelte 项目。
限制
资料未提供关于收费、价格、性能指标或具体平台效果的信息,暂未提供。