项目插件

fuse.js  ## 模糊搜索库
nprogress 进度条插件
vite-plugin-mock  vite下的mock插件
vite-plugin-svg-icons svg图标处理插件
@vueuse/core hooks插件
dayjs 日期处理插件
mathjs 浮点数精度处理
pinia-plugin-persistedstate pinia持久化插件
vue-jsonp
dotenv 多环境变量组合
patch-package 包源码修改

dotenv 公用环境变量和多页面环境变量融合插件

1.根目录新建env-plugin.js

import dotenv from 'dotenv';
import { resolve } from 'path';

/**
 *用于加载多个环境变量文件的插件。
 * @param {Object} options 配置对象，可选。
 * @param {Array} options.directories 目录数组，用于存放.env文件，可选，默认为空数组。
 * @return {Object} 返回一个包含name和config属性的对象，其中config函数用于配置加载环境变量。
 */
export default function envPlugin(options = {}) {
  // 解构options中的directories属性，默认为空数组
  const { directories = [] } = options;

  return {
    name: 'env-plugin', // 插件名称
    config(config, { mode }) {
      directories.forEach(directory => {
        // 根据当前mode解析.env文件的路径，并加载配置
        const envPath = resolve(directory, `.env.${mode}`);
        dotenv.config({ path: envPath });
      });

      // 返回原始配置对象
      return config;
    },
  };
}

2.vite.config.js中引入插件并配置

import envPlugin from './env-plugin.js';

export default ({ mode }) => {
  return defineConfig({
     plugins:[ 
         envPlugin({
            // 根目录下的envConfig（目录含有各个环境变量文件）+ 某个单页面应用
            directories: [`./envConfig`, `./src/pages/${npmConfigPage}`], // 指定多个目录
          }),
      ]
  })
}

窗口对话框插件 inquirer shelljs