第四十三章-Vite配置-plugin

1.说明

官方说明

原文：

类型： (Plugin | Plugin[])[]

将要用到的插件数组。查看 插件 API 获取 Vite 插件的更多细节。

2.配置插件

它接收一个插件对象，或者一个插件数组。由于我们需要配置很多插件，而每一个插件的配置也不一样，所以我们把插件数组封装到一个方法中去。统一配置VbenAdmin的插件。

2.1.创建生成插件数组方法

build\vite\plugin\index.ts：

import type { Plugin } from 'vite';
import type { ViteEnv } from '../../utils';

export function createVitePlugins(viteEnv: ViteEnv, isBuild: boolean) {
  const { VITE_USE_IMAGEMIN, VITE_USE_MOCK, VITE_LEGACY, VITE_BUILD_COMPRESS } = viteEnv;

  const vitePlugins: (Plugin | Plugin[])[] = [];
  return vitePlugins;
}

后续章节配置vitePlugins这个数组。

2.2.配置Vite插件

vite.config.ts：

// ...
import { createVitePlugins } from './build/vite/plugin';
// ...
export default ({ command, mode }: ConfigEnv): UserConfig => {
  // ...

  return {
    // ...
    // 项目使用的vite插件。数量大，单独提取管理
    plugins: createVitePlugins(viteEnv, isBuild),

    // ...
  };
};

上一章

第四十二章-Vite的颜色

下一章

第四十四章-Vite插件-@vitejs-plugin-vue