利用vite插件开发，实现工程化打包，建议收藏

news2024/9/21 4:38:31

为什么需要工程化打包？

vue3+vite的工程，普遍都会在项目public文件夹，创建一个config.js文件，存放一些配置态的数据，用于在产品上线后，可能会根据需要修改参数值，从而达到线上配置数据目的。

但是config.js文件中的配置数据，都是在工程打包后默认就已经生成。无法做到在打包过程中修改配置。

如果同一个产品出售给另一家公司，但是此公司要求某某功能的审核流程级别只有2级，而当前产品的审核级别默认配置是3级。

怎么办？也许你会想到，工程打包后再修改配置文件不就行了嘛。如果要修改有10个甚至更多的配置呢？修改一次还好，万一是迭代产品，后期维护每打包一次都需要修改哦，那不累死才怪！！！

有没有办法在打包后，vite将config.js文件内容修改呢？答案是有的！

利用vite插件功能，打包时传入一个标记，区分是哪个公司，插件再根据标记写入不同的值到config.js中。

具体实现如下，假设config.js内容是一个审核流程，A公司需要3级审核，B公司只需要2级审核。

// 审核流程
window.zspReviewConfig = {
    // 审核级别
    "max_level": 3
};

一、编写插件，新建3个文件如下图

configJsData.js

// public/config.js配置文件
export default {
    create(data) {

        return `// 审核流程
window.zspReviewConfig = {
    // 审核级别
    "max_level": ${data.max_level}
};`
    }
}

fsUtil.js负责写本地文件

import file from 'fs';

export default {
    write(data, buildOutDir) {
        const configJsPath = buildOutDir + '/config.js';
        console.log('config.js 路径 ---> ', configJsPath)

        file.writeFile(configJsPath, data, err => {
            if (err) {
                console.error('config.js 文件写入失败：' + err.message);
            }
            console.log('config.js 文件写入成功！');
        })
    }
}

vite-plugin-public-config.js负责定制A、B公司的默认功能

import fsUtil from "./fsUtil";
import configJsData from "./configJsData";

const pluginName = 'public-config';
export default function publicConfig(projectName) {
    // 路径
    let buildOutDir = '';
    // 功能清单
    const data = {max_level: 3}
    // 返回的是插件对象
    return {
        // 名称
        name: pluginName,
        apply: 'build',
        // 启动就调用
        buildStart() {
            switch (projectName) {
                case 'A': // A公司
                    data.max_level = 3;
                    break;
                case 'B': // B公司
                    data.max_level = 2;
                    break;
            }
        },

        writeBundle(options, bundle) {
            buildOutDir = options.dir;
        },

        closeBundle() {
            fsUtil.write(configJsData.create(data), buildOutDir);
        }
    }
}

二、修改vite构建器的配置文件

1、引用插件