Vben Admin

插件

注意

Vite 旨在为常见的 web 开发工作提供开箱即用的支持。在搜索一个 Vite 或 Rollup 兼容插件之前，请先查看 功能指引。很多场景下，在 Rollup 项目中需要添加插件，而在 Vite 中已经内建支持了。

官方插件

@vitejs/plugin-vue

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

@vitejs/plugin-vue-jsx

@vitejs/plugin-react-refresh

  • 提供 React Fast Refresh 支持

@vitejs/plugin-legacy

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

vite-plugin

build\vite\plugin\index.ts

yarn add @vitejs/plugin-vue @vitejs/plugin-vue-jsx

    "@vitejs/plugin-vue": "^1.2.5",
    "@vitejs/plugin-vue-jsx": "^1.1.6",

src\components\Icon\src\IconPicker.vue
import svgIcons from 'virtual:svg-icons-names';

  "devDependencies": {
    "vite-plugin-compression": "^0.3.1",
    "vite-plugin-html": "^2.0.7",
    "vite-plugin-imagemin": "^0.4.1",
    "vite-plugin-mock": "^2.9.3",
    "vite-plugin-purge-icons": "^0.7.0",
    "vite-plugin-pwa": "^0.8.1",
    "vite-plugin-style-import": "^1.0.1",
    "vite-plugin-svg-icons": "^1.0.1",
    "vite-plugin-theme": "^0.8.1",

vite-plugin-theme

Vite plugin for dynamically changing the theme color of the interface

TIP

vite-plugin-xx 要至build\vite\plugin\ vitePlugins.push 加載 與到 tsconfig.json 設定 types

src\logics\theme\index.ts
yarn add vite-plugin-theme -D

build\vite\plugin\theme.ts viteThemePlugin

build\vite\plugin\index.ts

 //vite-plugin-theme
  vitePlugins.push(configThemePlugin(isBuild));

vite-plugin-svg-icons

yarn add vite-plugin-svg-icons -D

build\vite\plugin\index.ts

import { configSvgIconsPlugin } from './svgSprite';
  // vite-plugin-svg-icons
  vitePlugins.push(configSvgIconsPlugin(isBuild));

build\vite\plugin\svgSprite.ts

import SvgIconsPlugin from 'vite-plugin-svg-icons';
  const svgIconsPlugin = SvgIconsPlugin({
    iconDirs: [path.resolve(process.cwd(), 'src/assets/icons')],

src/main.ts

// Register icon sprite
import 'virtual:svg-icons-register';

IconPicker.vue:115 Uncaught ReferenceError: Cannot access 'Icon' before initialization at IconPicker.vue:115

Get all SymbolId

src\components\Icon\src\IconPicker.vue

import svgIcons from 'virtual:svg-icons-names';
// 使用前必須引入  import { SvgIcon } from '/@/components/Icon'; 見NPM官方文檔
// 但這在 src\views\sys\login\Login.vue 的 
// AppDarkModeToggle } from '/@/components/Application'; AppDarkModeToggle 之中
// 所以 import { AppLocalePicker, AppDarkModeToggle } from '/@/components/Application'; 要一併使用

社区插件

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

Rollup 插件

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