使用插件

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 中已经覆盖到了。

查看 Plugins 章节 获取官方插件信息。社区插件列表请参见 awesome-vite。

你也可以使用此 npm Vite 插件搜索链接 来找到一些遵循了 推荐约定 的 Vite 插件，或者通过 npm Rollup 插件搜索链接 获取 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) 模式中都会调用。如果插件在服务或构建期间按需使用，请使用 apply 属性指明它们仅在 'build' 或 'serve' 模式时调用：

// vite.config.js
import typescript2 from 'rollup-plugin-typescript2'
import { defineConfig } from 'vite'

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

创建插件

阅读 插件 API 指引 文档了解如何创建插件。

请查看 使用插件 一章了解更多插件使用方式。

官方插件

@vitejs/plugin-vue

• 提供 Vue 3 单文件组件支持。

@vitejs/plugin-vue-jsx

• 提供 Vue 3 JSX 支持（通过 专用的 Babel 转换插件）。

@vitejs/plugin-vue2

• 提供对 Vue 2.7 的单文件组件支持。

@vitejs/plugin-vue2-jsx

• 提供对 Vue 2.7 JSX 对支持（通过 dedicated Babel transform）。

@vitejs/plugin-react

• 使用 esbuild 和 Babel，使用一个微小体积的包脚注可以实现极速的 HMR，同时提升灵活性，能够使用 Babel 的转换管线。在构建时没有使用额外的 Babel 插件，只使用了 esbuild。

@vitejs/plugin-react-swc

• 在开发时会将 Babel 替换为 SWC。在构建时，若使用了插件则会使用 SWC+esbuild，若没有使用插件则仅会用到 esbuild。对不需要非标准 React 扩展的大型项目，冷启动和模块热替换（HMR）将会有显著提升。

@vitejs/plugin-legacy

• 为打包后的文件提供传统浏览器兼容性支持。

社区插件

查看 awesome-vite - 你也可以通过 PR 的方式将你的插件添加到此列表中。

Rollup 插件

Vite 插件 是 Rollup 插件接口的一种扩展。查看 Rollup 插件兼容性章节 获取更多信息。