跳至主要内容

参考

配置

在 GitHub 上编辑此页面

项目的配置位于项目根目录中的 svelte.config.js 文件中。除了 SvelteKit,此配置对象还可被其他与 Svelte 集成的工具使用,例如编辑器扩展。

svelte.config.js
ts
import adapter from '@sveltejs/adapter-auto';
/** @type {import('@sveltejs/kit').Config} */
const config = {
kit: {
adapter: adapter()
}
};
export default config;
ts
interface Config {}
ts
compilerOptions?: CompileOptions;
  • 默认 {}

传递给 svelte.compile 的选项。

ts
extensions?: string[];
  • 默认 [".svelte"]

应视为 Svelte 文件的文件扩展名列表。

ts
kit?: KitConfig;

SvelteKit 选项

ts
preprocess?: any;

预处理器选项(如果存在)。预处理也可以通过 Vite 的预处理器功能完成。

ts
vitePlugin?: PluginOptions;

vite-plugin-svelte 插件选项。

ts
[key: string]: any;

与 Svelte 集成的工具所需的任何其他选项。

kit 属性配置 SvelteKit,可以具有以下属性

adapter

  • 默认 undefined

执行 vite build 时运行 适配器。它决定如何为不同的平台转换输出。

alias

  • 默认 {}

包含零个或多个别名的对象,用于替换 import 语句中的值。这些别名会自动传递给 Vite 和 TypeScript。

svelte.config.js
ts
/** @type {import('@sveltejs/kit').Config} */
const config = {
kit: {
alias: {
// this will match a file
'my-file': 'path/to/my-file.js',
// this will match a directory and its contents
// (`my-directory/x` resolves to `path/to/my-directory/x`)
'my-directory': 'path/to/my-directory',
// an alias ending /* will only match
// the contents of a directory, not the directory itself
'my-directory/*': 'path/to/my-directory/*'
}
}
};

内置的 $lib 别名由 config.kit.files.lib 控制,因为它用于打包。

需要运行 npm run dev 才能让 SvelteKit 自动在 jsconfig.jsontsconfig.json 中生成所需的别名配置。

appDir

  • 默认值 "_app"

SvelteKit 存放其内容的目录,包括静态资产(如 JS 和 CSS)和内部使用的路由。

如果指定了 paths.assets,将有两个应用程序目录 — ${paths.assets}/${appDir}${paths.base}/${appDir}

csp

内容安全策略 配置。CSP 通过限制资源可以加载的位置来帮助保护用户免受跨站点脚本 (XSS) 攻击。例如,如下配置...

svelte.config.js
ts
/** @type {import('@sveltejs/kit').Config} */
const config = {
kit: {
csp: {
directives: {
'script-src': ['self']
},
reportOnly: {
'script-src': ['self']
}
}
}
};
export default config;

...将阻止脚本从外部站点加载。SvelteKit 将为其生成的任何内联样式和脚本使用随机数或哈希(取决于 mode)来增强指定的指令。

要为手动包含在 src/app.html 中的脚本和链接添加随机数,可以使用占位符 %sveltekit.nonce%(例如 <script nonce="%sveltekit.nonce%">)。

当页面被预渲染时,CSP 标头将通过 <meta http-equiv> 标记添加(请注意,在这种情况下,将忽略 frame-ancestorsreport-urisandbox 指令)。

mode'auto' 时,SvelteKit 将对动态呈现的页面使用随机数,对预渲染的页面使用哈希。对预渲染的页面使用随机数是不安全的,因此被禁止。

请注意,大多数 Svelte 过渡 通过创建内联 <style> 元素来工作。如果您在应用程序中使用这些元素,则必须将 style-src 指令留空或添加 unsafe-inline

如果这种级别的配置不够,并且您有更多动态需求,则可以使用 handle 钩子 来实现自己的 CSP。

ts
mode?: 'hash' | 'nonce' | 'auto';

是否使用哈希或随机数来限制 <script><style> 元素。'auto' 将对预渲染的页面使用哈希,对动态呈现的页面使用随机数。

ts
directives?: CspDirectives;

