使用插件

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 也接受包含多个插件作为单个元素的预设。这对于使用多个插件实现的复杂功能（如框架集成）很有用。该数组将在内部扁平化。

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

查找插件

注意

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 指南，了解详细信息。

条件应用

默认情况下，插件会在服务和构建时都调用。如果插件需要在服务或构建期间有条件地应用，请使用 apply 属性仅在 'build' 或 'serve' 期间调用它们

vite.config.js

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

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

构建插件

查看插件 API 指南，了解有关创建插件的文档。