使用插件

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 指南，了解有关创建插件的文档。

使用插件 ​

添加插件 ​

查找插件 ​

强制插件排序 ​

条件应用 ​

构建插件 ​