跳转到内容
Astro Astro

@astrojs/svelte

此 Astro 集成 为你的 Svelte 组件启用服务器端渲染和客户端注入。它支持 Svelte 3、Svelte 4 以及 Svelte 5 版本（实验性）。

安装

段落标题 安装

有两种方式可以将集成添加到你的项目当中，先让我们从最方便的方式来入手！

astro add 命令

段落标题 astro add 命令

Astro 包含来一个 CLI 工具来提供一等集成支持，astro add 这个命令将会：

  1. 安装所有必须的依赖和对等依赖（可选）
  2. 更新你的 astro.config.* 文件，以应用当前的集成（同样可选）

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

Terminal window
# 使用 NPM
npx astro add svelte
# 使用 Yarn
yarn astro add svelte
# 使用 PNPM
pnpm astro add svelte

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

手动安装依赖项

段落标题 手动安装依赖项

首先像下面这样安装 @astrojs/svelte 集成：

Terminal window
npm install @astrojs/svelte

大多数包管理器将会安装关联的对等依赖，如果你在启动 Astro 的时候仍然遇到 “Cannot find package ‘svelte’” 或者相似的警告，你将需要手动安装 Svelte：

Terminal window
npm install svelte

现在，使用 integrations 属性来应用你的集成到 astro.config.* 文件：

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


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

入门

段落标题 入门

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

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

疑难解答

段落标题 疑难解答

如需帮助，请查看我们在 Discord 上的 #support 频道。我们友好的支持小队成员随时为你提供帮助！

你也可以查看我们的 Astro 集成文档 以获取集成的更多信息。

贡献

段落标题 贡献

该 Astro 包是由核心团队维护的，欢迎提交 issue 和 PR！

选项

段落标题 选项

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

默认选项

段落标题 默认选项

此集成将以下默认选项传递给 Svelte 编译器：

const defaultOptions = {
  emitCss: true,
  compilerOptions: { dev: isDev, hydratable: true },
  preprocess: vitePreprocess(),
};

这些 emitCss、 compilerOptions.dev 和 compilerOptions.hydratable 选项对于构建过程来说是必传的，并且不能被赋值。

如果你传递自定义的 preprocess 选项，这将会覆盖 vitePreprocess() 的默认值。确保根据你的项目实际需求来开启预处理配置。

你可以通过在 astro.config.mjs 或者 svelte.config.js 文件中传递这个选项配置给 svelte 集成，这两种方式都将覆盖默认的 preprocess 设置：

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


export default defineConfig({
  integrations: [svelte({ preprocess: [] })],
});
svelte.config.js
export default {
  preprocess: [],
};

TypeScript 智能提示

段落标题 TypeScript 智能提示

添加于： @astrojs/svelte@2.0.0

如果你的文件中使用了像 TypeScript 或 SCSS 预处理器，你可以创建一个 svelte.config.js 文件，确保 Svelte IDE 拓展能够正确解析 Svelte 文件。

svelte.config.js
import { vitePreprocess } from '@astrojs/svelte';


export default {
  preprocess: vitePreprocess(),
};

当你运行 astro add svelte 指令的时候，将自动为你添加配置文件。

其他

UI 框架

SSR 适配器

其他