import PackageManagerTabs from '/components/tabs/PackageManagerTabs.astro'; import Since from '/components/Since.astro';

此 Astro 集成 为你的 Svelte 5 的组件启用渲染和客户端水合。对于 Svelte 3 和 4 的支持, 请安装 @astrojs/svelte@5 作为替代。

安装

Astro 包含了一个 astro add 命令，用于自动设置官方集成。如果你愿意，可以改为手动安装集成。

安装 @astrojs/svelte，需要在你的项目工程中依次运行以下命令：

如果你有任何问题，欢迎随时在 GitHub 上开个 issue 来向我们报告 然后尝试执行以下的手动安装步骤。

手动安装

首先，安装 @astrojs/svelte 包:

大多数包管理器也会安装相关的对等依赖项。如果在启动 Astro 时看到 Cannot find package 'svelte' (或类似的)警告，则需要安装 Svelte 和 TypeScript：

然后，使用 integrations 属性将集成应用到你的 astro.config.* 文件中：

import { defineConfig } from 'astro/config';import svelte from '@astrojs/svelte';export default defineConfig({  // ...  integrations: [svelte()],});

然后，在你的项目根目录中创建一个名为 svelte.config.js 的文件，并添加以下代码：

import { vitePreprocess } from '@astrojs/svelte';export default {  preprocess: vitePreprocess(),}

入门

要在 Astro 使用你的 Svelte 组件，你可以移步我们的 UI 框架文档. 你将会了解到：

• 📦 如何加载框架组件
• 💧 客户端合成注水选项
• 🤝 将框架混合和嵌套在一起的时机

选项

此集成由 @sveltejs/vite-plugin-svelte 提供支持的，要定制 Svelte 编译器，你可以传递选项给当前集成，查看 @sveltejs/vite-plugin-svelte文档 获取更多细节。

你可以通过将选项传递给 astro.config.mjs 中的 svelte 集成或者 svelte.config.js 来设置选项。如果两者都存在，则 astro.config.mjs 中的选项将优先于 svelte.config.js 中的选项：

import { defineConfig } from 'astro/config';import svelte from '@astrojs/svelte';export default defineConfig({  integrations: [svelte({ extensions: ['.svelte'] })],});

// svelte.config.jsexport default {  extensions: ['.svelte'],};

预处理器

如果你的文件中使用了 SCSS 或 Stylus，那么你可以创建一个 svelte.config.js 文件，以便让它们由 Svelte 进行预处理，从而确保 Svelte IDE 拓展能够正确解析 Svelte 文件。

import { vitePreprocess } from '@astrojs/svelte';export default {  preprocess: vitePreprocess(),};

当你运行 astro add svelte 指令的时候，将自动为你添加配置文件。参见 @sveltejs/vite-plugin-svelte 文档以了解更多关于 vitePreprocess 的细节。