常用官方插件使用

Vite 官方提供多个插件支持主流框架和增强功能。

Vue 插件

JavaScript

import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()]
})

React 插件

JavaScript

import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()]
})

Legacy 插件

JavaScript

import legacy from '@vitejs/plugin-legacy'

export default defineConfig({
  plugins: [
    legacy({
      targets: ['ie >= 11'],
      additionalLegacyPolyfills: ['regenerator-runtime/runtime']
    })
  ]
})

注意：legacy 插件会生成兼容旧浏览器的额外构建产物。

官方插件列表

插件	功能
@vitejs/plugin-vue	Vue 3 单文件组件支持
@vitejs/plugin-vue-jsx	Vue JSX 支持
@vitejs/plugin-react	React + Fast Refresh
@vitejs/plugin-react-swc	React + SWC 编译
@vitejs/plugin-legacy	旧浏览器兼容支持

插件配置选项

JavaScript

// Vue 插件选项
vue({
  include: [/\.vue$/],
  isProduction: false
})

// React 插件选项
react({
  babel: {
    // Babel 配置
  }
})

安装官方插件

Bash

# Vue 项目
npm add -D @vitejs/plugin-vue

# React 项目
npm add -D @vitejs/plugin-react

# Legacy 支持
npm add -D @vitejs/plugin-legacy

插件顺序

JavaScript

export default defineConfig({
  plugins: [
    vue(),           // 框架插件优先
    legacy(),        // 兜底插件放后
  ]
})

要点总结

@vitejs/plugin-vue 支持 Vue 3
@vitejs/plugin-react 支持 React
@vitejs/plugin-legacy 兼容旧浏览器
插件按功能顺序配置

📝 发现内容有误？点击此处直接编辑