Vercel

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

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

用法永久链接

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

ts
import adapter from '@sveltejs/adapter-vercel';

export default {
	kit: {
		adapter: adapter({
			// see below for options that can be set here
		})
	}
};

部署配置永久链接

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

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

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

ts
import type { Config } from '@sveltejs/adapter-vercel';

export const config: Config = {
	runtime: 'edge',
};

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

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

ts
import type { Config } from '@sveltejs/adapter-vercel';

export const config: Config = {
	runtime: 'nodejs18.x',
};

以下选项适用于所有函数

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

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

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

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

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

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

图像优化永久链接

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

import adapter from '@sveltejs/adapter-vercel';

export default {
	kit: {
		adapter({
			images: {
				sizes: [640, 828, 1200, 1920, 3840],
				formats: ['image/avif', 'image/webp'],
				minimumCacheTTL: 300,
				domains: ['example-app.vercel.app'],
			}
		})
	}
};

增量静态再生永久链接

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

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

ts
import { BYPASS_TOKEN } from '$env/static/private';

export const config = {
	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: 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: BYPASS_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: ['search']
	}
};

ts
import { BYPASS_TOKEN } from '$env/static/private';

export const config = {
	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: 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: BYPASS_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: ['search'],
	},
};

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

环境变量永久链接

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

ts
import { VERCEL_COMMIT_REF } from '$env/static/private';

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

ts
import { VERCEL_COMMIT_REF } from '$env/static/private';
import type { LayoutServerLoad } from './$types';

export const load: LayoutServerLoad = () => {
	return {
		deploymentGitBranch: VERCEL_COMMIT_REF,
	};
};

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

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

<script lang="ts">
	import type { LayoutServerData } from './$types';
	
	export let data: LayoutServerData;
</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 不适用于作为边缘函数部署的路由（这可能会在将来发生改变）。

或者，您可以预渲染相关路由。