跳到主要內容

參考

組態

在 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 時會執行 adapter。它會決定如何將輸出轉換為不同的平台。

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

是否檢查 POSTPUTPATCHDELETE 表單提交的輸入 origin 標頭,並驗證它是否與伺服器的來源相符。

若要允許人們從其他來源對您的應用程式進行 POSTPUTPATCHDELETE 請求,其 Content-Typeapplication/x-www-form-urlencodedmultipart/form-datatext/plain,您需要停用此選項。請小心!

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"

放置應該有穩定網址且不經過任何處理的靜態檔案,例如 favicon.icomanifest.json

ts
hooks?: {}
ts
client?: string;
  • 預設值 "src/hooks.client"

用戶端 hooks 的位置。

ts
server?: string;
  • 預設值 "src/hooks.server"

伺服器 hooks 的位置。

ts
universal?: string;
  • 預設值 "src/hooks"

通用 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。此選項是一個數字,指定以 String.length 屬性指定的 UTF-16 編碼單位中 CSS 檔案的最大長度,以內嵌。頁面所需且小於此值的所有 CSS 檔案會合併並內嵌在 <style> 區塊中。

這會減少初始請求,並可以改善您的 首次內容繪製 分數。但是,它會產生較大的 HTML 輸出,並降低瀏覽器快取的效能。請謹慎使用。

moduleExtensions

  • 預設 [".js", ".ts"]

SvelteKit 將視為模組的檔案副檔名陣列。副檔名與 config.extensionsconfig.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 — 自訂錯誤處理常式,它會接收一個 details 物件,其中包含 statuspathreferrerreferenceTypemessage 屬性。如果從這個函式 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 — 自訂錯誤處理常式,它會接收一個 details 物件,其中包含 pathidreferrersmessage 屬性。如果從這個函式 throw,建置將會失敗
ts
handleEntryGeneratorMismatch?: PrerenderEntryGeneratorMismatchHandlerValue;
  • 預設值 "fail"

entries 匯出所產生的項目與其所產生的路由不符時的回應方式。

  • 'fail' — 讓建置失敗
  • 'ignore' - 靜默忽略失敗並繼續
  • 'warn' — 繼續,但印出警告
  • (details) => void — 自訂錯誤處理常式,它會接收一個 details 物件,其中包含 generatedFromIdentrymatchedIdmessage 屬性。如果從這個函式 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
下一個 命令列介面