SvelteKit入门

项目结构

一个典型的 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

src 目录包含了项目的主要部分。除了 src/routes 和 src/app.html 之外，其他所有内容都是可选的。

lib 包含你的库代码（工具和组件），可以通过 $lib 别名导入，或者使用 svelte-package 打包以供分发。
- server 包含你的仅服务器端库代码。可以使用 $lib/server 别名导入。SvelteKit 会阻止你在客户端代码中导入这些代码。
params 包含你的应用需要的任何参数匹配器
routes 包含应用程序的路由。你也可以在这里共置仅在单个路由中使用的其他组件。
app.html 是你的页面模板 - 一个 HTML 文档，包含以下占位符
- %sveltekit.head% — 应用需要的 <link> 和 <script> 元素，以及任何 <svelte:head> 内容
- %sveltekit.body% — 渲染页面的标记。这应该位于 <div> 或其他元素内部，而不是直接位于 <body> 内部，以防止浏览器扩展程序注入元素，然后被水合过程销毁导致的错误。如果情况并非如此，SvelteKit 会在开发中向你发出警告。
- %sveltekit.assets% — 如果指定，则为 paths.assets，否则为 paths.base 的相对路径。
- %sveltekit.nonce% — 如果使用，则为手动包含的链接和脚本的 CSP nonce。
- %sveltekit.env.[NAME]% - 这将在渲染时替换为 [NAME] 环境变量，该变量必须以 publicPrefix（通常为 PUBLIC_）开头。如果未匹配，则将回退到 ''。
error.html 是在所有其他操作失败时渲染的页面。它可以包含以下占位符
- %sveltekit.status% — HTTP 状态
- %sveltekit.error.message% — 错误消息
hooks.client.js 包含你的客户端钩子
hooks.server.js 包含你的服务器钩子
service-worker.js 包含你的 Service Worker

（项目是否包含 .js 或 .ts 文件取决于你在创建项目时是否选择使用 TypeScript。你可以在文档底部使用切换按钮在 JavaScript 和 TypeScript 之间切换。）

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

static

任何应按原样提供的静态资源，如 robots.txt 或 favicon.png，都放在这里。

tests

如果你在设置项目时添加了 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

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

vite.config.js

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

其他文件

.svelte-kit

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

在 GitHub 上编辑此页面

创建项目 Web 标准