使用createVitePlugins管理vite插件

李, 若俞 • 2024年4月2日下午10:35 • 前端开发 • 阅读 500

• 使用createVitePlugins管理vite插件

• 操作步

• 安装依赖
• 创建存储插件文件目录
• 创建index.js
• 配置插件
• 在index.js引入插件
• 在vite.config.js 使用插件

使用createVitePlugins管理vite插件

在 Vite 项目中，createVitePlugins 函数通常是由某些框架或者项目模板提供的一个辅助函数，用于根据项目的具体需求来生成和组织一系列 Vite 插件列表。

例如，在 Vue CLI 创建的 Vite + Vue3 项目或是 Nuxt3 等项目中，可能会提供这样一个工厂函数来简化插件配置。

尽管 createVitePlugins 不是 Vite 官方提供的 API，但其基本使用方式基本一致。

更多详细内容，请微信搜索“前端爱好者“， 戳我查看 。

操作步骤

安装依赖

npm i -D unplugin-auto-import

创建存储插件文件目录

一定要和src平级

vite/plugins // 目录

创建index.js

import vue from '@vitejs/plugin-vue'
import createCompression from './compression' 
export default function createVitePlugins(viteEnv, isBuild = false) {
  const vitePlugins = [vue()] 
  isBuild && vitePlugins.push(...createCompression(viteEnv))
  return vitePlugins
}

配置插件

auto-import.js

// 减少每一个页面都需要引用一些参数 
// 咧入这些常用的
// import {ref,computed} from 'vue';
import autoImport from 'unplugin-auto-import/vite'

export default function createAutoImport() {
  return autoImport({
      imports: [
          'vue',
          'vue-router',
          'pinia'
      ],
      dts: false
  })
}

在index.js引入插件

import vue from '@vitejs/plugin-vue'
import createCompression from './compression'
import createAutoImport from './auto-import' // 引用插件
export default function createVitePlugins(viteEnv, isBuild = false) {
  const vitePlugins = [vue()]
  vitePlugins.push(createAutoImport()) // 引用插件
  isBuild && vitePlugins.push(...createCompression(viteEnv))
  return vitePlugins
}

在vite.config.js 使用插件

import { defineConfig, loadEnv } from "vite";
import path from "path";
// 引入vite插件
import createVitePlugins from './vite/plugins'

export default defineConfig(({ mode, command }) => {
  const env = loadEnv(mode, process.cwd());
  const { VITE_APP_ENV } = env;
  return { 
    // 使用插件
    plugins: createVitePlugins(env, command === "build"), 
  };
});