Web前端项目的定制化配置管理方法、电子设备及存储介质与流程

本发明涉及web前端开发的，尤其涉及一种web前端项目的定制化配置管理方法、电子设备及存储介质。

背景技术：

1、在现有的web前端项目开发中，不同用户的需求差异往往需要在代码层面进行硬编码，以满足各类个性化配置。这种做法不仅增加了代码的复杂度，还降低了代码的可维护性和可扩展性。传统的方法通常通过在代码中直接引入不同的配置文件来实现个性化需求，然而，这种方式在面对多用户、多配置的情况下，显得尤为笨拙和低效。每次需求的变更或新增用户的引入，都需要对代码进行较大的修改和重构，极大地增加了开发和维护的工作量。

2、此外，在项目的编译和打包阶段，传统方法无法灵活地根据不同用户的需求动态注入配置文件，导致编译结果冗余且效率低下。现有技术中，通过手动修改配置文件或在编译前预处理配置的方法，难以应对复杂的多用户环境，容易引发配置冲突和错误，进一步增加了开发成本和风险。

3、为了克服上述缺陷，需要一种新的web前端项目定制化配置管理方法，该方法能够在不增加代码复杂度的前提下，实现高效、灵活的用户个性化需求配置管理，并在运行和编译阶段动态注入差异化配置，从而提升项目的开发效率和可维护性。

技术实现思路

1、本发明的目的在于提供一种web前端项目的定制化配置管理方法、电子设备及存储介质，以解决现有技术开发成本高且无法应对复杂多用户环境的问题。

2、为实现上述发明目的之一，本发明一实施方式提供一种web前端项目的定制化配置管理方法，所述方法包括，

3、在编译阶段，通过在项目根目录创建customconfig文件夹，并在customconfig文件夹内增加入口文件index.js，通过yargs模块解析命令行参数，根据客户编号动态引入配置文件并暴露给编译器使用；

4、使用htmlwebpackplugin和webpack的defineplugin将配置信息注入到html模板的options.custom_config和打包构建环境的变量process.env.custom_config中，并在jenkins中增加custom环境变量，实现差异化编译；

5、在运行阶段，通过在项目根目录增加customconfig文件夹和入口文件index.js，动态引入差异化属性的配置信息difffeaturecustomconfig和组件的配置信息diffcomponentcustomconfig；

6、根据用户登录所带的客户编号，使用动态引入的配置模块来决定功能和组件的显示与否，实现功能和组件的差异化管理。

7、作为本发明一实施方式的进一步改进，所述方法还包括，所述通过yargs模块解析命令行参数的步骤包括：

8、使用const yargs=require('yargs/yargs')和const{hidebin}=require('yargs/helpers')引入yargs模块；

9、通过const argv=yargs(hidebin(process.argv)).argv解析命令行参数；

10、获取客户编号custom并通过const{custom='a'}=argv获取客户编号，默认为a。

11、作为本发明一实施方式的进一步改进，所述方法还包括，所述动态引入配置文件的步骤包括：

12、使用const customconfig=require(./${custom}.js)根据客户编号引入对应的配置文件；

13、将配置信息通过module.exports=customconfig暴露给编译器使用。

14、作为本发明一实施方式的进一步改进，所述方法还包括，所述在jenkins中增加custom环境变量的步骤包括：

15、在jenkins的构建配置中增加custom环境变量；

16、使用所述custom环境变量在编译阶段控制不同客户的差异化编译过程。

17、作为本发明一实施方式的进一步改进，所述方法还包括，动态引入差异化属性配置信息difffeaturecustomconfig的步骤包括：

18、在项目根目录的customconfig文件夹中创建difffeaturecustomconfig.js文件；

19、在difffeaturecustomconfig.js文件中定义功能差异化的详细配置。

20、作为本发明一实施方式的进一步改进，所述方法还包括，动态引入组件配置信息diffcomponentcustomconfig的步骤包括：

21、在项目根目录的customconfig文件夹中创建diffcomponentcustomconfig.js文件；

22、在diffcomponentcustomconfig.js文件中定义组件差异化的详细配置。

