【技术实现步骤摘要】
本专利技术涉及数据处理，尤其涉及一种项目的分包打包方法及系统。
技术介绍
1、产品或系统在随着业务的发展和迭代过程中，其前端工程内包含的代码量和逻辑也愈加复杂，而日益扩大的工程对于项目的启动时间、打包时间、可维护性、用户体验等有着直接影响。
2、在项目开发时，现有技术方案会将所有页面共用main.js、router和store，所有页面都存放在同一个pages文件夹下；在项目构建时，现有技术方案会将所有代码统一打包成一个bound.js文件。基于此，基于此，首先，现有技术部署的客户端必须等待整个项目或应用的代码包都加载完毕才能启动运行；其次，现有技术是将所有资源都打成一个包，如有迭代需求，即使修改一个字符，客户端都需要重新下载整个代码包，缓存命中率极低。其次，现有技术所有业务运行都在同一个主包中，不论访问是独立模块还是公共模块，都需要先下载主包。
3、综上所述，现有的项目存在维护性和扩展性差的问题。
技术实现思路
1、有鉴于此，本专利技术实施例提供一种项目的分包打包方法及系统，以解决采用现有项目存在维护性和扩展性差的问题。
2、为解决上述问题，本专利技术实施例提供如下技术方案：
3、本专利技术实施例第一方面公开了一种项目的分包打包方法，所述方法包括：
4、基于预先利用vue和webpack完成的webbpack配置文件、package.json文件和文件目录对目标项目执行打包构建命令，得到构建好的子项目分包；
6、创建vue项目；
7、利用webpack工具在所述vue项目的项目根目录下创建用于存储webbpack配置文件的vue.config.js文件；
8、在所述vue.config.js文件中配置对所述vue项目进行分包打包时所需的关键代码，得到webbpack配置文件；
9、创建子项目文件夹，以及配置子项目路由文件，得到完成配置的文件目录；
10、配置package.json文件，得到完成配置的package.json文件。
11、可选的，在所述vue.config.js文件中配置对所述vue项目进行分包打包时所需的关键代码，得到webbpack配置文件，包括：
12、在所述vue.config.js文件中配置获取子项目的子项目名称和子项目打包成功后的输出文件的名称的配置项；
13、在所述vue.config.js文件中配置打包入口、打包出口和所述输出文件存放位置的相对路径；
14、在所述vue.config.js文件中配置splitchunks代码，所述splitchunks代码具有分割功能；
15、将完成配置的所述vue.config.js文件作为webbpack配置文件。
16、可选的，还包括：
17、获取所述vue项目的配置需求，基于所述配置需求在所述vue.config.js文件中配置项目需求配置项。
18、可选的，所述创建子项目文件夹，以及配置子项目路由文件，得到完成配置的文件目录，包括：
19、在所述vue项目中存储源代码的src文件夹中创建projects项目文件夹，所述projects项目文件夹用于存储所述vue项目中所有业务模块的代码；
20、创建每个所述业务模块对应的子项目文件夹，所述子项目文件夹的名称为子项目名称；
21、在每个所述子项目文件夹中创建所属业务模块的入口文件、路由和状态管理；
22、在每个所述子项目文件夹中添加pages文件夹，完成创建子项目文件夹，所述pages文件夹用于存储与所属子项目相关的vue页面；
23、在所述子项目文件夹中创建的路由对应子项目路由配置中添加满足webbpack代码分割要求的分包代码，得到完成配置的文件目录。
24、可选的，配置package.json文件，得到完成配置的package.json文件，包括：
25、根据子项目名称为所有子项目进行分包、打包和运行命令的配置，得到完成配置的package.json文件，其中，所述进行分包、打包和运行命令的配置过程中所涉及到的文件夹名称与所述webbpack配置文件、子项目文件夹中配置相关的文件夹的文件夹名称一致。
26、本专利技术实施例第二方面公开了一种项目的分包打包系统，所述系统包括：
27、分包打包模块，用于基于预先利用vue和webpack完成的webbpack配置文件、package.json文件和文件目录对项目执行打包构建命令，得到构建好的子项目分包；
28、预构建模块，包括：
29、项目创建单元，用于创建vue项目；
30、webbpack配置单元，用于利用webpack工具在所述vue项目的项目根目录下创建用于存储webbpack配置文件的vue.config.js文件，以及在所述vue.config.js文件中配置对所述vue项目进行分包打包时所需的关键代码，得到webbpack配置文件；
31、文件目录配置单元，用于创建子项目文件夹，以及配置子项目路由文件，得到完成配置的文件目录；
32、package.json配置单元，用于配置package.json文件，得到完成配置的package.json文件。
33、可选的，webbpack配置单元具体用于：
34、在所述vue.config.js文件中配置获取子项目的子项目名称和子项目打包成功后的输出文件的名称的配置项；在所述vue.config.js文件中配置打包入口、打包出口和所述输出文件存放位置的相对路径；在所述vue.config.js文件中配置splitchunks代码，所述splitchunks代码具有分割功能；将完成配置的所述vue.config.js文件作为webbpack配置文件。
35、可选的，所述webbpack配置单元，还用于：
36、获取所述vue项目的配置需求，基于所述配置需求在所述vue.config.js文件中配置项目需求配置项。
37、可选的，所述文件目录配置单元具体用于：
38、在所述vue项目中存储源代码的src文件夹中创建projects项目文件夹，所述projects项目文件夹用于存储所述vue项目中所有业务模块的代码；创建每个所述业务模块对应的子项目文件夹，所述子项目文件夹的名称为子项目名称；在每个所述子项目文件夹中创建所属业务模块的入口文件、路由和状态管理；在每个所述子项目文件夹中添加pages文件夹，完成创建子项目文件夹，所述pages文件夹用于存储与所属子项目相关的vue页面；在所述子项目文件夹中创建的路由对应子项目路由配置中添加满足webbpack代码分割要求的分包代码本文档来自技高网...
【技术保护点】
1.一种项目的分包打包方法，其特征在于，所述方法包括：
2.根据权利要求1所述的方法，其特征在于，在所述vue.config.js文件中配置对所述Vue项目进行分包打包时所需的关键代码，得到webbpack配置文件，包括：
3.根据权利要求2所述的方法，其特征在于，还包括：
4.根据权利要求1所述的方法，其特征在于，所述创建子项目文件夹，以及配置子项目路由文件，得到完成配置的文件目录，包括：
5.根据权利要求1至4中任一项所述的方法，其特征在于，配置package.json文件，得到完成配置的package.json文件，包括：
6.一种项目的分包打包系统，其特征在于，所述系统包括：
7.根据权利要求6所述的系统，其特征在于，webbpack配置单元具体用于：
8.根据权利要求7所述的系统，其特征在于，所述webbpack配置单元，还用于：
9.根据权利要求6所述的系统，其特征在于，所述文件目录配置单元具体用于：
10.根据权利要求6至9中任一项所述的系统，其特征在于，所述
...【技术特征摘要】
1.一种项目的分包打包方法，其特征在于，所述方法包括：
2.根据权利要求1所述的方法，其特征在于，在所述vue.config.js文件中配置对所述vue项目进行分包打包时所需的关键代码，得到webbpack配置文件，包括：
3.根据权利要求2所述的方法，其特征在于，还包括：
4.根据权利要求1所述的方法，其特征在于，所述创建子项目文件夹，以及配置子项目路由文件，得到完成配置的文件目录，包括：
5.根据权利要求1至4中任一项所述的方法，其特征在于，配置package....
【专利技术属性】
技术研发人员：陈杰，
申请(专利权)人：中国农业银行股份有限公司，
类型：发明
国别省市：
还没有人留言评论。发表了对其他浏览者有用的留言会获得科技券。