使用插件

Vite 可以通过插件进行扩展，这些插件基于 Rollup 良好设计的插件接口，并提供了一些额外的 Vite 特定选项。这意味着 Vite 用户可以依赖于成熟的 Rollup 插件生态系统，同时也可以根据需要扩展开发服务器和 SSR 功能。

添加插件

要使用插件，需要将其添加到项目的 devDependencies 中，并在 vite.config.js 配置文件的 plugins 数组中包含它。例如，要提供对旧版浏览器的支持，可以使用官方的 @vitejs/plugin-legacy

$ npm add -D @vitejs/plugin-legacy

vite.config.js

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

export default defineConfig({
  plugins: [
    legacy({
      targets: ['defaults', 'not IE 11'],
    }),
  ],
})

plugins 还接受预设，其中包括多个插件作为单个元素。这对于使用多个插件实现的复杂功能（如框架集成）非常有用。数组将在内部被扁平化。

虚假插件将被忽略，这可以用来轻松激活或停用插件。

查找插件

注意

Vite 旨在为常见的 Web 开发模式提供开箱即用的支持。在搜索 Vite 或兼容的 Rollup 插件之前，请查看 特性指南。在 Rollup 项目中需要插件的许多情况下，Vite 已经涵盖了这些情况。

查看 插件部分 以获取有关官方插件的信息。社区插件列在 awesome-vite 中。

您还可以使用 npm 搜索 vite-plugin 查找遵循 推荐约定 的 Vite 插件，或使用 npm 搜索 rollup-plugin 查找 Rollup 插件。

强制插件顺序

为了与某些 Rollup 插件兼容，可能需要强制插件的顺序或仅在构建时应用。这应该是 Vite 插件的实现细节。您可以使用 enforce 修饰符强制插件的位置

• pre：在 Vite 核心插件之前调用插件
• 默认：在 Vite 核心插件之后调用插件
• post：在 Vite 构建插件之后调用插件

vite.config.js

import image from '@rollup/plugin-image'
import { defineConfig } from 'vite'

export default defineConfig({
  plugins: [
    {
      ...image(),
      enforce: 'pre',
    },
  ],
})

查看 插件 API 指南 以获取详细信息。

条件应用

默认情况下，插件会在 serve 和 build 期间调用。在插件需要有条件地仅在 serve 或 build 期间应用的情况下，使用 apply 属性仅在 'build' 或 'serve' 期间调用它们

vite.config.js

import typescript2 from 'rollup-plugin-typescript2'
import { defineConfig } from 'vite'

export default defineConfig({
  plugins: [
    {
      ...typescript2(),
      apply: 'build',
    },
  ],
})

构建插件

查看 插件 API 指南 以获取有关创建插件的文档。