前端Vue工程的版本信息生成方法、装置、设备和存储介质与流程

本公开涉及软件开发，尤其涉及一种前端vue工程的版本信息生成方法、装置、设备和存储介质。

背景技术：

1、随着前端代码的工程化，多人协作共同开发一个项目成为大趋势。在协作开发过程中每个开发人员均可以将当前构建出的vue工程发布至开发环境、测试环境、预发环境、生产环境。针对发布至上述环境的vue工程，并没有一种明确方式记录其对应的构建时间、构建环境、最后一次提交人等版本信息，这就导致一旦出现版本发布问题，就需要人为地登录代码托管平台追溯代码提交记录，找到最新一次的代码提交人，并通知其处理相关问题。这种方式投入的人力成本高，定位问题过于缓慢，从而影响整个项目开发效率。因此，如何为前端vue工程生成版本信息是本领技术人员亟待解决的技术问题。

技术实现思路

1、有鉴于此，本公开提出了一种前端vue工程的版本信息生成方法、装置、设备和存储介质，可以自动为前端vue工程插入版本信息并显示，这样，在出现版本发布问题时，便可以直接根据版本信息进行问题溯源，从而提高了项目开发效率。

2、根据本公开的第一方面，提供了一种前端vue工程的版本信息生成方法，包括：

3、响应打包控件的触发，对前端vue工程进行打包，得到第一html文件；

4、调用预先引入的版本信息生成插件，获取所述前端vue工程的项目信息和git提交信息，基于所述项目信息和所述git提交信息生成所述前端vue工程的版本信息文件，并将所述版本信息文件注入到所述第一html文件中，得到第二html文件；

5、将包括所述第二html文件的打包产物部署至服务器端，以在客户端浏览器环境中展示所述前端vue工程的版本信息；

6、其中，所述版本信息生成插件与所述前端vue工程的构建工具相匹配。

7、在一种可能的实现方式中，在引入与所述前端vue工程的构建工具相匹配的版本信息生成插件时，包括：

8、响应初始化命令，由所述前端vue工程中读取工程信息文件；

9、对所述工程信息文件进行解析，确定所述前端vue工程的构建工具；

10、由所述前端vue工程中读取与所述构建工具相匹配的配置文件，并将与所述构建工具相匹配的插件信息插入至所述配置文件中，从而实现引入与所述前端vue工程的构建工具相匹配的版本信息生成插件的目的。

11、在一种可能的实现方式中，在对所述工程信息文件进行解析，确定所述前端vue工程的构建工具时，包括：

12、对所述工程信息文件中的开发环境依赖部分所包括的字符进行解析：

13、若所述开发环境依赖部分中包括字符vite，则确定所述前端vue工程的构建工具为vite工具；

14、若所述开发环境依赖部分中包括字符@vue/cli-service，则调用包管理工具npm对所述前端vue工程所依赖的webpack版本进行解析，得到webpack版本信息，并基于所述webpack版本信息确定构建所述前端vue工程的构建工具。

15、在一种可能的实现方式中，在获取所述前端vue工程的项目信息时，包括：

16、由所述前端vue工程中读取工程信息文件；

17、对所述工程信息文件进行解析，得到所述工程信息文件对应的第一字符串；

18、基于预设的解析函数，由所述第一字符串中提取出所述项目信息。

19、在一种可能的实现方式中，在获取所述前端vue工程的git提交信息时，基于预先配置的获取git提交信息的命令脚本实现。

20、在一种可能的实现方式中，在基于所述项目信息和所述git提交信息生成所述前端vue工程的版本信息文件时，包括：

21、获取预先构建的版本信息文件模板；

22、将所述项目信息和所述git提交信息填入所述版本信息文件模板中的对应位置，得到版本信息文件。

23、在一种可能的实现方式中，在将所述版本信息文件注入到所述第一html文件中时，包括：

24、对所述版本信息文件进行解译，得到所述版本信息文件对应的第二字符串；

25、在所述第二字符串之前追加<script>标签，在所述第二字符串之后追加</script>标签，得到第三字符串；

26、查找所述html文件中的</body>标签，并将所述第三字符串插入至所述</body>标签之前，从而实现将所述版本信息文件注入到第一所述html文件中。

