SvelteKitGetting started

Project structure

一个典型的 SvelteKit 项目看起来是这样的：

my-project/
├ src/
│ ├ lib/
│ │ ├ server/
│ │ │ └ [your server-only lib files]
│ │ └ [your lib files]
│ ├ params/
│ │ └ [your param matchers]
│ ├ routes/
│ │ └ [your routes]
│ ├ app.html
│ ├ error.html
│ ├ hooks.client.js
│ ├ hooks.server.js
│ └ service-worker.js
├ static/
│ └ [your static assets]
├ tests/
│ └ [your tests]
├ package.json
├ svelte.config.js
├ tsconfig.json
└ vite.config.js

您还将找到常见的文件，如.gitignore和.npmrc（以及.prettierrc和eslint.config.js等等，如果您在运行npx sv create时选择了这些选项）。

项目文件

src

The src 目录包含您项目的核心内容。除了 src/routes 和 src/app.html 之外的所有内容都是可选的。

lib 包含您的库代码（实用工具和组件），可以通过 $lib 别名导入，或者使用 svelte-package 打包进行分发
- 服务器 包含您的服务器专用库代码。您可以使用 $lib/server 别名来导入。SvelteKit 将防止您在客户端代码中导入这些内容。
params 包含任何您的应用需要的参数匹配器
路由 包含了您应用程序的路由。您还可以在此处放置仅用于单个路由的其他组件。
app.html 是您的页面模板 — 一个包含以下占位符的 HTML 文档：
- %sveltekit.head% — <link> 和 <script> 元素以及任何 <svelte:head> 内容，是应用所需的
- %sveltekit.body% — 渲染页面的标记。这应该位于 <div> 或其他元素内部，而不是直接位于 <body> 内部，以防止浏览器扩展注入的元素在 hydration 过程中被销毁而导致的错误。如果不符合这种情况，SvelteKit 将在开发过程中发出警告。
- %sveltekit.assets% — 要么是 paths.assets，如果已指定，要么是相对于 paths.base 的相对路径
- %sveltekit.nonce% — 一份用于手动包含链接和脚本的 CSP 随机数，如果使用
- %sveltekit.env.[NAME]% - 這將在渲染時被替換為 [NAME] 環境變量，該變量必須以 publicPrefix （通常為 PUBLIC_）開頭。如果不符合，則回退到 ''。
error.html 是当所有其他操作失败时渲染的页面。它可以包含以下占位符：
- %sveltekit.status% — HTTP 状态
- %sveltekit.error.message% — 错误信息
hooks.client.js 包含您的客户端 hooks
hooks.server.js 包含您的服务器 hooks
service-worker.js 包含您的 service worker

(项目是否包含 .js 或 .ts 文件取决于您在创建项目时是否选择使用 TypeScript。)

如果您在设置项目时添加了Vitest，您的单元测试将位于src目录中，并以.test.js扩展名。

静态

任何应该原样提供的静态资源，如robots.txt或favicon.png，请放入此处。

测试

如果您在设置项目时添加了Playwright用于浏览器测试，测试将存放在此目录中。

package.json

您的package.json文件必须包含@sveltejs/kit、svelte和vite作为devDependencies。

当你使用npx sv create创建项目时，你还会注意到package.json中包含了"type": "module"。这意味着.js文件被解释为带有import和export关键字的本地 JavaScript 模块。旧版 CommonJS 文件需要一个.cjs文件扩展名。

svelte.config.js

此文件包含您的 Svelte 和 SvelteKit 配置。

tsconfig.json

此文件（或如果您更喜欢类型检查的.js文件，而不是.ts文件，则为jsconfig.json）配置 TypeScript，如果您在npx sv create期间添加了类型检查。由于 SvelteKit 依赖于某些配置以特定方式设置，因此它生成自己的.svelte-kit/tsconfig.json文件，您的配置extends该文件。

vite.config.js

一个 SvelteKit 项目实际上就是一个使用 Vue 插件 @sveltejs/kit/vite 以及任何其他 Vue 配置的 Vue 项目。

其他文件

.svelte-kit

随着您开发和构建项目，SvelteKit 将在.svelte-kit目录中生成文件（可配置为outDir）。您可以忽略其内容，并在任何时候删除它们（下次dev或build时将重新生成）。

Edit this page on GitHub llms.txt

previous next

Project types Web standards