SvelteKit构建和部署

Vercel

要部署到 Vercel，请使用 adapter-vercel。

当您使用 adapter-auto 时，此适配器将默认安装，但将其添加到您的项目中允许您指定 Vercel 特定的选项。

用法

使用 npm i -D @sveltejs/adapter-vercel 安装，然后将适配器添加到您的 svelte.config.js

svelte.config

import function adapter(config?: Config): Adapteradapter from '@sveltejs/adapter-vercel';

export default {
	kit: {
    adapter: Adapter;
}kit: {
		adapter: Adapteradapter: function adapter(config?: Config): Adapteradapter({
			// see below for options that can be set here
		})
	}
};

部署配置

要控制如何将您的路由部署到 Vercel 作为函数，您可以指定部署配置，或者通过上面显示的选项，或者使用 +server.js、+page(.server).js 和 +layout(.server).js 文件中的 export const config。

例如，您可以将应用程序的某些部分部署为边缘函数...

about/+page

/** @type {import('@sveltejs/adapter-vercel').Config} */
export const const config: {
    runtime: string;
}@type{import('@sveltejs/adapter-vercel').Config}config = {
	runtime: stringruntime: 'edge'
};

import type { type Config = (EdgeConfig | ServerlessConfig) & {
    images?: ImagesConfig;
}Config } from '@sveltejs/adapter-vercel';

export const const config: Configconfig: type Config = (EdgeConfig | ServerlessConfig) & {
    images?: ImagesConfig;
}Config = {
	runtime: "edge"runtime: 'edge'
};

...以及其他部分作为无服务器函数（请注意，通过在布局中指定 config，它适用于所有子页面）

admin/+layout

/** @type {import('@sveltejs/adapter-vercel').Config} */
export const const config: {
    runtime: string;
}@type{import('@sveltejs/adapter-vercel').Config}config = {
	runtime: stringruntime: 'nodejs22.x'
};

import type { type Config = (EdgeConfig | ServerlessConfig) & {
    images?: ImagesConfig;
}Config } from '@sveltejs/adapter-vercel';

export const const config: Configconfig: type Config = (EdgeConfig | ServerlessConfig) & {
    images?: ImagesConfig;
}Config = {
	ServerlessConfig.runtime?: `nodejs${number}.x` | undefinedWhether to use Edge Functions ('edge') or Serverless Functions ('nodejs18.x', 'nodejs20.x' etc).
@defaultSame as the build environmentruntime: 'nodejs22.x'
};

以下选项适用于所有函数

runtime：'edge'、'nodejs18.x'、'nodejs20.x' 或 'nodejs22.x'。默认情况下，适配器将选择与您的项目在 Vercel 仪表板中配置使用的 Node 版本相对应的 'nodejs<version>.x'
regions：边缘网络区域的数组（对于无服务器函数默认为 ["iad1"]）或 'all'（如果 runtime 为 edge（其默认值））。请注意，无服务器函数的多个区域仅在企业计划中受支持
split：如果为 true，则导致路由被部署为单个函数。如果在适配器级别将 split 设置为 true，则所有路由都将部署为单个函数

此外，以下选项适用于边缘函数

external：esbuild 在捆绑函数时应视为外部的依赖项数组。这仅用于排除在 Node 外部不会运行的可选依赖项

以下选项适用于无服务器函数

memory：函数可用的内存量。默认为 1024 Mb，可以降低到 128 Mb 或在 Pro 或 Enterprise 帐户上以 64Mb 为增量增加到 3008 Mb
maxDuration：函数的最大执行时间。对于 Hobby 帐户默认为 10 秒，对于 Pro 帐户默认为 15 秒，对于 Enterprise 帐户默认为 900 秒
isr：增量静态再生配置，如下所述

如果您的函数需要访问特定区域中的数据，建议将它们部署在同一区域（或靠近它）以获得最佳性能。

图像优化

您可以设置 images 配置来控制 Vercel 如何构建您的图像。有关完整详细信息，请参阅图像配置参考。例如，您可以设置

svelte.config

import function adapter(config?: Config): Adapteradapter from '@sveltejs/adapter-vercel';

export default {
	kit: {
    adapter({ images: { sizes: [], 640: , 828: , 1200: , 1920: , 3840:  } }: {
        images: {
 sizes: Iterable<any>;
 640: any;
 828: any;
 1200: any;
 1920: any;
 3840: any;
        };
    }): any;
    formats: string[];
    minimumCacheTTL: number;
    domains: string[];
}kit: {
		function adapter({ images: { sizes: [], 640: , 828: , 1200: , 1920: , 3840:  } }: {
    images: {
        sizes: Iterable<any>;
        640: any;
        828: any;
        1200: any;
        1920: any;
        3840: any;
    };
}): anyadapter({
			images: {
    sizes: Iterable<any>;
    640: any;
    828: any;
    1200: any;
    1920: any;
    3840: any;
}images: {
				sizes: Iterable<any>sizes: [640, 828, 1200, 1920, 3840],






				formats: string[]formats: ['image/avif', 'image/webp'],
				minimumCacheTTL: numberminimumCacheTTL: 300,
				domains: string[]domains: ['example-app.vercel.app'],
			}
		})
	}
};

增量静态再生

Vercel 支持增量静态再生 (ISR)，它提供了预渲染内容的性能和成本优势以及动态渲染内容的灵活性。

要将 ISR 添加到路由，请在您的 config 对象中包含 isr 属性

import { import BYPASS_TOKENBYPASS_TOKEN } from '$env/static/private';