27、根据本公开的第二方面，提供了一种前端vue工程的版本信息生成装置，包括：

28、第一html文件生成模块，用于响应打包控件的触发，对前端vue工程进行打包，得到第一html文件；

29、第二html文件生成模块，用于调用预先引入的版本信息生成插件，获取所述前端vue工程的项目信息和git提交信息，基于所述项目信息和所述git提交信息生成所述前端vue工程的版本信息文件，并将所述版本信息文件注入到所述html文件中，得到第二html文件；

30、版本信息生成模块，用于将包括所述第二html文件的打包产物部署至服务器端，以在客户端浏览器环境中展示所述前端vue工程的版本信息；

31、其中，所述版本信息生成插件与所述前端vue工程的构建工具相匹配。

32、根据本公开的第三方面，提供了一种前端vue工程的版本信息生成设备，包括：处理器；用于存储处理器可执行指令的存储器；其中，所述处理器被配置为执行本公开第一方面所述的方法。

33、根据本公开的第四方面，提供了一种非易失性计算机可读存储介质，其上存储有计算机程序指令，其中，所述计算机程序指令被处理器执行时实现本公开第一方面所述的方法。

34、本公开提供了一种前端vue工程的版本信息生成方法，包括响应打包控件的触发，对前端vue工程进行打包，得到第一html文件；调用预先引入的版本信息生成插件，获取前端vue工程的项目信息和git提交信息，基于项目信息和git提交信息生成前端vue工程的版本信息文件，并将版本信息文件注入到第一html文件中，得到第二html文件；将包括第二html文件的打包产物部署至服务器端，以在客户端浏览器环境中展示前端vue工程的版本信息；其中，版本信息生成插件与前端vue工程的构建工具相匹配。通过本申请的方法可以自动为前端vue工程插入版本信息并显示，这样，在出现版本发布问题时，便可以直接根据版本信息进行问题溯源，从而提高了项目开发效率。

35、根据下面参考附图对示例性实施例的详细说明，本公开的其它特征及方面将变得清楚。

技术特征：

1.一种前端vue工程的版本信息生成方法，其特征在于，包括：

2.根据权利要求1所述的方法，其特征在于，在引入与所述前端vue工程的构建工具相匹配的版本信息生成插件时，包括：

3.根据权利要求2所述的方法，其特征在于，在对所述工程信息文件进行解析，确定所述前端vue工程的构建工具时，包括：

4.根据权利要求1所述的方法，其特征在于，在获取所述前端vue工程的项目信息时，包括：

5.根据权利要求1所述的方法，其特征在于，在获取所述前端vue工程的git提交信息时，基于预先配置的获取git提交信息的命令脚本实现。

6.根据权利要求1所述的方法，其特征在于，在基于所述项目信息和所述git提交信息生成所述前端vue工程的版本信息文件时，包括：

7.根据权利要求1所述的方法，其特征在于，在将所述版本信息文件注入到所述第一html文件中时，包括：

8.一种前端vue工程的版本信息生成装置，其特征在于，包括：

9.一种前端vue工程的版本信息生成设备，其特征在于，包括：

10.一种非易失性计算机可读存储介质，其上存储有计算机程序指令，其特征在于，所述计算机程序指令被处理器执行时实现权利要求1至7中任意一项所述的方法。

技术总结
本公开提供了一种前端Vue工程的版本信息生成方法、装置、设备和存储介质，该方法包括响应打包控件的触发，对前端Vue工程进行打包，得到第一html文件；调用预先引入的版本信息生成插件，获取前端Vue工程的项目信息和GIT提交信息，基于项目信息和GIT提交信息生成前端Vue工程的版本信息文件，并将版本信息文件注入到第一html文件中，得到第二html文件；将包括第二html文件的打包产物部署至服务器端，以在客户端浏览器环境中展示前端Vue工程的版本信息；其中，版本信息生成插件与前端Vue工程的构建工具相匹配。通过本申请的方法可以自动为前端Vue工程插入版本信息并显示，这样，在出现版本发布问题时，便可以直接根据版本信息进行问题溯源，从而提高了项目开发效率。

技术研发人员：赵艺众,陆英怀
受保护的技术使用者：北京中诺链捷数字科技有限公司
技术研发日：
技术公布日：2024/1/25