使用插件

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 plugins will be ignored, which can be used to easily activate or deactivate plugins.

查找插件

NOTE

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

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

您还可以使用NPM搜索Vite-Plugin的VITE插件或NPM搜索汇总插件的NPM搜索，以遵循推荐约定的插件。

强制插件顺序

为了与某些 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 指南以获取详细信息。

Conditional Application

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

vite.config.js

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

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

构建插件

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

使用插件 ​

添加插件 ​

查找插件 ​

强制插件顺序 ​

Conditional Application ​

构建插件 ​

使用插件

添加插件

查找插件

强制插件顺序

Conditional Application

构建插件