将添加到 Content-Security-Policy 标头的指令。

ts
reportOnly?: CspDirectives;

将添加到 Content-Security-Policy-Report-Only 标头的指令。

csrf

防止 跨站点请求伪造 (CSRF) 攻击。

ts
checkOrigin?: boolean;
  • 默认值 true

是否检查传入的 origin 标头以进行 POSTPUTPATCHDELETE 表单提交,并验证它是否与服务器的来源匹配。

要允许人们从其他来源向您的应用程序发出 Content-Typeapplication/x-www-form-urlencodedmultipart/form-datatext/plainPOSTPUTPATCHDELETE 请求,您需要禁用此选项。小心!

embedded

  • 默认值 false

应用程序是否嵌入在更大的应用程序中。如果为 true,SvelteKit 将在其事件侦听器中与导航等相关的内容添加到 %sveltekit.body% 的父级而不是 window,并将从服务器传递 params,而不是从 location.pathname 推断它们。请注意,通常不支持在同一页面上嵌入多个 SvelteKit 应用程序,并在其中使用客户端 SvelteKit 功能(例如,推送到历史记录状态假定只有一个实例)。

env

环境变量配置

ts
dir?: string;
  • 默认 "."

搜索 .env 文件的目录。

ts
publicPrefix?: string;
  • 默认 "PUBLIC_"

一个前缀,表示环境变量可以安全地公开给客户端代码。请参阅 $env/static/public$env/dynamic/public。请注意,如果你正在使用 Vite 的环境变量处理,那么 Vite 的 envPrefix 必须单独设置 - 尽管通常不需要使用该功能。

ts
privatePrefix?: string;
  • 默认 ""

一个前缀,表示环境变量不安全,不能公开给客户端代码。既不匹配公共前缀也不匹配私有前缀的环境变量将被完全丢弃。请参阅 $env/static/private$env/dynamic/private

files

在项目中查找各种文件的位置。

ts
assets?: string;
  • 默认 "static"

放置应该具有稳定 URL 且不经过任何处理的静态文件的位置,例如 favicon.icomanifest.json

ts
hooks?: {}
ts
client?: string;
  • 默认 "src/hooks.client"

客户端 钩子 的位置。

ts
server?: string;
  • 默认 "src/hooks.server"

服务器 钩子 的位置。

ts
universal?: string;
  • 默认 "src/hooks"

通用 钩子 的位置。

ts
lib?: string;
  • 默认 "src/lib"

应用程序的内部库,可以在整个代码库中作为 $lib 访问

ts
params?: string;
  • 默认 "src/params"

包含 参数匹配器 的目录

ts
routes?: string;
  • 默认 "src/routes"

