使用插件

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

观看 Scrimba 上的交互式教程

添加插件

要使用插件，需要将其添加到项目的 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 也接受包含多个插件的预设（presets）作为单个元素。这对于通过多个插件实现复杂功能（例如框架集成）非常有用。数组内部会被自动展平。

虚假值（Falsy）的插件将被忽略，这可以用来方便地开启或关闭插件。

查找插件

注意

Vite 旨在为常见的 Web 开发模式提供开箱即用的支持。在寻找 Vite 或兼容的 Rollup 插件之前，请查看 功能指南。在 Rollup 项目中需要插件的许多场景，在 Vite 中已经涵盖了。

请查看 插件部分 以获取有关官方插件的信息。发布到 npm 的社区插件列在 Vite 插件注册表 中。

强制插件排序

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

• pre：在 Vite 核心插件之前调用插件
• default：在 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）时都会被调用。如果插件只需要在开发或构建时有条件地应用，请使用 apply 属性，将其设置为仅在 'build' 或 'serve' 时调用。

vite.config.js

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

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

构建插件

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