CN117421039B - 前端Vue工程的版本信息生成方法、装置、设备和存储介质 - Google Patents
前端Vue工程的版本信息生成方法、装置、设备和存储介质 Download PDFInfo
- Publication number
- CN117421039B CN117421039B CN202311746314.1A CN202311746314A CN117421039B CN 117421039 B CN117421039 B CN 117421039B CN 202311746314 A CN202311746314 A CN 202311746314A CN 117421039 B CN117421039 B CN 117421039B
- Authority
- CN
- China
- Prior art keywords
- information
- project
- file
- version information
- git
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Active
Links
- 238000000034 method Methods 0.000 title claims abstract description 58
- 238000010276 construction Methods 0.000 claims abstract description 55
- 238000012856 packing Methods 0.000 claims abstract description 22
- 238000011161 development Methods 0.000 claims abstract description 19
- 238000004806 packaging method and process Methods 0.000 claims abstract description 7
- 238000013515 script Methods 0.000 claims description 29
- 230000006870 function Effects 0.000 claims description 17
- 230000001419 dependent effect Effects 0.000 claims description 9
- 238000004590 computer program Methods 0.000 claims description 4
- 238000002347 injection Methods 0.000 claims description 2
- 239000007924 injection Substances 0.000 claims description 2
- 230000008569 process Effects 0.000 description 8
- 239000007787 solid Substances 0.000 description 8
- 238000010586 diagram Methods 0.000 description 4
- 230000008676 import Effects 0.000 description 3
- 230000004044 response Effects 0.000 description 3
- 238000012545 processing Methods 0.000 description 2
- 235000008694 Humulus lupulus Nutrition 0.000 description 1
- 238000012300 Sequence Analysis Methods 0.000 description 1
- 230000006399 behavior Effects 0.000 description 1
- 238000005516 engineering process Methods 0.000 description 1
- 230000006872 improvement Effects 0.000 description 1
- 238000009434 installation Methods 0.000 description 1
- 238000004519 manufacturing process Methods 0.000 description 1
- 238000012986 modification Methods 0.000 description 1
- 230000004048 modification Effects 0.000 description 1
- 238000012360 testing method Methods 0.000 description 1
- 230000001960 triggered effect Effects 0.000 description 1
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/70—Software maintenance or management
- G06F8/71—Version control; Configuration management
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/30—Creation or generation of source code
- G06F8/38—Creation or generation of source code for implementing user interfaces
-
- Y—GENERAL TAGGING OF NEW TECHNOLOGICAL DEVELOPMENTS; GENERAL TAGGING OF CROSS-SECTIONAL TECHNOLOGIES SPANNING OVER SEVERAL SECTIONS OF THE IPC; TECHNICAL SUBJECTS COVERED BY FORMER USPC CROSS-REFERENCE ART COLLECTIONS [XRACs] AND DIGESTS
- Y02—TECHNOLOGIES OR APPLICATIONS FOR MITIGATION OR ADAPTATION AGAINST CLIMATE CHANGE
- Y02P—CLIMATE CHANGE MITIGATION TECHNOLOGIES IN THE PRODUCTION OR PROCESSING OF GOODS
- Y02P90/00—Enabling technologies with a potential contribution to greenhouse gas [GHG] emissions mitigation
- Y02P90/30—Computing systems specially adapted for manufacturing
Landscapes
- Engineering & Computer Science (AREA)
- Software Systems (AREA)
- General Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Computer Security & Cryptography (AREA)
- Human Computer Interaction (AREA)
- Stored Programmes (AREA)
- Information Retrieval, Db Structures And Fs Structures Therefor (AREA)
Abstract
本公开提供了一种前端Vue工程的版本信息生成方法、装置、设备和存储介质，该方法包括响应打包控件的触发，对前端Vue工程进行打包，得到第一html文件；调用预先引入的版本信息生成插件，获取前端Vue工程的项目信息和GIT提交信息，基于项目信息和GIT提交信息生成前端Vue工程的版本信息文件，并将版本信息文件注入到第一html文件中，得到第二html文件；将包括第二html文件的打包产物部署至服务器端，以在客户端浏览器环境中展示前端Vue工程的版本信息；其中，版本信息生成插件与前端Vue工程的构建工具相匹配。通过本申请的方法可以自动为前端Vue工程插入版本信息并显示，这样，在出现版本发布问题时，便可以直接根据版本信息进行问题溯源，从而提高了项目开发效率。
Description
技术领域
本公开涉及软件开发技术领域，尤其涉及一种前端Vue工程的版本信息生成方法、装置、设备和存储介质。
背景技术
随着前端代码的工程化，多人协作共同开发一个项目成为大趋势。在协作开发过程中每个开发人员均可以将当前构建出的Vue工程发布至开发环境、测试环境、预发环境、生产环境。针对发布至上述环境的Vue工程，并没有一种明确方式记录其对应的构建时间、构建环境、最后一次提交人等版本信息，这就导致一旦出现版本发布问题，就需要人为地登录代码托管平台追溯代码提交记录，找到最新一次的代码提交人，并通知其处理相关问题。这种方式投入的人力成本高，定位问题过于缓慢，从而影响整个项目开发效率。因此，如何为前端Vue工程生成版本信息是本领技术人员亟待解决的技术问题。
发明内容
有鉴于此，本公开提出了一种前端Vue工程的版本信息生成方法、装置、设备和存储介质，可以自动为前端Vue工程插入版本信息并显示，这样，在出现版本发布问题时，便可以直接根据版本信息进行问题溯源，从而提高了项目开发效率。
根据本公开的第一方面，提供了一种前端Vue工程的版本信息生成方法，包括：
响应打包控件的触发，对前端Vue工程进行打包，得到第一html文件；
调用预先引入的版本信息生成插件，获取所述前端Vue工程的项目信息和GIT提交信息，基于所述项目信息和所述GIT提交信息生成所述前端Vue工程的版本信息文件，并将所述版本信息文件注入到所述第一html文件中，得到第二html文件；
将包括所述第二html文件的打包产物部署至服务器端，以在客户端浏览器环境中展示所述前端Vue工程的版本信息；
其中，所述版本信息生成插件与所述前端Vue工程的构建工具相匹配。
在一种可能的实现方式中，在引入与所述前端Vue工程的构建工具相匹配的版本信息生成插件时，包括：
响应初始化命令，由所述前端Vue工程中读取工程信息文件；
对所述工程信息文件进行解析，确定所述前端Vue工程的构建工具；
由所述前端Vue工程中读取与所述构建工具相匹配的配置文件，并将与所述构建工具相匹配的插件信息插入至所述配置文件中，从而实现引入与所述前端Vue工程的构建工具相匹配的版本信息生成插件的目的。
在一种可能的实现方式中，在对所述工程信息文件进行解析，确定所述前端Vue工程的构建工具时，包括：
对所述工程信息文件中的开发环境依赖部分所包括的字符进行解析：
若所述开发环境依赖部分中包括字符vite，则确定所述前端Vue工程的构建工具为vite工具；
若所述开发环境依赖部分中包括字符@vue/cli-service，则调用包管理工具npm对所述前端Vue工程所依赖的webpack版本进行解析，得到webpack版本信息，并基于所述webpack版本信息确定构建所述前端Vue工程的构建工具。
在一种可能的实现方式中，在获取所述前端Vue工程的项目信息时，包括：
由所述前端Vue工程中读取工程信息文件；
对所述工程信息文件进行解析，得到所述工程信息文件对应的第一字符串；
基于预设的解析函数，由所述第一字符串中提取出所述项目信息。
在一种可能的实现方式中，在获取所述前端Vue工程的GIT提交信息时，基于预先配置的获取GIT提交信息的命令脚本实现。
在一种可能的实现方式中，在基于所述项目信息和所述GIT提交信息生成所述前端Vue工程的版本信息文件时，包括：
获取预先构建的版本信息文件模板；
将所述项目信息和所述GIT提交信息填入所述版本信息文件模板中的对应位置，得到版本信息文件。
在一种可能的实现方式中，在将所述版本信息文件注入到所述第一html文件中时，包括：
对所述版本信息文件进行解译，得到所述版本信息文件对应的第二字符串；
在所述第二字符串之前追加<script>标签，在所述第二字符串之后追加</script>标签，得到第三字符串；
查找所述html文件中的</body>标签，并将所述第三字符串插入至所述</body>标签之前，从而实现将所述版本信息文件注入到第一所述html文件中。
根据本公开的第二方面，提供了一种前端Vue工程的版本信息生成装置，包括：
第一html文件生成模块，用于响应打包控件的触发，对前端Vue工程进行打包，得到第一html文件；
第二html文件生成模块，用于调用预先引入的版本信息生成插件，获取所述前端Vue工程的项目信息和GIT提交信息，基于所述项目信息和所述GIT提交信息生成所述前端Vue工程的版本信息文件，并将所述版本信息文件注入到所述html文件中，得到第二html文件；
版本信息生成模块，用于将包括所述第二html文件的打包产物部署至服务器端，以在客户端浏览器环境中展示所述前端Vue工程的版本信息；
其中，所述版本信息生成插件与所述前端Vue工程的构建工具相匹配。
根据本公开的第三方面，提供了一种前端Vue工程的版本信息生成设备，包括：处理器；用于存储处理器可执行指令的存储器；其中，所述处理器被配置为执行本公开第一方面所述的方法。
根据本公开的第四方面，提供了一种非易失性计算机可读存储介质，其上存储有计算机程序指令，其中，所述计算机程序指令被处理器执行时实现本公开第一方面所述的方法。
本公开提供了一种前端Vue工程的版本信息生成方法，包括响应打包控件的触发，对前端Vue工程进行打包，得到第一html文件；调用预先引入的版本信息生成插件，获取前端Vue工程的项目信息和GIT提交信息，基于项目信息和GIT提交信息生成前端Vue工程的版本信息文件，并将版本信息文件注入到第一html文件中，得到第二html文件；将包括第二html文件的打包产物部署至服务器端，以在客户端浏览器环境中展示前端Vue工程的版本信息；其中，版本信息生成插件与前端Vue工程的构建工具相匹配。通过本申请的方法可以自动为前端Vue工程插入版本信息并显示，这样，在出现版本发布问题时，便可以直接根据版本信息进行问题溯源，从而提高了项目开发效率。
根据下面参考附图对示例性实施例的详细说明，本公开的其它特征及方面将变得清楚。
附图说明
包含在说明书中并且构成说明书的一部分的附图与说明书一起示出了本公开的示例性实施例、特征和方面，并且用于解释本公开的原理。
图1示出根据本公开一实施例的前端Vue工程的版本信息生成方法的流程图。
图2示出根据本公开一实施例的前端Vue工程的版本信息生成装置的示意性框图。
图3示出根据本公开一实施例的前端Vue工程的版本信息生成设备的示意性框图。
具体实施方式
以下将参考附图详细说明本公开的各种示例性实施例、特征和方面。附图中相同的附图标记表示功能相同或相似的元件。尽管在附图中示出了实施例的各种方面，但是除非特别指出，不必按比例绘制附图。
在这里专用的词“示例性”意为“用作例子、实施例或说明性”。这里作为“示例性”所说明的任何实施例不必解释为优于或好于其它实施例。
另外，为了更好的说明本公开，在下文的具体实施方式中给出了众多的具体细节。本领域技术人员应当理解，没有某些具体细节，本公开同样可以实施。在一些实例中，对于本领域技术人员熟知的方法、手段、元件和电路未作详细描述，以便于凸显本公开的主旨。
<方法实施例>
图1示出根据本公开一实施例的前端Vue工程的版本信息生成方法的流程图。如图1所示，该方法包括步骤S1100-S1300。
S1100，响应打包控件的触发，对前端Vue工程进行打包，得到第一html文件。
首先需要说明的是，针对协作开发的前端Vue工程，任何一个协作开发人员在任何一个时间节点都可以将当前构建好的前端Vue工程部署至服务端，这就意味着，整个开发过程中存在多次将前端Vue工程部署至服务端的操作。在第一次将前端Vue工程部署至服务端之前，需要先将预先构建的版本信息追加工具加载并安装至前端Vue工程中，并通过对前端Vue工程进行初始化，将版本信息追加工具中与前端Vue工程的构建工具相匹配的版本信息生成插件引入至前端Vue工程中。这样，后续在将前端Vue工程打包部署至服务端时，便可以通过调用引入的插件来为前端Vue工程生成版本信息，进而在将前端Vue工程部署至服务端后，便可以基于服务端的浏览器查看到前端Vue工程生成版本信息。其中，版本信息追加工具基于node.js编制。
在一种可能的实现方式中，在将预先构建的版本信息追加工具加载并安装至前端Vue工程中时，基于npm包管理工具实现。具体地，在已经构建好的前端Vue工程代码的根目录中，执行npm install zn-vue-auto-version命令，此命令会借助npm包管理工具将命名为zn-vue-auto-version的版本信息追加工具加载并安装至前端Vue工程中，并在安装完成后在根目录所在环境中注册环境变量auto-version，这样，在后续便可以基于auto-version这个环境变量来方便系统检索到需要运行的init.js脚本程序,在运行init.js脚本程序时，将执行将版本信息追加工具中与前端Vue工程的构建工具相匹配的版本信息生成插件引入至前端Vue工程的操作。
在将版本信息追加工具加载并安装至前端Vue工程中后，便可以在（根目录下）执行auto-version init这个初始化命令，响应这个命令便可以将版本信息追加工具中与前端Vue工程的构建工具相匹配的版本信息生成插件引入至前端Vue工程中。
在一种可能的实现方式中，在将版本信息追加工具中与前端Vue工程的构建工具相匹配的版本信息生成插件引入至前端Vue工程时，可以包括以下步骤：
第一，响应初始化命令，由前端Vue工程中读取工程信息文件。具体地，响应初始化命令，将调用JavaScript解释器node.js中文件系统模块fs的读函数readFile来读取根目录下的工程信息文件package.json。
第二，对工程信息文件进行解析，确定前端Vue工程的构建工具。具体地，包括以下步骤：对工程信息文件package.json中的开发环境依赖部分devDependencies中所包括的字符进行解析：若开发环境依赖部分中包括字符vite，则确定前端Vue工程的构建工具为vite工具；若开发环境依赖部分中包括字符@vue/cli-service，则需要在根目录中，执行npm ls webpack命令，此命令会调用包管理工具npm对前端Vue工程所依赖的webpack版本进行解析，得到webpack版本信息，并基于解析出的webpack版本信息来具体确定用于构建前端Vue工程的构建工具。
此处需要说明的是，解析出的webpack版本信息为一串字符串，因此，在得到webpack版本信息后，需要将webpack版本信息与预先配置字符串webpack@4和webpack@5进行正则匹配。如果匹配到webpack@4，则可以确定构建前端Vue工程的构建工具为webpack4；如果匹配到webpack@5，则可以确定构建前端Vue工程的构建工具为webpack5；如果既没有匹配到webpack@4，也没有匹配到webpack@5，则可以确定构建前端Vue工程的构建工具为除webpack以外的其它构建工具。其中，其它构建工具可以是Rollup、Gulp等，在此不作具体限定。
第三，由前端Vue工程中读取与构建工具相匹配的配置文件，并将与构建工具相匹配的插件信息插入至配置文件中，从而实现引入与前端Vue工程的构建工具相匹配的版本信息生成插件的目的。
具体地，在构建工具为Vite时，先调用JavaScript解释器node.js中文件系统模块fs的读函数readFile来读取根目录下的vite.config.*s文件。然后，继续调用文件系统模块fs的写函数writeFile为vite.config.*s文件的开始部分追加由版本信息追加工具zn-auto-version中引入与Vite工具相匹配的第一插件autoVersionVite的第一插件引入代码。其中，第一插件代码为import { autoVersionVite }from 'zn-auto-version.'。接着，通过正则的方式在vite.config.*s文件寻找到关键字符plugins：[，并在关键字符plugins：[之后追加用于调用第一插件的字符autoVersionVite()。
在构建工具为Webpack4+时，先调用JavaScript解释器node.js中文件系统模块fs的读函数readFile来读取根目录下的vite.config.*s文件。然后，继续调用文件系统模块fs的写函数writeFile为vite.config.*s文件的开始部分追加由版本信息追加工具zn-auto-version中引入与Webpack4+相匹配的第二插件autoVersion的第二插件引入代码。其中，第二插件代码为import { autoVersion }from 'zn-auto-version.'。接着，通过正则的方式在vite.config.*s文件寻找到关键字符plugins：[，并在关键字符plugins：[之后追加用于调用第二插件的字符autoVersion()。
在构建工具为Webpack5+时，先调用JavaScript解释器node.js中文件系统模块fs的读函数readFile来读取根目录下的vite.config.*s文件。然后，继续调用文件系统模块fs的写函数writeFile为vite.config.*s文件的开始部分追加由版本信息追加工具zn-auto-version中引入与Webpack5+相匹配的第三插件autoVersionNext的第三插件引入代码。其中，第三插件代码为import { autoVersionNext }from 'zn-auto-version.'。接着，通过正则的方式在vite.config.*s文件寻找到关键字符plugins：[，并在关键字符plugins：[之后追加用于调用第三插件的字符autoVersionNext() 。
在构建工具为除webpack以外的其它构建工具时，先调用JavaScript解释器node.js中文件系统模块fs的读函数readFile来读取根目录下的工程信息文件package.json。然后，通过正则的方式由工程信息文件package.json中找到所有包括关键字符"build的文本行 ，并在所有包括关键字符"build的文本行的最后追加用于在构建结束后执行追加版本信息脚本的字符串&&auto-version build。举例来说，由工程信息文件package.json中找到的所有包括关键字符"build的文本行为：
"build": "vue-cli-service build",
"build:master": "vue-cli-service build --mode master"，
则在各文本行追加字符串&&auto-version build后的结果为：
"build": "vue-cli-service build&&auto-version build",
"build:master": "vue-cli-service build --mode master&&auto-versionbuild"，
在将与前端Vue工程的构建工具相匹配的版本信息生成插件引入到前端Vue工程后，便可以执行对前端Vue工程进行打包并部署至服务端的操作。具体地，用户可以点击对前端Vue工程进行打包的打包控件，在打包控件被触发的情况下，并可以对前端Vue工程进行打包，得到第一html文件。
此处需要说明的是，在得到第一html文件后，需要根据选择与前端Vue工程的构建工具相匹配的方法获取到第一html文件。
具体地，在构建工具为Vite时，先调用JavaScript解释器node.js中文件系统模块fs的读函数readFile来读取根目录下的已经注入了与Vite相匹配的插件信息的vite.config.*s文件。执行打包操作时，通过运行该vite.config.*s文件中与Vite相匹配的插件信息来调用对应的第一插件，进而通过第一插件所提供的transformIndexHtml钩子来获取构建出来的第一html文件。
在构建工具为Webpack4+时，先调用JavaScript解释器node.js中文件系统模块fs的读函数readFile来读取根目录下的已经注入了与Webpack4+相匹配的插件信息的vite.config.*s文件。执行打包操作时，通过运行该vite.config.*s文件中与Webpack4+相匹配的插件信息来调用对应的第二插件，借助第二插件执行时传入的compiler对象下的hooks里的htmlWebpackPluginBeforeHtmlGeneration函数注册事件，来获取构建出来的第一html文件。
在构建工具为Webpack5+时，先调用JavaScript解释器node.js中文件系统模块fs的读函数readFile来读取根目录下的已经注入了与Webpack4+相匹配的插件信息的vite.config.*s文件。执行打包操作时，通过运行该vite.config.*s文件中与Webpack5+相匹配的插件信息来调用对应的第三插件，借助第三插件中的html-webpack-plugin-before-html-generation来获取构建出来的第一html文件。
在构建工具为其它时，则在构建完后执行JavaScript解释器node.js的脚本文件，此文件会找到根目录下的dist文件中的html，并借助JavaScript解释器node.js中文件系统模块fs模块下的读函数readFile读取该文件，并视其为构建出来的第一html文件。
S1200，调用预先引入的版本信息生成插件，获取前端Vue工程的项目信息和GIT提交信息，基于项目信息和GIT提交信息生成前端Vue工程的版本信息文件，并将版本信息文件注入到html文件中，得到第二html文件。其中，版本信息生成插件与前端Vue工程的构建工具相匹配。
在调用版本信息生成插件，获取前端Vue工程的项目信息时，可以包括以下步骤：第一，由前端Vue工程中读取工程信息文件。具体地，调用JavaScript解释器node.js中文件系统模块fs的读函数readFile来读取根目录下的工程信息文件package.json。第二，对工程信息文件package.json进行反序列化解析，得到工程信息文件对应的对象。第三，基于解析后对象结构，来获取前端Vue工程的项目信息。其中，项目信息包括项目名称和项目版本字段中的至少一种。具体地，在获取项目名称时，可以由解析后的对象结构中提取name属性作为项目名称，由解析后的对象结构中提取version属性作为项目版本字段。
此处需要说明的是，在执行该步骤时，还需要在系统内存中申请用于存贮项目信息的变量空间。举例来说，项目信息包括项目名称和项目版本字段时，需要在系统内存中申请用于存储项目名称PROJECT_NAME的第一变量空间和用于存储项目版本字段PROJECT_VERSION的第二变量空间。这样，在获取到项目名称和项目版本字段后，便可以将项目名称赋值给第一变量空间，将项目版本字段赋值给第二变量空间。
在调用版本信息生成插件，在获取前端Vue工程的GIT提交信息时，是基于预先配置的获取GIT提交信息的命令脚本实现。其中，GIT提交信息可以包括最新一次git提交的执行人GIT_COMMIT_EXECUTOR、最新一次git提交的信息GIT_COMMIT_MESSAGE、最新一次git提交的时间GIT_COMMIT_TIME、最新一次git提交的Hash值GIT_COMMIT_HASH、此次构建对应的分支GIT_BRANCH以及此次构建对应的node环境版本NODE_VERSION中的至少一种。
具体地，针对上述每种GIT提交信息，在版本信息生成插件中均预先配置有对应的命令脚本，即GIT提交信息种类和命令脚本数量是相同的。举例来说，在GIT提交信息包括最新一次git提交的执行人GIT_COMMIT_EXECUTOR、最新一次git提交的信息GIT_COMMIT_MESSAGE、最新一次git提交的时间GIT_COMMIT_TIME、最新一次git提交的Hash值GIT_COMMIT_HASH、此次构建对应的分支GIT_BRANCH以及此次构建对应的node环境版本NODE_VERSION的实施例中，在版本信息生成插件中预先配置有：用于获取最新一次git提交的执行人GIT_COMMIT_EXECUTOR的第一命令脚本，该第一命令脚本为git rev-parse --abbrev-ref HEAD；用于获取最新一次git提交的信息GIT_COMMIT_MESSAGE的第二命令脚本，该第二命令脚本为node -v；用于获取最新一次git提交的时间GIT_COMMIT_TIME的第三命令脚本，该第三命令脚本为git log -1 --format=%ci；用于获取最新一次git提交的Hash值GIT_COMMIT_HASH的第四命令脚本，该第四命令脚本为git log -1 --format=%H；用于获取此次构建对应的分支GIT_BRANCH的五命令脚本，该第五命令脚本为git branch；用于获取此次构建对应的node环境版本NODE_VERSION的第六命令脚本，该第六命令脚本为node -v。
在基于预先配置的获取GIT提交信息的命令脚本来获取前端Vue工程的GIT提交信息时，需要先调用JavaScript解释器node.js中的child_process模块，然后将用于获取GIT提交信息的各命令脚本发送至child_process模块，child_process模块将为各命令脚本创建子进程，并分别通过调用child_process模块的execSync方法，来执行各命令脚本，从而获取到各种GIT提交信息。
此处需要说明的是，在执行该步骤时，还需要在系统内存中申请用于存贮各种GIT提交信息的变量空间。举例来说，在GIT提交信息包括最新一次git提交的执行人GIT_COMMIT_EXECUTOR、最新一次git提交的信息GIT_COMMIT_MESSAGE、最新一次git提交的时间GIT_COMMIT_TIME、最新一次git提交的Hash值GIT_COMMIT_HASH、此次构建对应的分支GIT_BRANCH以及此次构建对应的node环境版本NODE_VERSION的实施例中，需要在系统内存中申请用于存储最新一次git提交的执行人GIT_COMMIT_EXECUTOR的第三空间变量；用于存储最新一次git提交的信息GIT_COMMIT_MESSAGE的第四空间变量；用于存储最新一次git提交的时间GIT_COMMIT_TIME的第五空间变量；用于存储最新一次git提交的Hash值GIT_COMMIT_HASH的第六空间变量；用于存储此次构建对应的分支GIT_BRANCH的第七空间变量；以及用于存储此次构建对应的node环境版本NODE_VERSION的第八空间变量。这样，在获取到各种GIT提交信息后，便可以将各种GIT提交信息赋值到对应的空间变量中进行存储。
进一步地，在获取到项目信息和GIT提交信息，便可以执行基于项目信息和GIT提交信息生成前端Vue工程的版本信息文件的操作。
在一种可能的实现方式中，在基于项目信息和GIT提交信息生成前端Vue工程的版本信息文件时，可以包括以下步骤：
第一，获取预先构建的版本信息文件模板。其中，该版本信息文件模板是基于JavaScript文件构建的，其中记录有各个项目信息和GIT提交信息对应的描述信息和显示样式信息。
第二，将项目信息和GIT提交信息填入版本信息文件模板中的对应位置，得到版本信息文件。具体地，将各个项目信息和GIT提交信息填充至版本信息文件模板中对应的描述信息后，即可得到前端Vue工程的版本信息文件。
举例来说，在项目信息包括项目版本字段PROJECT_VERSION和项目名称PROJECT_NAME，在GIT提交信息包括最新一次git提交的执行人GIT_COMMIT_EXECUTOR、最新一次git提交的信息GIT_COMMIT_MESSAGE、最新一次git提交的时间GIT_COMMIT_TIME、最新一次git提交的Hash值GIT_COMMIT_HASH、此次构建对应的分支GIT_BRANCH以及此次构建对应的node环境版本NODE_VERSION的实施例中，该版本信息文件模板可以如下所示：
console.log(`%c项目版本信息为:${PROJECT_VERSION}`, [
'color:#fff',
'background: #0c7384',
'font-size: 24px',
'border: 2px solid #fff',
'text-shadow: 1px 1px black',
'padding: 4px',
])
console.log(`%c项目名称为:${PROJECT_NAME}`, [
'color:#fff',
'background: #0c7384',
'font-size: 24px',
'border: 2px solid #fff',
'text-shadow: 1px 1px black',
'padding: 4px',
])
console.log(`%Git提交的执行人是:${GIT_COMMIT_EXECUTOR}`, [
'color:#fff',
'background: #0c7384',
'font-size: 24px',
'border: 2px solid #fff',
'text-shadow: 1px 1px black',
'padding: 4px',
])
console.log(`%cGit提交的信息:${GIT_COMMIT_MESSAGE}`, [
'color:#fff',
'background: #0c7384',
'font-size: 24px',
'border: 2px solid #fff',
'text-shadow: 1px 1px black',
'padding: 4px',
])
console.log(`%cGit提交的时间:${GIT_COMMIT_TIME}}`, [
'color:#fff',
'background: #0c7384',
'font-size: 24px',
'border: 2px solid #fff',
'text-shadow: 1px 1px black',
'padding: 4px',
])
console.log(`%cGit提交的Hash值是:${GIT_COMMIT_HASH}`, [
'color:#fff',
'background: #0c7384',
'font-size: 24px',
'border: 2px solid #fff',
'text-shadow: 1px 1px black',
'padding: 4px',
])
console.log(`%cGit提交的分支是:${GIT_BRANCH}`, [
'color:#fff',
'background: #0c7384',
'font-size: 24px',
'border: 2px solid #fff',
'text-shadow: 1px 1px black',
'padding: 4px',
])
console.log(`%c当前构建环境Node版本是:${NODE_VERSION}`, [
'color:#fff',
'background: #0c7384',
'font-size: 24px',
'border: 2px solid #fff',
'text-shadow: 1px 1px black',
'padding: 4px',
])
在获取到上述项目信息和GIT提交信息后，直接将其添加至对应的字段处即可得到最终的版本信息文件。
在另外一种可能的实现方式中，在基于项目信息和GIT提交信息生成前端Vue工程的版本信息文件时，可以包括以下步骤：
第一，获取预先构建的显示样式信息。其中，该显示样式信息用于控制版本信息的展示样式。
第二，为获取的项目信息和GIT提交信息通过逻辑判断追加与之相匹配的描述信息，得到修改后的项目信息和GIT提交信息。具体地，针对每项项目信息和GIT提交信息均预先配置有与之相匹配的描述信息，这样，在获取到项目信息和GIT提交信息后，便可以通过逻辑判断的方式找到与之相匹配的描述信息并进行拼接，从而得到修改后的项目信息和GIT提交信息。
举例来说，针对项目版本信息变量PROJECT_VERSION，系统中预先配置有与其相匹配的描述信息为‘%c项目版本信息为:’，这样，在PROJECT_VERSION的变量空间（即上述第二变量空间）中读取到项目版本信息变量PROJECT_VERSION后，将在其前面拼接上 ‘%c项目版本信息为:’ 这一描述信息，并将拼接后的数据存入PROJECT_VERSION变量空间中，替换之前的变量值，从而得到修改后的项目版本信息。
第三，生成一个空JavaScript文件，并按照预先配置的写入方法将上述样式信息和修改后的项目信息和GIT提交信息写入至JavaScript文件中，从而得到可以被浏览器解读的前端Vue工程的版本信息文件。具体地，预先配置的方法内调用node.js中文件系统模块fs的writeFile方法，同时借助模板字符串工具，为新生成的空JavaScript文件写入`console.log(‘%c${ message },${ style }’)`这个字符串，其中，需要写入的第一个参数为注释信息message（即修改后的项目信息和GIT提交信息），需要写入的第二个参数为样式信息style。
在通过上述方法生成版本信息文件后，便可以执行将版本信息文件注入到第一html文件中的操作。具体地，对版本信息文件进行解译，得到版本信息文件对应的第二字符串；在第二字符串之前追加<script>标签，在第二字符串之后追加</script>标签，得到第三字符串；查找html文件中的</body>标签，并将第三字符串插入至</body>标签之前，从而实现将版本信息文件注入到第一html文件中，从而得到第二html文件。
S1300，将包括第二html文件的打包产物部署至服务器端，以在客户端浏览器环境中展示前端Vue工程的版本信息。具体实现细节为本领域公知常识，在此不再赘述。
本公开提供了一种前端Vue工程的版本信息生成方法，包括响应打包控件的触发，对前端Vue工程进行打包，得到第一html文件；调用预先引入的版本信息生成插件，获取前端Vue工程的项目信息和GIT提交信息，基于项目信息和GIT提交信息生成前端Vue工程的版本信息文件，并将版本信息文件注入到第一html文件中，得到第二html文件；将包括第二html文件的打包产物部署至服务器端，以在客户端浏览器环境中展示前端Vue工程的版本信息；其中，版本信息生成插件与前端Vue工程的构建工具相匹配。通过本申请的方法可以自动为前端Vue工程插入版本信息并显示，这样，在出现版本发布问题时，便可以直接根据版本信息进行问题溯源，从而提高了项目开发效率。
<装置实施例>
图2示出根据本公开一实施例的前端Vue工程的版本信息生成装置的示意性框图。如图2所示，前端Vue工程的版本信息生成装置100包括：
第一html文件生成模块110，用于响应打包控件的触发，对前端Vue工程进行打包，得到第一html文件；
第二html文件生成模块120，用于调用预先引入的版本信息生成插件，获取所述前端Vue工程的项目信息和GIT提交信息，基于所述项目信息和所述GIT提交信息生成所述前端Vue工程的版本信息文件，并将所述版本信息文件注入到所述html文件中，得到第二html文件；
版本信息生成模块130，用于将包括所述第二html文件的打包产物部署至服务器端，以在客户端浏览器环境中展示所述前端Vue工程的版本信息；
其中，所述版本信息生成插件与所述前端Vue工程的构建工具相匹配。
<设备实施例>
图3示出根据本公开一实施例的前端Vue工程的版本信息生成设备的示意性框图。如图3所示，前端Vue工程的版本信息生成设备200包括：处理器210以及用于存储处理器210可执行指令的存储器220。其中，处理器210被配置为执行可执行指令时实现前面任一所述的前端Vue工程的版本信息生成方法。
此处，应当指出的是，处理器210的个数可以为一个或多个。同时，在本公开实施例的前端Vue工程的版本信息生成设备200中，还可以包括输入装置230和输出装置240。其中，处理器210、存储器220、输入装置230和输出装置240之间可以通过总线连接，也可以通过其他方式连接，此处不进行具体限定。
存储器220作为一种计算机可读存储介质，可用于存储软件程序、计算机可执行程序和各种模块，如：本公开实施例的前端Vue工程的版本信息生成方法所对应的程序或模块。处理器210通过运行存储在存储器220中的软件程序或模块，从而执行前端Vue工程的版本信息生成设备200的各种功能应用及数据处理。
输入装置230可用于接收输入的数字或信号。其中，信号可以为产生与设备/终端/服务器的用户设置以及功能控制有关的键信号。输出装置240可以包括显示屏等显示设备。
<存储介质实施例>
根据本公开的第四方面，还提供了一种非易失性计算机可读存储介质，其上存储有计算机程序指令，计算机程序指令被处理器210执行时实现前面任一所述的前端Vue工程的版本信息生成方法。
以上已经描述了本公开的各实施例，上述说明是示例性的，并非穷尽性的，并且也不限于所披露的各实施例。在不偏离所说明的各实施例的范围和精神的情况下，对于本技术领域的普通技术人员来说许多修改和变更都是显而易见的。本文中所用术语的选择，旨在最好地解释各实施例的原理、实际应用或对市场中的技术的技术改进，或者使本技术领域的其它普通技术人员能理解本文披露的各实施例。
Claims (10)
1.一种前端Vue工程的版本信息生成方法，其特征在于，包括：
响应打包控件的触发，对前端Vue工程进行打包，得到第一html文件；
调用预先引入的版本信息生成插件，获取所述前端Vue工程的项目信息和GIT提交信息，基于所述项目信息和所述GIT提交信息生成所述前端Vue工程的版本信息文件，并将所述版本信息文件注入到所述第一html文件中，得到第二html文件；
将包括所述第二html文件的打包产物部署至服务器端，以在客户端浏览器环境中展示所述前端Vue工程的版本信息；
其中，所述版本信息生成插件与所述前端Vue工程的构建工具相匹配；
在得到所述第一html文件后，所述版本信息生成插件需要先选择与所述前端Vue工程的构建工具相匹配的方法来获取到所述第一html文件，再将生成的所述版本信息文件注入到所述第一html文件中，得到第二html文件；
所述项目信息包括项目名称和项目版本字段中的至少一种；
所述GIT提交信息包括最新一次git提交的执行人GIT_COMMIT_EXECUTOR、最新一次git提交的信息GIT_COMMIT_MESSAGE、最新一次git提交的时间GIT_COMMIT_TIME、最新一次git提交的Hash值GIT_COMMIT_HASH、此次构建对应的分支GIT_BRANCH以及此次构建对应的node环境版本NODE_VERSION中的至少一种。
2.根据权利要求1所述的方法，其特征在于，在引入与所述前端Vue工程的构建工具相匹配的版本信息生成插件时，包括：
响应初始化命令，由所述前端Vue工程中读取工程信息文件；
对所述工程信息文件进行解析，确定所述前端Vue工程的构建工具；
由所述前端Vue工程中读取与所述构建工具相匹配的配置文件，并将与所述构建工具相匹配的插件信息插入至所述配置文件中，从而实现引入与所述前端Vue工程的构建工具相匹配的版本信息生成插件的目的。
3.根据权利要求2所述的方法，其特征在于，在对所述工程信息文件进行解析，确定所述前端Vue工程的构建工具时，包括：
对所述工程信息文件中的开发环境依赖部分所包括的字符进行解析：
若所述开发环境依赖部分中包括字符vite，则确定所述前端Vue工程的构建工具为vite工具；
若所述开发环境依赖部分中包括字符@vue/cli-service，则调用包管理工具npm对所述前端Vue工程所依赖的webpack版本进行解析，得到webpack版本信息，并基于所述webpack版本信息确定构建所述前端Vue工程的构建工具。
4.根据权利要求1所述的方法，其特征在于，在获取所述前端Vue工程的项目信息时，包括：
由所述前端Vue工程中读取工程信息文件；
对所述工程信息文件进行解析，得到所述工程信息文件对应的第一字符串；
基于预设的解析函数，由所述第一字符串中提取出所述项目信息。
5.根据权利要求1所述的方法，其特征在于，在获取所述前端Vue工程的GIT提交信息时，基于预先配置的获取GIT提交信息的命令脚本实现。
6.根据权利要求1所述的方法，其特征在于，在基于所述项目信息和所述GIT提交信息生成所述前端Vue工程的版本信息文件时，包括：
获取预先构建的版本信息文件模板；
将所述项目信息和所述GIT提交信息填入所述版本信息文件模板中的对应位置，得到版本信息文件。
7.根据权利要求1所述的方法，其特征在于，在将所述版本信息文件注入到所述第一html文件中时，包括：
对所述版本信息文件进行解译，得到所述版本信息文件对应的第二字符串；
在所述第二字符串之前追加<script>标签，在所述第二字符串之后追加</script>标签，得到第三字符串；
查找所述html文件中的</body>标签，并将所述第三字符串插入至所述</body>标签之前，从而实现将所述版本信息文件注入到第一所述html文件中。
8.一种前端Vue工程的版本信息生成装置，其特征在于，包括：
第一html文件生成模块，用于响应打包控件的触发，对前端Vue工程进行打包，得到第一html文件；
第二html文件生成模块，用于调用预先引入的版本信息生成插件，获取所述前端Vue工程的项目信息和GIT提交信息，基于所述项目信息和所述GIT提交信息生成所述前端Vue工程的版本信息文件，并将所述版本信息文件注入到所述html文件中，得到第二html文件；
版本信息生成模块，用于将包括所述第二html文件的打包产物部署至服务器端，以在客户端浏览器环境中展示所述前端Vue工程的版本信息；
其中，所述版本信息生成插件与所述前端Vue工程的构建工具相匹配；
所述第二html文件生成模块，在得到所述第一html文件后，所述版本信息生成插件需要先选择与所述前端Vue工程的构建工具相匹配的方法来获取到所述第一html文件，再将生成的所述版本信息文件注入到所述第一html文件中，得到第二html文件；
所述项目信息包括项目名称和项目版本字段中的至少一种，所述GIT提交信息包括最新一次git提交的执行人GIT_COMMIT_EXECUTOR、最新一次git提交的信息GIT_COMMIT_MESSAGE、最新一次git提交的时间GIT_COMMIT_TIME、最新一次git提交的Hash值GIT_COMMIT_HASH、此次构建对应的分支GIT_BRANCH以及此次构建对应的node环境版本NODE_VERSION中的至少一种。
9.一种前端Vue工程的版本信息生成设备，其特征在于，包括：
处理器；
用于存储处理器可执行指令的存储器；
其中，所述处理器被配置为执行所述可执行指令时实现权利要求1至7中任意一项所述的方法。
10.一种非易失性计算机可读存储介质，其上存储有计算机程序指令，其特征在于，所述计算机程序指令被处理器执行时实现权利要求1至7中任意一项所述的方法。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202311746314.1A CN117421039B (zh) | 2023-12-18 | 2023-12-18 | 前端Vue工程的版本信息生成方法、装置、设备和存储介质 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202311746314.1A CN117421039B (zh) | 2023-12-18 | 2023-12-18 | 前端Vue工程的版本信息生成方法、装置、设备和存储介质 |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN117421039A CN117421039A (zh) | 2024-01-19 |
| CN117421039B true CN117421039B (zh) | 2024-02-27 |
Family
ID=89527032
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202311746314.1A Active CN117421039B (zh) | 2023-12-18 | 2023-12-18 | 前端Vue工程的版本信息生成方法、装置、设备和存储介质 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN117421039B (zh) |
Citations (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN106886445A (zh) * | 2016-06-23 | 2017-06-23 | 阿里巴巴集团控股有限公司 | Java数据包生成方法及设备和信息提取方法及设备 |
| CN111796834A (zh) * | 2020-06-30 | 2020-10-20 | 福信富通科技股份有限公司 | 一种可组合的微服务开发框架的部署方法、装置及设备 |
| CN114356447A (zh) * | 2021-12-28 | 2022-04-15 | 广东三维家信息科技有限公司 | 一种插件管理方法、装置、电子设备及存储介质 |
| WO2022121971A1 (zh) * | 2020-12-10 | 2022-06-16 | 百果园技术(新加坡)有限公司 | 前端项目处理方法、装置、设备、管理系统及存储介质 |
| CN115809084A (zh) * | 2022-07-19 | 2023-03-17 | 中国工商银行股份有限公司 | 版本的生成方法及其装置、电子设备及存储介质 |
Family Cites Families (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| JP5296960B2 (ja) * | 2005-06-17 | 2013-09-25 | 日本電気株式会社 | ファイルバージョン管理装置 |
-
2023
- 2023-12-18 CN CN202311746314.1A patent/CN117421039B/zh active Active
Patent Citations (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN106886445A (zh) * | 2016-06-23 | 2017-06-23 | 阿里巴巴集团控股有限公司 | Java数据包生成方法及设备和信息提取方法及设备 |
| CN111796834A (zh) * | 2020-06-30 | 2020-10-20 | 福信富通科技股份有限公司 | 一种可组合的微服务开发框架的部署方法、装置及设备 |
| WO2022121971A1 (zh) * | 2020-12-10 | 2022-06-16 | 百果园技术(新加坡)有限公司 | 前端项目处理方法、装置、设备、管理系统及存储介质 |
| CN114356447A (zh) * | 2021-12-28 | 2022-04-15 | 广东三维家信息科技有限公司 | 一种插件管理方法、装置、电子设备及存储介质 |
| CN115809084A (zh) * | 2022-07-19 | 2023-03-17 | 中国工商银行股份有限公司 | 版本的生成方法及其装置、电子设备及存储介质 |
Non-Patent Citations (1)
| Title |
|---|
| Vite+Vue3实现版本更新检查，实现页面自动刷新;IN~Trying;《https://blog.csdn.net/weixin_44624120/article/details/128973823》;20230530;第1-6页 * |
Also Published As
| Publication number | Publication date |
|---|---|
| CN117421039A (zh) | 2024-01-19 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| US10185546B2 (en) | Service extraction and application composition | |
| CN109508191B (zh) | 一种代码生成方法及系统 | |
| CN111680253B (zh) | 页面应用数据包生成方法、装置、计算机设备及存储介质 | |
| US9747190B2 (en) | Analysis system, analysis method, and computer program product | |
| WO2015154612A1 (zh) | 扩展apk文件应用的方法及装置 | |
| CN109145235B (zh) | 用于解析网页的方法、装置及电子设备 | |
| CN107783766B (zh) | 对应用程序的文件进行清理的方法和装置 | |
| CN111475161B (zh) | 一种访问组件的方法、装置及设备 | |
| CN111061643A (zh) | Sdk集群的兼容性检测方法、装置、电子设备及存储介质 | |
| CN104572644A (zh) | 数据库更新装置和数据库更新方法 | |
| CN110162510A (zh) | 文本对比方法、装置、计算机设备及存储介质 | |
| CN106776266B (zh) | 测试工具的配置方法及终端设备 | |
| CN108595656B (zh) | 一种数据的处理方法及系统 | |
| CN102193789B (zh) | 一种实现可配置跳转链接的方法和设备 | |
| CN113935289A (zh) | 文档在线处理方法及装置 | |
| CN117421039B (zh) | 前端Vue工程的版本信息生成方法、装置、设备和存储介质 | |
| CN111399836B (zh) | 修改页面属性的方法及装置 | |
| CN113031944B (zh) | 基于模板的业务开通装置及方法 | |
| CN112632333A (zh) | 查询语句生成方法、装置、设备及计算机可读存储介质 | |
| US20100192167A1 (en) | Graphical user interface generation through use of a binary file | |
| CN111078529A (zh) | 客户端写入模块测试方法、装置、电子设备 | |
| CN111414525B (zh) | 小程序的数据获取方法、装置、计算机设备和存储介质 | |
| CN113419738A (zh) | 接口文档的生成方法、装置及接口管理设备 | |
| CN113656000A (zh) | 网页的处理方法和装置 | |
| CN106897588B (zh) | 一种标签函数的处理方法及装置 |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| GR01 | Patent grant | ||
| GR01 | Patent grant |