定义应用程序结构的文件(请参阅 路由

ts
serviceWorker?: string;
  • 默认 "src/service-worker"

服务工作程序入口点的位置(请参阅 服务工作程序

ts
appTemplate?: string;
  • 默认 "src/app.html"

HTML 响应模板的位置

ts
errorTemplate?: string;
  • 默认 "src/error.html"

后备错误响应模板的位置

inlineStyleThreshold

  • 默认值 0

HTML 头部 <style> 块中的内联 CSS。此选项是一个数字,指定以 UTF-16 代码单位为单位的 CSS 文件的最大长度,如 String.length 属性所指定,以进行内联。页面所需且小于此值的所有 CSS 文件都将合并并内联到 <style> 块中。

这会导致较少的初始请求,并可以提高您的 首次内容绘制 分数。但是,它会生成更大的 HTML 输出并降低浏览器缓存的有效性。请谨慎使用。

moduleExtensions

  • 默认值 [".js", ".ts"]

SvelteKit 将其视为模块的文件扩展名数组。扩展名既不与 config.extensions 也不与 config.kit.moduleExtensions 匹配的文件将被路由器忽略。

outDir

  • 默认值 ".svelte-kit"

SvelteKit 在 devbuild 期间将文件写入的目录。您应该将此目录排除在版本控制之外。

output

与构建输出格式相关的选项

ts
preloadStrategy?: 'modulepreload' | 'preload-js' | 'preload-mjs';
  • 默认值 "modulepreload"

SvelteKit 将预加载初始页面所需的 JavaScript 模块,以避免导入“瀑布”,从而实现更快的应用程序启动。有三种策略,各有不同的权衡

  • modulepreload - 使用 <link rel="modulepreload">。这在基于 Chromium 的浏览器、Firefox 115+ 和 Safari 17+ 中提供了最佳结果。它在较旧的浏览器中被忽略。
  • preload-js - 使用 <link rel="preload">。防止 Chromium 和 Safari 中出现瀑布,但 Chromium 会将每个模块解析两次(一次作为脚本,一次作为模块)。导致模块在 Firefox 中被请求两次。如果您希望以牺牲 Chromium 用户的轻微性能下降为代价,最大程度地提高 iOS 设备上用户的性能,则这是一个不错的设置。
  • preload-mjs - 使用 <link rel="preload"> 但使用 .mjs 扩展名,这可以防止在 Chromium 中进行双重解析。一些静态 Web 服务器将无法使用 Content-Type: application/javascript 标头提供 .mjs 文件,这会导致您的应用程序崩溃。如果这不适用于您,则在 modulepreload 得到更广泛支持之前,此选项将为最多用户提供最佳性能。

路径

ts
assets?: '' | `http://${string}` | `https://${string}`;
  • 默认 ""

你的应用文件提供服务的绝对路径。如果你的文件从某种存储桶提供服务,这会很有用。

ts
base?: '' | `/${string}`;
  • 默认 ""

必须以 / 开头但不能以 / 结尾的根相对路径(例如 /base-path),除非它为空字符串。这指定你的应用提供服务的位置,并允许应用驻留在非根路径上。请注意,你需要用基本值作为前缀添加所有根相对链接,否则它们将指向你的域的根,而不是你的 base(这是浏览器的运作方式)。你可以使用 $app/paths 中的 base<a href="{base}/your-page">Link</a>。如果你发现自己经常写这个,那么将它提取到一个可重用组件中可能是有意义的。

ts
relative?: boolean;
  • 默认值 true

是否使用相对资产路径。

如果为 true,在服务器端渲染期间,从 $app/paths 导入的 baseassets 将被替换为相对资产路径,从而产生更可移植的 HTML。如果为 false,则 %sveltekit.assets% 和对构建工件的引用将始终是根相对路径,除非 paths.assets 是一个外部 URL

单页面应用 回退页面将始终使用绝对路径,无论此设置如何。

如果你的应用使用 <base> 元素,你应该将此设置为 false,否则资产 URL 将错误地针对 <base> URL 而不是当前页面进行解析。

在 1.0 中,undefined 是一个有效值,它默认设置。在这种情况下,如果 paths.assets 不是外部的,SvelteKit 将用相对路径替换 %sveltekit.assets%,并使用相对路径引用构建工件,但从 $app/paths 导入的 baseassets 将如你的配置中指定的那样。

预渲染

参见 预渲染

ts
concurrency?: number;
  • 默认 1

可以同时预渲染多少个页面。JS 是单线程的,但在预渲染性能受网络限制的情况下(例如从远程 CMS 加载内容),这可以通过在等待网络响应时处理其他任务来加快速度。

ts
crawl?: boolean;
  • 默认值 true

SvelteKit 是否应通过关注来自 entries 的链接来查找要预渲染的页面。

ts
entries?: Array<'*' | `/${string}`>;
  • 默认 ["*"]

预渲染或开始爬取的页面数组(如果 crawl: true)。* 字符串包含所有不包含必需 [parameters] 的路由,其中可选参数包含为空(因为 SvelteKit 不知道任何参数应具有的值)。

ts
handleHttpError?: PrerenderHttpErrorHandlerValue;
  • 默认 "fail"

如何响应在预渲染应用时遇到的 HTTP 错误。

  • 'fail' — 构建失败
  • 'ignore' - 静默忽略失败并继续
  • 'warn' — 继续,但打印警告
  • (details) => void — 一个自定义错误处理程序,它采用一个具有 statuspathreferrerreferenceTypemessage 属性的 details 对象。如果从该函数中 throw,则构建将失败
svelte.config.js
ts
/** @type {import('@sveltejs/kit').Config} */
const config = {
kit: {
prerender: {
handleHttpError: ({ path, referrer, message }) => {
// ignore deliberate link to shiny 404 page
if (path === '/not-found' && referrer === '/blog/how-we-built-our-404-page') {
return;
}
// otherwise fail the build
throw new Error(message);
}
}
}
};
ts
handleMissingId?: PrerenderMissingIdHandlerValue;
  • 默认 "fail"

如何响应来自一个预渲染页面到另一个预渲染页面的哈希链接与目标页面上的 id 不对应的情况。

  • 'fail' — 构建失败
  • 'ignore' - 静默忽略失败并继续
  • 'warn' — 继续,但打印警告
  • (details) => void — 一个自定义错误处理程序,它采用一个具有 pathidreferrersmessage 属性的 details 对象。如果从该函数中 throw,则构建将失败
ts
handleEntryGeneratorMismatch?: PrerenderEntryGeneratorMismatchHandlerValue;
  • 默认 "fail"

如何响应由 entries 导出生成的条目与从中生成的路由不匹配的情况。

  • 'fail' — 构建失败
  • 'ignore' - 静默忽略失败并继续
  • 'warn' — 继续,但打印警告
  • (details) => void — 一个自定义错误处理程序,它采用一个具有 generatedFromIdentrymatchedIdmessage 属性的 details 对象。如果从该函数中 throw,则构建将失败
ts
origin?: string;
  • 默认 "http://sveltekit-prerender"

预渲染期间 url.origin 的值;如果包含在呈现的内容中,则很有用。

serviceWorker

ts
register?: boolean;
  • 默认值 true

如果存在,是否自动注册服务工作程序。

ts
files?(filepath: string): boolean;
  • 默认 (filename) => !/\.DS_Store/.test(filename)

确定 static 目录中的哪些文件将在 $service-worker.files 中可用。

typescript

ts
config?: (config: Record<string, any>) => Record<string, any> | void;
  • 默认 (config) => config

一个允许你编辑生成的 tsconfig.json 的函数。你可以改变配置(推荐)或返回一个新的。这对于扩展单一代码库根目录中的共享 tsconfig.json 很有用,例如。

版本

客户端导航可能会出现错误,如果你在人们使用你的应用时部署了一个新版本。如果新页面的代码已经加载,它可能包含陈旧的内容;如果没有,应用的路由清单可能会指向一个不再存在的 JavaScript 文件。SvelteKit 通过版本管理帮助你解决这个问题。如果 SvelteKit 在加载页面时遇到错误,并检测到已部署了一个新版本(使用此处指定的 name,默认为构建的时间戳),它将回退到传统的全页导航。不过,并非所有导航都会导致错误,例如,如果下一页的 JavaScript 已加载。如果你仍然想在这些情况下强制进行全页导航,可以使用设置 pollInterval 然后使用 beforeNavigate 等技术

+layout.svelte
<script>
	import { beforeNavigate } from '$app/navigation';
	import { updated } from '$app/stores';

	beforeNavigate(({ willUnload, to }) => {
		if ($updated && !willUnload && to?.url) {
			location.href = to.url.href;
		}
	});
</script>

如果你将 pollInterval 设置为非零值,SvelteKit 将在后台轮询新版本,并在检测到新版本时将 updated 存储的值设置为 true

ts
name?: string;

当前应用版本字符串。如果指定,这必须是确定性的(例如提交引用,而不是 Math.random()Date.now().toString()),否则默认为构建的时间戳。

例如,要使用当前提交哈希,你可以使用 git rev-parse HEAD

svelte.config.js
ts
import * as child_process from 'node:child_process';
export default {
kit: {
version: {
name: child_process.execSync('git rev-parse HEAD').toString().trim()
}
}
};
ts
pollInterval?: number;
  • 默认值 0

轮询版本更改的毫秒间隔。如果这是 0,则不会进行轮询。

上一个 SEO
下一个 命令行界面