参考
配置
在 GitHub 上编辑此页面项目的配置位于项目根目录中的 svelte.config.js
文件中。除了 SvelteKit,此配置对象还可被其他与 Svelte 集成的工具使用,例如编辑器扩展。
ts
importadapter from '@sveltejs/adapter-auto';/** @type {import('@sveltejs/kit').Config} */constconfig = {kit : {adapter :adapter ()}};export defaultconfig ;
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。
ts
/** @type {import('@sveltejs/kit').Config} */constconfig = {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.json
或tsconfig.json
中生成所需的别名配置。
appDir永久链接
- 默认值
"_app"
SvelteKit 存放其内容的目录,包括静态资产(如 JS 和 CSS)和内部使用的路由。
如果指定了 paths.assets
,将有两个应用程序目录 — ${paths.assets}/${appDir}
和 ${paths.base}/${appDir}
。
csp永久链接
内容安全策略 配置。CSP 通过限制资源可以加载的位置来帮助保护用户免受跨站点脚本 (XSS) 攻击。例如,如下配置...
ts
/** @type {import('@sveltejs/kit').Config} */constconfig = {kit : {csp : {directives : {'script-src': ['self']},reportOnly : {'script-src': ['self']}}}};export defaultconfig ;
...将阻止脚本从外部站点加载。SvelteKit 将为其生成的任何内联样式和脚本使用随机数或哈希(取决于 mode
)来增强指定的指令。
要为手动包含在 src/app.html
中的脚本和链接添加随机数,可以使用占位符 %sveltekit.nonce%
(例如 <script nonce="%sveltekit.nonce%">
)。
当页面被预渲染时,CSP 标头将通过 <meta http-equiv>
标记添加(请注意,在这种情况下,将忽略 frame-ancestors
、report-uri
和 sandbox
指令)。
当
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
标头以进行 POST
、PUT
、PATCH
或 DELETE
表单提交,并验证它是否与服务器的来源匹配。
要允许人们从其他来源向您的应用程序发出 Content-Type
为 application/x-www-form-urlencoded
、multipart/form-data
或 text/plain
的 POST
、PUT
、PATCH
或 DELETE
请求,您需要禁用此选项。小心!
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.ico
或 manifest.json
ts
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 在 dev
和 build
期间将文件写入的目录。您应该将此目录排除在版本控制之外。
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
导入的 base
和 assets
将被替换为相对资产路径,从而产生更可移植的 HTML。如果为 false
,则 %sveltekit.assets%
和对构建工件的引用将始终是根相对路径,除非 paths.assets
是一个外部 URL
单页面应用 回退页面将始终使用绝对路径,无论此设置如何。
如果你的应用使用 <base>
元素,你应该将此设置为 false
,否则资产 URL 将错误地针对 <base>
URL 而不是当前页面进行解析。
在 1.0 中,undefined
是一个有效值,它默认设置。在这种情况下,如果 paths.assets
不是外部的,SvelteKit 将用相对路径替换 %sveltekit.assets%
,并使用相对路径引用构建工件,但从 $app/paths
导入的 base
和 assets
将如你的配置中指定的那样。
预渲染永久链接
参见 预渲染。
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
— 一个自定义错误处理程序,它采用一个具有status
、path
、referrer
、referenceType
和message
属性的details
对象。如果从该函数中throw
,则构建将失败
ts
/** @type {import('@sveltejs/kit').Config} */constconfig = {kit : {prerender : {handleHttpError : ({path ,referrer ,message }) => {// ignore deliberate link to shiny 404 pageif (path === '/not-found' &&referrer === '/blog/how-we-built-our-404-page') {return;}// otherwise fail the buildthrow newError (message );}}}};
ts
handleMissingId ?: PrerenderMissingIdHandlerValue ;
- 默认
"fail"
如何响应来自一个预渲染页面到另一个预渲染页面的哈希链接与目标页面上的 id
不对应的情况。
'fail'
— 构建失败'ignore'
- 静默忽略失败并继续'warn'
— 继续,但打印警告(details) => void
— 一个自定义错误处理程序,它采用一个具有path
、id
、referrers
和message
属性的details
对象。如果从该函数中throw
,则构建将失败
ts
handleEntryGeneratorMismatch ?: PrerenderEntryGeneratorMismatchHandlerValue ;
- 默认
"fail"
如何响应由 entries
导出生成的条目与从中生成的路由不匹配的情况。
'fail'
— 构建失败'ignore'
- 静默忽略失败并继续'warn'
— 继续,但打印警告(details) => void
— 一个自定义错误处理程序,它采用一个具有generatedFromId
、entry
、matchedId
和message
属性的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
等技术
<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
ts
import * aschild_process from 'node:child_process';export default {kit : {version : {name :child_process .execSync ('git rev-parse HEAD').toString ().trim ()}}};
ts
pollInterval ?: number ;
- 默认值
0
轮询版本更改的毫秒间隔。如果这是 0
,则不会进行轮询。