export const const config: {
    isr: {
        expiration: number;
        bypassToken: any;
        allowQuery: string[];
    };
}config = {
	isr: {
    expiration: number;
    bypassToken: any;
    allowQuery: string[];
}isr: {
		// Expiration time (in seconds) before the cached asset will be re-generated by invoking the Serverless Function.
		// Setting the value to `false` means it will never expire.
		expiration: numberexpiration: 60,

		// Random token that can be provided in the URL to bypass the cached version of the asset, by requesting the asset
		// with a __prerender_bypass=<token> cookie.
		//
		// Making a `GET` or `HEAD` request with `x-prerender-revalidate: <token>` will force the asset to be re-validated.
		bypassToken: anybypassToken: import BYPASS_TOKENBYPASS_TOKEN,

		// List of valid query parameters. Other parameters (such as utm tracking codes) will be ignored,
		// ensuring that they do not result in content being regenerated unnecessarily
		allowQuery: string[]allowQuery: ['search']
	}
};

expiration 属性是必需的；所有其他属性都是可选的。

已预渲染的页面将忽略 ISR 配置。

环境变量

Vercel 提供了一组特定于部署的环境变量。与其他环境变量一样，这些变量可以通过 $env/static/private 和 $env/dynamic/private 访问（有时 - 稍后会详细介绍），并且无法从其公共对应物访问。要从客户端访问这些变量之一

+layout.server

import { import VERCEL_COMMIT_REFVERCEL_COMMIT_REF } from '$env/static/private';

/** @type {import('./$types').LayoutServerLoad} */
export function function load(): {
    deploymentGitBranch: any;
}@type{import('./$types').LayoutServerLoad}load() {
	return {
		deploymentGitBranch: anydeploymentGitBranch: import VERCEL_COMMIT_REFVERCEL_COMMIT_REF
	};
}

import { import VERCEL_COMMIT_REFVERCEL_COMMIT_REF } from '$env/static/private';
import type { type LayoutServerLoad = (event: Kit.ServerLoadEvent<Record<string, any>, Record<string, any>, string | null>) => MaybePromise<void | Record<string, any>>
type LayoutServerLoad = (event: Kit.ServerLoadEvent<Record<string, any>, Record<string, any>, string | null>) => MaybePromise<void | Record<string, any>>LayoutServerLoad } from './$types';

export const const load: LayoutServerLoadload: type LayoutServerLoad = (event: Kit.ServerLoadEvent<Record<string, any>, Record<string, any>, string | null>) => MaybePromise<void | Record<string, any>>
type LayoutServerLoad = (event: Kit.ServerLoadEvent<Record<string, any>, Record<string, any>, string | null>) => MaybePromise<void | Record<string, any>>LayoutServerLoad = () => {
	return {
		deploymentGitBranch: anydeploymentGitBranch: import VERCEL_COMMIT_REFVERCEL_COMMIT_REF
	};
};

+layout

<script>
	/** @type {{ data: import('./$types').LayoutServerData }} */
	let { data } = $props();
</script>

<p>This staging environment was deployed from {data.deploymentGitBranch}.</p>

<script lang="ts">
	import type { LayoutServerData } from './$types';

	let { data }: { data: LayoutServerData } = $props();
</script>

<p>This staging environment was deployed from {data.deploymentGitBranch}.</p>

由于所有这些变量在 Vercel 上构建时在构建时间和运行时间之间保持不变，因此我们建议使用 $env/static/private - 它将静态替换变量，从而实现死代码消除等优化 - 而不是 $env/dynamic/private。

偏差保护

当部署新版本的应用程序时，属于先前版本的资产可能不再可访问。如果用户在发生这种情况时正在积极使用您的应用程序，则当他们导航时可能会导致错误 - 这称为版本偏差。SvelteKit 通过检测由版本偏差导致的错误并导致硬重新加载以获取应用程序的最新版本来缓解这种情况，但这会导致任何客户端状态丢失。（您还可以通过观察 updated 存储值来主动缓解它，该值告诉客户端何时部署了新版本。）

偏差保护是一项 Vercel 功能，它将客户端请求路由到其原始部署。当用户访问您的应用程序时，会设置一个包含部署 ID 的 cookie，并且所有后续请求将在偏差保护处于活动状态时路由到该部署。当他们重新加载页面时，他们将获得最新的部署。（updated 存储不受此行为的影响，因此将继续报告新部署。）要启用它，请访问 Vercel 上项目设置的高级部分。

基于 Cookie 的偏差保护有一个需要注意的地方：如果用户在多个选项卡中打开了多个版本的应用程序，则来自旧版本的请求将被路由到较新的版本，这意味着它们将回退到 SvelteKit 的内置偏差保护。

备注

Vercel 函数

如果您在项目根目录的 api 目录中包含 Vercel 函数，则对 /api/* 的任何请求都不会由 SvelteKit 处理。您应该在您的 SvelteKit 应用程序中将其实现为 API 路由，除非您需要使用非 JavaScript 语言，在这种情况下，您需要确保您的 SvelteKit 应用程序中没有任何 /api/* 路由。

Node 版本

在特定日期之前创建的项目可能默认为使用比 SvelteKit 当前需要的旧版本的 Node。您可以在您的项目设置中更改 Node 版本。

故障排除

访问文件系统

您不能在边缘函数中使用 fs。

您可以在无服务器函数中使用它，但它不会按预期工作，因为文件不会从您的项目复制到您的部署中。相反，使用 $app/server 中的 read 函数访问您的文件。read 不在部署为边缘函数的路由内工作（这可能会在将来发生变化）。

或者，您可以预渲染有问题的路由。

在 GitHub 上编辑此页面

Netlify 编写适配器