配置 Vite 和插件

运行环境: node

该文件中的代码将仅在 Node.js 环境中运行，您可以访问 Node 的 API。

Slidev 底层由 Vite 驱动。这意味着你可以利用 Vite 强大的插件系统来进一步自定义你的幻灯片。

如果你有 vite.config.ts，它将被识别并与 Slidev、主题和插件提供的 Vite 配置合并。

配置内部插件

Slidev 内部向 Vite 添加了以下插件：

要配置上面列出的内置插件，请创建包含以下内容的 vite.config.ts。请注意，Slidev 对这些插件有一些默认配置，此用法将覆盖其中一些配置，这可能会导致应用程序崩溃。请将此视为高级功能，并确保在继续之前了解你在做什么。

vite.config.ts

import { defineConfig
 } from 'vite'

export default defineConfig
({
  slidev
: {
    vue
: {
      /* vue 选项 */
    },
    markdown
: {
      /* markdown-it 选项 */
      markdownItSetup
(md
) {
        /* 自定义 markdown-it 插件 */
        md
.use
(MyPlugin
)
      },
    },
    /* 其他插件的选项 */
  },
})

查看类型声明了解更多选项。

WARNING

不允许重新添加 Slidev 内部已使用的插件。例如，不要这样做：

import Vue
 from '@vitejs/plugin-vue'
import { defineConfig
 } from 'vite'

export default defineConfig
({
  plugins
: [
    Vue
({
      /* vue 选项 */
    })
  ],
})

请按照上述描述将 Vue 选项传递给 slidev.vue 字段

基于幻灯片数据添加自定义插件

通常你可以在 vite.config.ts 中添加 Vite 插件（见上文）。但是，如果你想根据幻灯片数据添加插件，需要添加 ./setup/vite-plugins.ts 文件，内容如下：

import { defineVitePluginsSetup
 } from '@slidev/types'

export default defineVitePluginsSetup
((options
) => {
  return [
    // 你的插件在这里
    // 幻灯片数据可通过 options.data.slides 访问
  ]
})

配置 Vite 和插件 ​

配置内部插件 ​

基于幻灯片数据添加自定义插件 ​

配置 Vite 和插件

配置内部插件

基于幻灯片数据添加自定义插件