@astrojs/ svelte

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

¥This Astro integration enables rendering and client-side hydration for your Svelte 5 components. For Svelte 3 and 4 support, install @astrojs/svelte@5 instead.

安装

¥Installation

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

¥Astro includes an astro add command to automate the setup of official integrations. If you prefer, you can install integrations manually instead.

要安装 @astrojs/svelte，请从项目目录运行以下命令并按照提示操作：

¥To install @astrojs/svelte, run the following from your project directory and follow the prompts:

npx astro add svelte

pnpm astro add svelte

yarn astro add svelte

如果你遇到任何问题，请请随时在 GitHub 上向我们报告并尝试下面的手动安装步骤。

¥If you run into any issues, feel free to report them to us on GitHub and try the manual installation steps below.

手动安装

¥Manual Install

首先，安装 @astrojs/svelte 包：

¥First, install the @astrojs/svelte package:

npm install @astrojs/svelte

pnpm add @astrojs/svelte

yarn add @astrojs/svelte

大多数包管理器也会安装相关的对等依赖。如果你在启动 Astro 时看到 “找不到包 ‘svelte’“（或类似）警告，则需要安装 Svelte：

¥Most package managers will install associated peer dependencies as well. If you see a “Cannot find package ‘svelte’” (or similar) warning when you start up Astro, you’ll need to install Svelte:

npm install svelte

pnpm add svelte

yarn add svelte

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

¥Then, apply the integration to your astro.config.* file using the integrations property:

import { defineConfig } from 'astro/config';
import svelte from '@astrojs/svelte';

export default defineConfig({
  // ...
  integrations: [svelte()],
});

入门

¥Getting started

要在 Astro 中使用你的第一个 Svelte 组件，请前往我们的 UI 框架文档。你将探索：

¥To use your first Svelte component in Astro, head to our UI framework documentation. You’ll explore:

📦 如何加载框架组件，
💧 客户端水合选项，以及
🤝 将框架混合和嵌套在一起的机会

选项

¥Options

该集成由 @sveltejs/vite-plugin-svelte 提供支持。要自定义 Svelte 编译器，可以为集成提供选项。有关详细信息，请参阅 @sveltejs/vite-plugin-svelte 文档。

¥This integration is powered by @sveltejs/vite-plugin-svelte. To customize the Svelte compiler, options can be provided to the integration. See the @sveltejs/vite-plugin-svelte docs for more details.

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

¥You can set options either by passing them to the svelte integration in astro.config.mjs or in svelte.config.js. The options in astro.config.mjs will take precedence over the options in svelte.config.js if both are present:

import { defineConfig } from 'astro/config';
import svelte from '@astrojs/svelte';

export default defineConfig({
  integrations: [svelte({ extensions: ['.svelte'] })],
});

export default {
  extensions: ['.svelte'],
};

预处理器

¥Preprocessors

Added in: @astrojs/svelte@2.0.0

如果你在 Svelte 文件中使用 SCSS 或 Stylus，则可以创建一个 svelte.config.js 文件，以便 Svelte 对它们进行预处理，并且 Svelte IDE 扩展可以正确解析 Svelte 文件。

¥If you’re using SCSS or Stylus in your Svelte files, you can create a svelte.config.js file so that they are preprocessed by Svelte, and the Svelte IDE extension can correctly parse the Svelte files.

import { vitePreprocess } from '@astrojs/svelte';

export default {
  preprocess: vitePreprocess(),
};

当你运行 astro add svelte 时，该配置文件将自动为你添加。有关 vitePreprocess 的更多详细信息，请参阅 @sveltejs/vite-plugin-svelte 文档。

¥This config file will be automatically added for you when you run astro add svelte. See the @sveltejs/vite-plugin-svelte docs for more details about vitePreprocess.