SvelteKit 最新中文文檔教程（7）—— 構建和部署詳情 - 前端,React yayujs 動態日志

動態

詳情

返回

SvelteKit 最新中文文檔教程（7）—— 構建和部署 - 動態詳情

03:51 上午 · 11月 07 ,2025

前言

Svelte，一個語法簡潔、入門容易，面向未來的前端框架。

從 Svelte 誕生之初，就備受開發者的喜愛，根據統計，從 2019 年到 2024 年，連續 6 年一直是開發者最感興趣的前端框架 No.1：

Svelte 以其獨特的編譯時優化機制著稱，具有輕量級、高性能、易上手等特性，非常適合構建輕量級 Web 項目。

為了幫助大家學習 Svelte，我同時搭建了 Svelte 最新的中文文檔站點。

如果需要進階學習，也可以入手我的小冊《Svelte 開發指南》，語法篇、實戰篇、原理篇三大篇章帶你係統掌握 Svelte！

歡迎圍觀我的“網頁版朋友圈”、加入“冴羽·成長陪伴社羣”，踏上“前端大佬成長之路”。

構建您的應用

構建 SvelteKit 應用程序分為兩個階段，這兩個階段都發生在您運行 vite build（通常通過 npm run build）時。

首先，Vite 會為您的服務端代碼、瀏覽器代碼和 service worker（如果有的話）創建優化的生產構建。如果合適，預渲染會在此階段執行。

其次，適配器（adapter） 會對這個生產構建進行調整，使其適合目標環境 — 更多內容將在接下來的頁面中介紹。

構建過程中

SvelteKit 會在構建過程中加載您的 +page/layout(.server).js 文件（以及它們導入的所有文件）進行分析。

任何在此階段不應該被執行的代碼必須通過檢查 $app/environment 的 building 是否為 false：

+++import { building } from '$app/environment';+++
import { setupMyDatabase } from '$lib/server/database';

+++if (!building) {+++
	setupMyDatabase();
+++}+++

export function load() {
	// ...
}

預覽您的應用

構建完成後，您可以通過 vite preview（通過 npm run preview）在本地查看您的生產構建。請注意，這將在 Node 中運行應用程序，因此無法完美復現您部署的應用程序 — 適配器特定的調整（如 platform 對象）不適用於預覽。

適配器

在部署 SvelteKit 應用之前，您需要為您的部署目標進行適配。適配器是一些小型插件，它們接收構建好的應用作為輸入，並生成用於部署的輸出。

官方為多個平台提供了適配器 — 這些在以下頁面中有詳細文檔：

@sveltejs/adapter-cloudflare 用於 Cloudflare Pages
@sveltejs/adapter-cloudflare-workers 用於 Cloudflare Workers
@sveltejs/adapter-netlify 用於 Netlify
@sveltejs/adapter-node 用於 Node 服務器
@sveltejs/adapter-static 用於靜態站點生成 (SSG)
@sveltejs/adapter-vercel 用於 Vercel

還有社區提供的適配器用於其他平台。

使用適配器

您的適配器在 svelte.config.js 中指定：

/// file: svelte.config.js
// @filename: ambient.d.ts
declare module 'svelte-adapter-foo' {
	const adapter: (opts: any) => import('@sveltejs/kit').Adapter;
	export default adapter;
}

// @filename: index.js
// ---cut---
import adapter from 'svelte-adapter-foo';

/** @type {import('@sveltejs/kit').Config} */
const config = {
	kit: {
		adapter: adapter({
			// 適配器選項在這裏
		})
	}
};

export default config;