23、作为本发明一实施方式的进一步改进，所述方法还包括，所述使用动态引入的配置模块决定功能和组件显示的步骤包括：

24、在代码中通过import{difffeaturecustomconfig,diffcomponentcustomconfig}from'@customconfig'动态引入配置模块；

25、使用配置模块中的信息，通过条件判断实现不同客户功能和组件的显示与否。

26、作为本发明一实施方式的进一步改进，所述方法还包括，当存在新增的客户编号和差异化需求时，通过在customconfig文件夹中新增或修改相应的配置文件实现。

27、为实现上述发明目的之一，本发明一实施例还提供一种电子设备，包括存储器以及处理器，所述存储器中存储可在所述处理器上运行的计算机程序，所述处理器上执行程序时实现如上所述web前端项目的定制化配置管理方法中的步骤。

28、为实现上述发明目的之一，本发明一实施例还提供一种存储介质，所述存储介质存储有计算机程序，所述计算机程序被处理器执行时实现如上所述web前端项目的定制化配置管理方法中的步骤。

29、本发明与现有技术相比，本发明提供的一种web前端项目的定制化配置管理方法、电子设备及存储介质，通过在编译阶段和运行阶段动态引入配置文件，实现了web前端项目的定制化需求。其优点在于简化了多客户差异化管理，提升了开发和维护效率，且新增客户和差异化需求仅需修改配置文件即可，无需更改核心代码。

技术特征：

1.一种web前端项目的定制化配置管理方法，其特征在于：包括，

2.根据权利要求1所述的web前端项目的定制化配置管理方法，其特征在于：所述通过yargs模块解析命令行参数的步骤包括：

3.根据权利要求2所述的web前端项目的定制化配置管理方法，其特征在于：所述动态引入配置文件的步骤包括：

4.根据权利要求3所述的web前端项目的定制化配置管理方法，其特征在于：所述在jenkins中增加custom环境变量的步骤包括：

5.根据权利要求4所述的web前端项目的定制化配置管理方法，其特征在于：动态引入差异化属性配置信息difffeaturecustomconfig的步骤包括：

6.根据权利要求5所述的web前端项目的定制化配置管理方法，其特征在于：动态引入组件配置信息diffcomponentcustomconfig的步骤包括：

7.根据权利要求6所述的web前端项目的定制化配置管理方法，其特征在于：所述使用动态引入的配置模块决定功能和组件显示的步骤包括：

8.根据权利要求1所述的web前端项目的定制化配置管理方法，其特征在于：还包括，

9.一种电子设备，包括存储器以及处理器，其特征在于：所述存储器中存储可在所述处理器上运行的计算机程序，所述处理器上执行程序时实现如权利要求1-8任意一项所述web前端项目的定制化配置管理方法中的步骤。

10.一种存储介质，所述存储介质存储有计算机程序，其特征在于：所述计算机程序被处理器执行时实现如权利要求1-8任意一项所述web前端项目的定制化配置管理方法中的步骤。

技术总结本发明涉及一种Web前端项目的定制化配置管理方法、电子设备及存储介质，包括在编译阶段，通过在项目根目录创建CUSTOMConfig文件夹，并在CUSTOMConfig文件夹内增加入口文件index.js，通过yargs模块解析命令行参数，根据客户编号动态引入配置文件并暴露给编译器使用；使用HtmlWebpackPlugin和Webpack的DefinePlugin将配置信息注入到HTML模板的options.CUSTOM_CONFIG和打包构建环境的变量process.env.CUSTOM_CONFIG中，并在Jenkins中增加CUSTOM环境变量，实现差异化编译；在运行阶段，通过在项目根目录增加CUSTOMConfig文件夹和入口文件index.js，动态引入差异化属性的配置信息diffFeatureCUSTOMConfig和组件的配置信息diffComponentCUSTOMConfig；根据用户登录所带的客户编号，使用动态引入的配置模块来决定功能和组件的显示与否，实现功能和组件的差异化管理。本发明实现了Web前端项目的定制化需求，同时提升了开发和维护效率。技术研发人员：麦淼,范玉平,张桂梅,谭涛受保护的技术使用者：广东南方智媒科技有限公司技术研发日：技术公布日：2025/1/6