跳至主要内容

开始使用

项目结构

在 GitHub 上编辑此页面

一个典型的 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 和 .eslintrc.cjs 等，如果您在运行 npm create svelte@latest 时选择了这些选项）。

项目文件

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 随机数
    • %sveltekit.env.[NAME]% - 渲染时将用 [NAME] 环境变量替换，该变量必须以 publicPrefix（通常为 PUBLIC_）开头。如果不匹配，它将回退到 ''。
  • error.html 是在其他所有内容都失败时渲染的页面。它可以包含以下占位符
    • %sveltekit.status% — HTTP 状态
    • %sveltekit.error.message% — 错误消息
  • hooks.client.js 包含你的客户端 钩子
  • hooks.server.js 包含你的服务器 钩子
  • service-worker.js 包含你的 服务工作线程

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

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

static

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

tests

如果你在设置项目时添加了 Playwright 以进行浏览器测试，则测试将位于此目录中。

package.json

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

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

svelte.config.js

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

tsconfig.json

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

vite.config.js

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

其他文件

.svelte-kit

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

上一页 创建项目
下一页 Web 标准