CN117931219A - 前端项目实现方法、装置、电子设备和存储介质 - Google Patents
前端项目实现方法、装置、电子设备和存储介质 Download PDFInfo
- Publication number
- CN117931219A CN117931219A CN202410109340.1A CN202410109340A CN117931219A CN 117931219 A CN117931219 A CN 117931219A CN 202410109340 A CN202410109340 A CN 202410109340A CN 117931219 A CN117931219 A CN 117931219A
- Authority
- CN
- China
- Prior art keywords
- environment
- project
- configuration file
- target
- data
- 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.)
- Pending
Links
- 238000000034 method Methods 0.000 title claims abstract description 61
- 238000004519 manufacturing process Methods 0.000 claims abstract description 36
- 238000011161 development Methods 0.000 claims abstract description 25
- 238000004806 packaging method and process Methods 0.000 claims abstract description 12
- 238000012360 testing method Methods 0.000 claims description 26
- 238000004590 computer program Methods 0.000 claims description 6
- 230000006870 function Effects 0.000 abstract description 14
- 230000003111 delayed effect Effects 0.000 abstract description 3
- 230000008569 process Effects 0.000 description 18
- 238000012545 processing Methods 0.000 description 8
- 238000010586 diagram Methods 0.000 description 7
- 238000010276 construction Methods 0.000 description 6
- 230000003287 optical effect Effects 0.000 description 6
- 230000006399 behavior Effects 0.000 description 4
- 230000000007 visual effect Effects 0.000 description 4
- 230000007613 environmental effect Effects 0.000 description 3
- 238000012856 packing Methods 0.000 description 3
- 238000013515 script Methods 0.000 description 3
- 238000005516 engineering process Methods 0.000 description 2
- 238000002955 isolation Methods 0.000 description 2
- 230000002093 peripheral effect Effects 0.000 description 2
- 230000000644 propagated effect Effects 0.000 description 2
- 238000012546 transfer Methods 0.000 description 2
- 238000004458 analytical method Methods 0.000 description 1
- 238000003491 array Methods 0.000 description 1
- 230000009286 beneficial effect Effects 0.000 description 1
- 238000004891 communication Methods 0.000 description 1
- 239000000835 fiber Substances 0.000 description 1
- 238000009434 installation Methods 0.000 description 1
- 238000012423 maintenance Methods 0.000 description 1
- 239000013307 optical fiber Substances 0.000 description 1
- 238000012858 packaging process Methods 0.000 description 1
- 230000002085 persistent effect Effects 0.000 description 1
- 230000008707 rearrangement Effects 0.000 description 1
- 238000009877 rendering Methods 0.000 description 1
- 230000004044 response Effects 0.000 description 1
- 239000004065 semiconductor Substances 0.000 description 1
- 238000006467 substitution reaction Methods 0.000 description 1
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/60—Software deployment
- G06F8/61—Installation
- G06F8/63—Image based installation; Cloning; Build to order
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F9/00—Arrangements for program control, e.g. control units
- G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
- G06F9/44—Arrangements for executing specific programs
- G06F9/445—Program loading or initiating
- G06F9/44505—Configuring for program initiating, e.g. using registry, configuration files
Landscapes
- Engineering & Computer Science (AREA)
- Software Systems (AREA)
- Theoretical Computer Science (AREA)
- General Engineering & Computer Science (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Stored Programmes (AREA)
Abstract
本发明实施例提供一种前端项目实现方法、装置、电子设备和存储介质，涉及计算机技术领域。该方法包括：查询前端项目的容器配置文件中挂载的环境变量配置文件，以确定前端项目当前部署的目标环境，前端项目采用同一打包镜像文件在不同环境中部署；从前端项目的环境属性配置文件中获取目标环境的属性配置数据；根据属性配置数据访问目标环境对应的目标服务器，以获取前端项目的项目数据；根据项目数据实现前端项目。本发明的技术方案，解决了开发环境和生产环境下的打包结果不一致导致的不可重现的错误、软件功能不一致性、部署延迟和困难等问题，从而提高了前端开发的效率和稳定性。
Description
技术领域
本发明实施例涉及计算机技术领域，尤其涉及一种前端项目实现方法、装置、电子设备和存储介质。
背景技术
随着前端技术的不断发展，前端开发已经逐渐成为软件开发的重要组成部分。Vue作为一种流行的前端框架，广泛应用于各种Web应用程序的开发。
目前，传统的Vue项目打包过程通常涉及到复杂的构建和配置，尤其在开发环境和生产环境之间，打包配置往往需要分别进行，且直接将环境相关数据写在项目的代码包中，这导致了开发环境和生产环境下的打包结果不一致，而打包不一致会导致出现不可重现的错误、软件功能不一致、项目部署延迟和困难等问题。
发明内容
本发明实施例提供一种前端项目实现方法、装置、电子设备和存储介质，解决了开发环境和生产环境下的打包结果不一致导致的不可重现的错误、软件功能不一致、部署延迟和困难等问题，从而提高了前端开发的效率和稳定性。
第一方面，本发明实施例提供的前端项目实现方法，该方法包括：
查询前端项目的容器配置文件中挂载的环境变量配置文件，以确定所述前端项目当前部署的目标环境，所述前端项目采用同一打包镜像文件在不同环境中部署；
从所述前端项目的环境属性配置文件中获取所述目标环境的属性配置数据；
根据所述属性配置数据访问所述目标环境对应的目标服务器，以获取所述前端项目的项目数据；
根据所述项目数据实现所述前端项目。
上述技术方案中，通过查询前端项目的容器配置文件中挂载的环境变量配置文件，以确定前端项目当前部署的目标环境，为之后获取目标环境的属性配置数据，提供了数据基础。并且前端项目采用同一打包镜像文件在不同环境中部署，简化了前端项目的构建和部署过程，提高了可维护性、可扩展性和一致性。之后从前端项目的环境属性配置文件中获取目标环境的属性配置数据，为之后得到前端项目的项目数据，提供了数据基础。然后根据属性配置数据访问目标环境对应的目标服务器，以获取前端项目的项目数据，为之后实现前端项目提供了数据基础。最后根据项目数据实现前端项目，生成了用户可以使用的可视化界面，方便了用户的操作。即本发明通过改进项目部署过程，在部署项目时，在项目的容器配置文件中挂载环境变量配置文件，容器配置文件中挂载的环境变量配置文件具有最高的执行优先级，使得项目在运行的过程中，可以优先执行环境变量配置文件，以获取部署环境相关数据，从而让项目可以适应不同的部署环境，一个项目采用同一打包镜像文件可以在不同环境中部署，即各个环境中部署的打包结果是一致的，可以解决不同环境下的打包结果不一致导致的各种问题，从而提高了前端开发的效率和稳定性。
第二方面，本发明实施例提供的前端项目实现装置，该装置包括：
环境确定模块，用于查询前端项目的容器配置文件中挂载的环境变量配置文件，以确定所述前端项目当前部署的目标环境，所述前端项目采用同一打包镜像文件在不同环境中部署；
配置获取模块，用于从所述前端项目的环境属性配置文件中获取所述目标环境的属性配置数据；
访问模块，用于根据所述属性配置数据访问所述目标环境对应的目标服务器，以获取所述前端项目的项目数据；
项目实现模块，用于根据所述项目数据实现所述前端项目。
第三方面，本发明实施例提供的电子设备，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，处理器执行程序时实现如本发明任一实施例的前端项目实现方法。
第四方面，本发明实施例提供的计算机可读存储介质，其上存储有计算机程序，该程序被处理器执行时实现如本发明任一实施例的前端项目实现方法。
本发明中第二方面、第三方面以及第四方面的描述，可以参考第一方面的详细描述；并且，第二方面、第三方面以及第四方面描述的有益效果，可以参考第一方面的有益效果分析，此处不再赘述。
在本发明中，上述前端项目实现装置的名字对设备或功能模块本身不构成限定，在实际实现中，这些设备或功能模块可以以其他名称出现。只要各个设备或功能模块的功能和本发明类似，属于本发明权利要求及其等同技术的范围之内。
本发明的这些方面或其他方面在以下的描述中会更加简明易懂。
附图说明
为了更清楚地说明本发明的技术方案，下面将对实施例中所需要使用的附图作简单地介绍，应当理解，以下附图仅示出了本发明的某些实施例，因此不应被看作是对范围的限定，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他相关的附图。
图1是本发明实施例提供的前端项目实现方法的一个流程示意图；
图2是本发明实施例提供的前端项目实现方法的另一个流程示意图；
图3是本发明实施例提供的环境变量配置文件存放路径的一个示例图；
图4是本发明实施例提供的环境属性配置文件的一个示例图；
图5是本发明实施例提供的前端项目实现装置的一个结构示意图；
图6是本发明实施例提供的电子设备的一个结构示意图。
具体实施方式
为了使本技术领域的人员更好地理解本发明方案，下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本发明一部分的实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都应当属于本发明保护的范围。
需要说明的是，本发明的说明书和权利要求书及上述附图中的术语“第一”、“第二”等是用于区别类似的对象，而不必用于描述特定的顺序或先后次序。应该理解这样使用的数据在适当情况下可以互换，以便这里描述的本发明的实施例能够以除了在这里图示或描述的那些以外的顺序实施。此外，术语“包括”和“具有”以及他们的任何变形，意图在于覆盖不排他的包含，例如，包含了一系列步骤或单元的过程、方法、系统、产品或设备不必限于清楚地列出的那些步骤或单元，而是可包括没有清楚地列出的或对于这些过程、方法、产品或设备固有的其它步骤或单元。
图1是本发明实施例提供的前端项目实现方法的一个流程示意图，本发明实施例提供的前端项目实现方法可适用于在前端项目开发的过程中，需要在不同环境下实现前端项目的场景中，该方法可以由本发明实施例提供的前端项目实现装置来执行，该装置可采用软件和/或硬件的方式实现。在一个具体的实施例中，该装置可以集成在电子设备中，例如：电子设备可以是计算机、服务器等。参见图1，该方法具体包括如下步骤：
步骤110、查询前端项目的容器配置文件中挂载的环境变量配置文件，以确定前端项目当前部署的目标环境，前端项目采用同一打包镜像文件在不同环境中部署。
具体地，前端项目指的是用于呈现用户界面的项目。容器配置文件通常指的是开源的应用容器引擎(Docker Engine，Docker)的配置文件，它定义了如何构建一个Docker镜像。Docker镜像是一个轻量级、独立的、可执行的软件包，包含了运行前端项目所需的一切：代码、运行时环境、系统工具和库。环境变量配置文件指的是定义环境变量的文件。环境变量是用来定义在运行前端项目时可以改变的参数。打包镜像文件指的是已经构建好的Docker镜像，可以直接用来部署应用。目标环境指的是前端项目部署的具体环境，例如：开发环境、测试环境、生产环境等，本发明实施例对此不进行限制。
具体实现中，首先需要确定前端项目容器配置文件的位置，例如：容器配置文件在项目的根目录下。然后在容器配置文件中，使用用于挂载环境变量配置文件的命令或指令。之后解析挂载命令或指令以确定环境变量配置文件的路径。在确定了环境变量配置文件的路径后，得到环境变量配置文件。之后根据环境变量配置文件中的内容，确定部署的目标环境。例如：如果某个环境变量的值为“production”，则表示部署在生产环境中，即目标环境为生产环境。其中，前端项目采用同一打包镜像文件在不同环境中部署，表示前端项目在部署时使用相同的打包镜像文件，但可以根据不同的环境设置不同的配置，且配置可以在项目部署阶段通过独立于打包镜像文件的形式存在。
本实施例中，通过确定前端项目当前部署的目标环境，为之后获取目标环境的属性配置数据，提供了数据基础。并且前端项目采用同一打包镜像文件在不同环境中部署，简化了前端项目的构建和部署过程，提高了可维护性、可扩展性和一致性。
步骤120、从前端项目的环境属性配置文件中获取目标环境的属性配置数据。
具体地，环境属性配置文件为存储环境配置信息的文件。目标环境的属性配置数据指在环境属性配置文件中，针对目标环境的配置数据。示例性的，目标环境的属性配置数据可以是目标服务器的IP地址、端口号和/或访问路径等，本发明实施例对此不进行限制。
具体实现中，首先，需要确定环境属性配置文件的位置。然后使用适当的工具或方法来读取环境属性配置文件。例如：在前端项目中，可以使用Node.js的fs模块来读取文件内容。在读取了配置文件的内容后，需要解析其中的数据，例如：配置文件使用键值对的形式存储数据时，可以使用JavaScript的split方法来分割每一行，并使用split方法再次分割以获取键和值。然后根据目标环境的名称或标识符，查找对应的键值对，即，目标环境的属性配置数据，并将其提取出来，便于后续的使用。
另外，在解析配置数据之前，可以验证目标环境是否在配置文件中定义了相应的属性。通过检查配置文件中的内容，确保目标环境的属性存在并且具有有效的值。
本实施例中，通过获取目标环境的属性配置数据，为之后得到前端项目的项目数据，提供了数据基础。
步骤130、根据属性配置数据访问目标环境对应的目标服务器，以获取前端项目的项目数据。
具体地，前端项目的项目数据是指存储在前端项目中使用的数据，通常用于填充页面、驱动前端项目逻辑和与后端服务器进行通信。
具体实现中，在得到属性配置数据之后，可以通过属性配置数据得到目标服务器相关信息，这些信息将用于构建与目标服务器进行通信的请求。例如：目标服务器相关信息可以是目标服务器的IP地址、端口号和访问路径等。使用目标服务器相关信息，建立与目标服务器的网络连接。在建立了网络连接后，可以通过发送超文本传输协议请求(Hyper TextTransfer Protocol Request，HTTP)来获取前端项目的项目数据。在得到数据之后可能需要进一步处理返回的数据。例如：解析数据、处理错误响应等。处理完数据后，根据需要可以将数据存储在本地变量、状态管理库或持久化存储中，以便在之后实现前端项目中使用。
本实施例中，通过获取前端项目的项目数据，为之后实现前端项目提供了数据基础。
步骤140、根据项目数据实现前端项目。
具体实现中，在获取项目数据后，对其进行处理，将其转换为适合前端使用的格式。之后把处理后的项目数据渲染到前端界面上。例如：使用模板引擎或框架提供的模板功能来动态生成超文本标记语言(Hyper Text Markup Language，HTML)内容，供用户访问。
另外，在实现前端项目后，可以持续监控项目的性能和稳定性，并定期进行维护和更新。处理任何潜在的问题和漏洞，并根据用户反馈进行改进和优化。
本实施例中，根据项目数据实现前端项目，生成了用户可以使用的可视化界面，方便了用户的操作。
本发明实施例的方案，通过查询前端项目的容器配置文件中挂载的环境变量配置文件，以确定前端项目当前部署的目标环境，为之后获取目标环境的属性配置数据，提供了数据基础。并且前端项目采用同一打包镜像文件在不同环境中部署，简化了前端项目的构建和部署过程，提高了可维护性和可扩展性。之后从前端项目的环境属性配置文件中获取目标环境的属性配置数据，为之后得到前端项目的项目数据，提供了数据基础。然后根据属性配置数据访问目标环境对应的目标服务器，以获取前端项目的项目数据，为之后实现前端项目提供了数据基础。最后根据项目数据实现前端项目，生成了用户可以使用的可视化界面，方便了用户的操作。即本发明通过改进项目部署过程，在部署项目时，在项目的容器配置文件中挂载环境变量配置文件，容器配置文件中挂载的环境变量配置文件具有最高的执行优先级，使得项目在运行的过程中，可以优先执行环境变量配置文件，以获取部署环境相关数据，从而让项目可以适应不同的部署环境，一个项目采用同一打包镜像文件可以在不同环境中部署，即各个环境中部署的打包结果是一致的，可以解决不同环境下的打包结果不一致导致的各种问题，从而提高了前端开发的效率和稳定性。
图2是本发明实施例提供的前端项目实现方法的另一个流程示意图。如图2所示，本实施例的前端项目实现方法可包括如下步骤：
步骤211、获取为了将前端项目在预设环境中部署而打包生成的代码包。
具体地，预设环境指的是事先配置好的环境，用于部署和运行前端项目，预设环境包括开发环境、测试环境、预发环境、灰度环境或生产环境，预设环境与目标环境相同，或者预设环境与目标环境不同。打包生成指的是将前端项目的源代码进行编译、优化和整合，生成可以在浏览器中运行的代码包。代码包指的是经过打包生成的代码文件集合，包含了前端项目所需的所有资源文件和依赖项。部署指的是将前端项目部署到预设环境中，使其能够正常运行并提供服务。
具体实现中，可以通过查找打包的输出目录，找到打包生成的代码包，在找到代码包后，需要对其进行检查，确保代码包包含所有必要的文件和资源。例如：在打包配置中，可以开启source map功能，将压缩的代码映射回原始源代码，方便工作人员在浏览器中调试和查看原始代码，对其进行检查。在检查完确认无误后，就可以将其制作成打包镜像文件。
本实施例中，通过获取打包好的代码包，为之后制作打包镜像文件提供了数据基础。
步骤212、根据代码包制作打包镜像文件。
具体地，打包镜像文件是一种特殊的文件格式，用于描述一个前端项目或环境的完整映像。它包含了运行前端项目所需的所有文件和依赖项，以及可能的配置信息。
具体实现中，先编写Dockerfile文件，在Dockerfile文件所在目录下执行相应的命令构建镜像，例如：命令可以是docker build-t your-image-name.，这个命令会使用当前目录下的Dockerfile文件构建一个名为your-image-name的镜像。镜像构建完成后，可以使用对应的命令运行镜像，例如：命令可以是docker run-p 8080:8080your-image-name，这个命令会将容器的8080端口映射到主机的8080端口，并启动your-image-name镜像。其中，Dockerfile文件是构建镜像的脚本文件，可以指定镜像的基础镜像、安装依赖、拷贝源码等操作。例如：在创建一个名为Dockerfile的文件后，如果使用的是Node.js，可以选择一个Node.js的基础镜像。之后使用COPY指令将代码包从本地文件系统复制到Docker镜像的特定目录中。然后可以在Dockerfile中使用RUN指令安装依赖项，并使用CMD指令定义容器启动时要运行的命令。
本实施例中，根据代码包制作打包镜像文件可以提高前端项目的可移植性、一致性、隔离性、安全性，并且可以简化部署过程和易于管理。
步骤213、获取目标环境的环境标识，将环境标识写入环境变量配置文件。
具体地，目标环境包括开发环境、测试环境、预发环境、灰度环境或生产环境。环境标识通常是一个字符串或标识符，用于在部署过程中识别和区分不同的环境。例如：环境标识可以是test、dev、grey或prod等，本发明实施例对此不进行限制。
具体实现中，可以通过读取配置文件、命令行参数或环境变量等方式获取目标环境的环境标识。在获得目标环境的环境标识之后，可以将其写入环境变量配置文件。例如：在前端项目中，可以以键值对的形式写入config.js环境变量配置文件，如图3所示，config.js文件可以存放在根目录的public文件里。具体而言，可以使用文本编辑器或配置管理工具来编辑环境变量配置文件，并将目标环境的环境标识作为其中一个环境变量添加到文件中。
本实施例中，通过将环境标识写入环境变量配置文件，可以在前端项目运行时访问和使用这些环境变量，以便根据不同的环境执行相应的配置和行为，确保了前端项目在不同环境中的一致性和可维护性。
步骤214、在前端项目的页面索引文件中引用环境变量配置文件。
具体地，页面索引文件指的是项目的入口文件，这个文件是访问前端项目时加载的第一个文件，用于引导和加载其他页面或资源，例如：页面索引文件可以是index.html。
具体实现中，在页面索引文件中，使用适当的标记或语法来引入环境变量配置文件。例如：在HTML文件中使用<script>标签来加载外部JavaScript文件，即环境变量配置文件。
本实施例中，通过在页面索引文件中引入环境变量配置文件，来确保前端项目在运行时能够访问和使用正确的环境变量，从而确保前端项目在不同环境中的一致性和可维护性。
步骤215、根据引用的环境变量配置文件中的环境标识确定目标环境。
具体实现中，可以通过使用JavaScript或其他前端技术来读取环境变量配置文件的内容，并获取其中的环境变量信息。然后从获取的环境变量信息中，解析出环境标识。例如：可以通过读取存储环境标识的变量的值来得到环境标识。在获取了环境标识之后，可以将其与已知的环境标识进行比较。根据比较结果，确定目标环境。例如：如果环境标识为“production”，则可以确定目标环境是生产环境；如果标识为“development”，则可以确定目标环境是开发环境。
本实施例中，根据引用的环境变量配置文件中的环境标识确定目标环境，可以动态确定目标环境，方便更改前端项目的运行环境。
步骤216、将目标环境的属性配置数据写入环境属性配置文件。
具体实现中，根据上述确定的目标环境确定目标环境的属性配置数据。例如：目标环境的属性配置数据可以是前端项目的配置参数、服务端点、数据库连接信息等。然后可以使用文本编辑器或配置管理工具来将目标环境的属性配置数据写入到环境属性配置文件中。例如：环境属性配置文件可以是properties.js文件，如图4所示，properties.js文件可以包括目标环境标识及目标环境的属性配置数据，如：production和生产环境的属性配置数据，development和开发环境的属性配置数据，test和测试环境的属性配置数据。并且在写入时，需要选择适当的格式和结构，以便于后续读取和解析。在将属性配置数据写入环境属性配置文件之后，可以验证数据的正确性和完整性，确保所有必要的属性都已正确设置，并且没有遗漏或错误的配置信息。
本实施例中，通过将目标环境的属性配置数据写入环境属性配置文件，确保了前端项目在目标环境中可以使用正确的配置数据，提高前端项目的可靠性。
步骤217、利用写配置文件语言将环境变量配置文件挂载在容器配置文件中。
具体地，配置文件语言指的是用于编写配置文件的工具或标记语言。例如：配置文件语言可以是INI、JSON、YAML等。
具体实现中，可以根据实际需求或需要选择一种配置文件语言来编写容器配置文件。然后使用适当的编写语句将环境变量配置文件挂载到容器配置文件中，确保正确指定了环境变量配置文件的路径和名称。
本实施例中，利用写配置文件语言将环境变量配置文件挂载在容器配置文件中，从而为容器运行时提供正确的环境变量设置，有助于确保前端环境在不同环境中的一致性和可维护性。
步骤218、查询前端项目的容器配置文件中挂载的环境变量配置文件，以确定前端项目当前部署的目标环境，前端项目采用同一打包镜像文件在不同环境中部署。
具体地，目标环境包括开发环境、测试环境、预发环境、灰度环境或生产环境。
进一步地，确定前端项目当前部署的目标环境，包括：
根据环境变量配置文件中的环境标识确定前端项目当前部署的目标环境。
具体实现中，先读取引用的环境变量配置文件，从环境变量配置文件中，解析出当前环境的标识，根据解析出的环境标识，确定前端项目当前部署的目标环境。例如，如果环境标识为“test”，则可以确定当前部署的目标环境是测试环境。在确定了目标环境之后，可以根据该环境的配置信息来调整前端项目的行为和配置。例如：加载不同的资源文件、调整样式或脚本、设置接口端点等。
本实施例中，根据环境变量配置文件中的环境标识确定前端项目当前部署的目标环境，可以提高前端项目的部署效率。
步骤219、从前端项目的环境属性配置文件中获取目标环境的属性配置数据。
进一步地，从前端项目的环境属性配置文件中获取目标环境的属性配置数据，包括：
判断前端项目的环境属性配置文件中的当前环境标识是否为目标环境的环境标识；
若当前环境标识为目标环境的环境标识，则获取当前环境标识对应的属性配置数据。
具体实现中，读取环境属性配置文件：首先，读取前端项目的环境属性配置文件。其中，环境属性配置文件包含了不同环境的属性配置数据。在读取环境属性配置文件后，将环境变量配置文件中的当前环境标识与环境属性配置文件中的环境标识依次进行匹配。例如：通过遍历的方法来匹配。根据匹配结果，确定前端项目的环境属性配置文件中的当前环境标识是否为目标环境的环境标识。如果当前环境标识与目标环境的环境标识匹配，则可以获取当前环境标识对应的属性配置数据。在获取目标环境的属性配置数据之后，可以根据这些数据来调整前端项目的行为和配置。例如：加载特定的资源、设置接口端点、启用或禁用某些功能等。
本实施例中，通过判断前端项目的环境属性配置文件中的当前环境标识是否为目标环境的环境标识，这有助于确保前端项目在目标环境中使用正确的配置，提高前端项目的可靠性和一致性。
步骤220、根据属性配置数据访问目标环境对应的目标服务器，以获取前端项目的项目数据。
具体实现中，根据属性配置数据，得到目标服务器的相关信息，例如：目标服务器的地址、端口和路径。之后建立与服务器的连接。例如：使用JavaScript的XMLHttpRequest对象或Fetch API来建立与服务器的连接。在连接建立后，通过发送一个HTTP GET请求到服务器的指定路径，以获取项目数据。在接收到数据后，需要对其进行解析，例如：可以使用JSON.parse()方法将数据解析为JavaScript对象。解析后的数据可以存储在前端项目的局部变量中，并用于后续的数据处理和展示。
本实施例中，通过获取前端项目的项目数据，为之后实现前端项目提供了数据基础。
步骤221、根据项目数据实现前端项目。
下面以将一个前端项目应用在不同环境中为例，说明本发明的具体实现过程。以前端项目为前端项目A，需要将前端项目A应用在测试环境和生产环境为例说明。
在项目打包阶段，可以打包成应用于测试环境、生产环境、灰度环境等任意一个环境的代码包，即代码包中的环境相关配置信息可以是任意一个环境的，并将代码包制作成打包镜像文件(例如打包镜像文件X)。
在项目部署阶段，若将前端项目A部署在测试环境，则可以在环境变量配置文件config.js中添加测试环境的环境标识“test”，在前端项目A的页面索引文件index.html文件中引用添加了“test”的环境变量配置文件，并将测试环境的属性配置数据写入环境属性配置文件Properties.js，最后将添加了“test”的环境变量配置文件挂载在前端项目A的容器配置文件YAML文件中。若将前端项目A部署在生产环境，则可以在环境变量配置文件config.js中添加生产环境的环境标识“production”，在前端项目A的页面索引文件index.html文件中引用添加了“production”的环境变量配置文件，并将生产环境的配置数据写入环境属性配置文件Properties.js，最后将添加了“production”的环境变量配置文件挂载在前端项目A的容器配置文件YAML文件中。
在项目运行阶段，可以查询前端项目A的容器配置文件YAML文件中挂载的环境变量配置文件config.js，以确定前端项目A当前部署的目标环境。例如，如果config.js中的环境标识是“test”，则确定前端项目A当前部署在测试环境，则可以从前端项目A的环境属性配置文件Properties.js获取测试环境的属性配置数据，根据测试环境的属性配置数据从测试服务器获取前端项目A的项目数据，根据获取的项目数据实现前端项目A。例如，如果config.js中的环境标识是“production”，则确定前端项目A当前部署在生产环境，则可以从前端项目A的环境属性配置文件Properties.js获取生产环境的属性配置数据，根据生产环境的属性配置数据从生产服务器获取前端项目A的项目数据，根据获取的项目数据实现前端项目A。
通过上面举例可以看出，采用本发明的方法，可以将环境配置相关数据通过YAML文件挂载，从而可以通过改变YAML文件的挂载文件改变部署和运行环境，而不用通过改变代码包内部本身的环境配置相关数据来适应不同的部署和运行环境，YAML文件中挂载的文件具有最高的执行优先级，在项目运行时，可以优先执行YAML文件中挂载的文件，从而实现了针对同一项目，在不同环境中采用相同的打包镜像文件，即不同环境采用的代码包一致。
本发明实施例的方案，通过获取为了将前端项目在预设环境中部署而打包生成的代码包，为之后制作打包镜像文件提供了数据基础。之后根据代码包制作打包镜像文件可以提高前端项目的可移植性、一致性、隔离性、安全性，并且可以简化部署过程和易于管理。然后获取目标环境的环境标识，将环境标识写入环境变量配置文件，可以让前端项目在运行时访问和使用这些环境变量，以便根据不同的环境执行相应的配置和行为，确保了前端项目在不同环境中的一致性和可维护性。再在前端项目的页面索引文件中引用环境变量配置文件，来确保前端项目在运行时能够访问和使用正确的环境变量，从而确保前端项目在不同环境中的一致性和可维护性。之后根据引用的环境变量配置文件中的环境标识确定目标环境，可以动态确定目标环境，方便更改前端项目的运行环境。然后通过将目标环境的属性配置数据写入环境属性配置文件，确保了前端项目在目标环境中可以使用正确的配置数据，提高前端项目的可靠性。并利用写配置文件语言将环境变量配置文件挂载在容器配置文件中，从而为容器运行时提供正确的环境变量设置，有助于确保前端环境在不同环境中的一致性和可维护性。最后通过查询前端项目的容器配置文件中挂载的环境变量配置文件，以确定前端项目当前部署的目标环境，为之后获取目标环境的属性配置数据，提供了数据基础。并且前端项目采用同一打包镜像文件在不同环境中部署，简化了前端项目的构建和部署过程，提高了可维护性、可扩展性和一致性。之后从前端项目的环境属性配置文件中获取目标环境的属性配置数据，为之后得到前端项目的项目数据，提供了数据基础。然后根据属性配置数据访问目标环境对应的目标服务器，以获取前端项目的项目数据，为之后实现前端项目提供了数据基础。根据项目数据实现前端项目，生成了用户可以使用的可视化界面，方便了用户的操作。即本发明通过改进项目部署过程，在部署项目时，在项目的容器配置文件中挂载环境变量配置文件，容器配置文件中挂载的环境变量配置文件具有最高的执行优先级，使得项目在运行的过程中，可以优先执行环境变量配置文件，以获取部署环境相关数据，从而让项目可以适应不同的部署环境，一个项目采用同一打包镜像文件可以在不同环境中部署，即各个环境中部署的打包结果是一致的，可以解决不同环境下的打包结果不一致导致的各种问题，从而提高了前端开发的效率和稳定性。
图5是本发明实施例提供的前端项目实现装置的一个结构示意图，该装置适用于执行本发明实施例提供的前端项目实现方法，如图5所示，该装置具体可以包括：
环境确定模块510，用于查询前端项目的容器配置文件中挂载的环境变量配置文件，以确定所述前端项目当前部署的目标环境，所述前端项目采用同一打包镜像文件在不同环境中部署；
配置获取模块520，用于从所述前端项目的环境属性配置文件中获取所述目标环境的属性配置数据；
访问模块530，用于根据所述属性配置数据访问所述目标环境对应的目标服务器，以获取所述前端项目的项目数据；
项目实现模块540，用于根据所述项目数据实现所述前端项目。
一实施例中，该装置还包括环境标识获取模块，环境标识获取模块具体用于：
获取所述目标环境的环境标识，将所述环境标识写入所述环境变量配置文件；
所述确定所述前端项目当前部署的目标环境，包括：
根据所述环境变量配置文件中的所述环境标识确定所述前端项目当前部署的目标环境。
一实施例中，环境标识获取模块在将所述环境标识写入所述环境变量配置文件之后，还用于：
在所述前端项目的页面索引文件中引用所述环境变量配置文件；
根据引用的所述环境变量配置文件中的所述环境标识确定所述目标环境；
将所述目标环境的属性配置数据写入所述环境属性配置文件。
一实施例中，环境标识获取模块在将所述环境标识写入所述环境变量配置文件之后，还用于：
利用写配置文件语言将所述环境变量配置文件挂载在所述容器配置文件中。
一实施例中，配置获取模块520具体用于：
判断所述前端项目的环境属性配置文件中的当前环境标识是否为所述目标环境的环境标识；
若所述当前环境标识为所述目标环境的环境标识，则获取所述当前环境标识对应的属性配置数据。
一实施例中，所述目标环境包括开发环境、测试环境、预发环境、灰度环境或生产环境。
一实施例中，该装置还包括打包镜像模块，打包镜像模块具体用于：
获取为了将所述前端项目在预设环境中部署而打包生成的代码包，所述预设环境包括开发环境、测试环境、预发环境、灰度环境或生产环境，所述预设环境与所述目标环境相同，或者所述预设环境与所述目标环境不同；
根据所述代码包制作所述打包镜像文件。
本领域的技术人员可以清楚地了解到，为描述的方便和简洁，仅以上述各功能模块的划分进行举例说明，实际应用中，可以根据需要而将上述功能分配由不同的功能模块完成，即将装置的内部结构划分成不同的功能模块，以完成以上描述的全部或者部分功能。上述描述功能模块的具体工作过程，可以参考前述方法实施例中的对应过程，在此不再赘述。
本发明实施例提供的前端项目实现装置可适用于上述任意实施例提供的前端项目实现方法，具备相应的功能和有益效果。
图6是本发明实施例提供的电子设备的一个结构示意图。图6示出了适于用来实现本发明实施方式的示例性电子设备11的框图。图6显示的电子设备11仅仅是一个示例，不应对本实施例的功能和使用范围带来任何限制。
如图6所示，电子设备11以通用计算电子设备的形式表现。电子设备11的组件可以包括但不限于：一个或者多个处理器或者处理单元16，系统存储器28，连接不同系统组件(包括系统存储器28和处理单元16)的总线18。
总线18表示几类总线结构中的一种或多种，包括存储器总线或者存储器控制器，外围总线，图形加速端口，处理器或者使用多种总线结构中的任意总线结构的局域总线。举例来说，这些体系结构包括但不限于工业标准体系结构(ISA)总线，微通道体系结构(MAC)总线，增强型ISA总线、视频电子标准协会(VESA)局域总线以及外围组件互连(PCI)总线。
电子设备11典型地包括多种计算机系统可读介质。这些介质可以是任何能够被电子设备11访问的可用介质，包括易失性和非易失性介质，可移动的和不可移动的介质。
系统存储器28可以包括易失性存储器形式的计算机系统可读介质，例如随机存取存储器(RAM)30和/或高速缓存存储器32。电子设备11可以进一步包括其它可移动/不可移动的、易失性/非易失性计算机系统存储介质。仅作为举例，存储系统34可以用于读写不可移动的、非易失性磁介质(图6未显示，通常称为“硬盘驱动器”)。尽管图6中未示出，可以提供用于对可移动非易失性磁盘(例如“软盘”)读写的磁盘驱动器，以及对可移动非易失性光盘(例如CD-ROM，DVD-ROM或者其它光介质)读写的光盘驱动器。在这些情况下，每个驱动器可以通过一个或者多个数据介质接口与总线18相连。系统存储器28可以包括至少一个程序产品，该程序产品具有一组(例如至少一个)程序模块，这些程序模块被配置以执行本发明各实施例的功能。
具有一组(至少一个)程序模块42的程序/实用工具40，可以存储在例如系统存储器28中，这样的程序模块42包括但不限于操作系统、一个或者多个应用程序、其它程序模块以及程序数据，这些示例中的每一个或某种组合中可能包括网络环境的实现。程序模块42通常执行本发明所描述的实施例中的功能和/或方法。
电子设备11也可以与一个或多个外部设备14(例如键盘、指向设备、显示器24等)通信，还可与一个或者多个使得用户能与该电子设备11交互的设备通信，和/或与使得该电子设备11能与一个或多个其它计算设备进行通信的任何设备(例如网卡，调制解调器等)通信。这种通信可以通过输入/输出(I/O)接口22进行。并且，电子设备11还可以通过网络适配器20与一个或者多个网络(例如局域网(LAN)，广域网(WAN)和/或公共网络，例如因特网)通信。
如图6所示，网络适配器20通过总线18与电子设备11的其它模块通信。应当明白，尽管图6中未示出，可以结合电子设备11使用其它硬件和/或软件模块，包括但不限于：微代码、设备驱动器、冗余处理单元、外部磁盘驱动阵列、RAID系统、磁带驱动器以及数据备份存储系统等。
处理单元16通过运行存储在系统存储器28中的程序，从而执行各种功能应用以及页面显示，例如实现本实施例所提供的前端项目实现方法，该方法包括：
查询前端项目的容器配置文件中挂载的环境变量配置文件，以确定所述前端项目当前部署的目标环境，所述前端项目采用同一打包镜像文件在不同环境中部署；
从所述前端项目的环境属性配置文件中获取所述目标环境的属性配置数据；
根据所述属性配置数据访问所述目标环境对应的目标服务器，以获取所述前端项目的项目数据；
根据所述项目数据实现所述前端项目。
当然，本领域技术人员可以理解，处理器还可以实现本发明任意实施例所提供的前端项目实现方法的技术方案。
本发明提供了一种计算机可读存储介质，其上存储有计算机程序，该程序被处理器执行时实现例如本发明所提供的前端项目实现方法，该方法包括：
查询前端项目的容器配置文件中挂载的环境变量配置文件，以确定所述前端项目当前部署的目标环境，所述前端项目采用同一打包镜像文件在不同环境中部署；
从所述前端项目的环境属性配置文件中获取所述目标环境的属性配置数据；
根据所述属性配置数据访问所述目标环境对应的目标服务器，以获取所述前端项目的项目数据；
根据所述项目数据实现所述前端项目。
本实施例的计算机存储介质，可以采用一个或者多个计算机可读的介质的任意组合。计算机可读介质可以是计算机可读信号介质或者计算机可读存储介质。计算机可读存储介质例如可以是但不限于：电、磁、光、电磁、红外线、或者半导体的系统、装置或者器件，或者任意以上的组合。计算机可读存储介质的更具体的例子(非穷举的列表)包括：具有一个或者多个导线的电连接、便携式计算机磁盘、硬盘、随机存取存储器(RAM)、只读存储器(ROM)、可擦式可编程只读存储器(EPROM或者闪存)、光纤、便携式紧凑磁盘只读存储器(CD-ROM)、光存储器件、磁存储器件、或者上述的任意合适的组合。在本文件中，计算机可读存储介质可以是任何包含或者存储程序的有形介质，该程序可以被指令执行系统、装置或者器件使用或者与其结合使用。
计算机可读的信号介质可以包括在基带中或者作为载波一部分传播的数据信号，其中承载了计算机可读的程序代码。这种传播的数据信号可以采用多种形式，包括但不限于电磁信号、光信号或者上述的任意合适的组合。计算机可读的信号介质还可以是计算机可读存储介质以外的任何计算机可读介质，该计算机可读介质可以发送、传播或者传输用于由指令执行系统、装置或者器件使用或者与其结合使用的程序。
计算机可读介质上包含的程序代码可以用任何适当的介质传输，包括但不限于：无线、电线、光缆、RF等等，或者上述的任意合适的组合。
可以以一种或者多种程序设计语言或者其组合来编写用于执行本发明操作的计算机程序代码，程序设计语言包括面向对象的程序设计语言，诸如Java、Smalltalk、C++，还包括常规的过程式程序设计语言—诸如“C”语言或者类似的程序设计语言。程序代码可以完全地在用户计算机上执行、部分地在用户计算机上执行、作为一个独立的软件包执行、部分在用户计算机上部分在远程计算机上执行、或者完全在远程计算机或者服务器上执行。在涉及远程计算机的情形中，远程计算机可以通过任意种类的网络，包括局域网(LAN)或者广域网(WAN)，连接到用户计算机，或者，可以连接到外部计算机(例如利用因特网服务提供商来通过因特网连接)。
本领域普通技术人员应该明白，上述的本发明的各模块或者各步骤可以用通用的计算装置来实现，它们可以集中在单个计算装置上，或者分布在多个计算装置所组成的网络上，可选地，他们可以用计算机装置可执行的程序代码来实现，从而可以将它们存储在存储装置中由计算装置来执行，或者将它们分别制作成各个集成电路模块，或者将它们中的多个模块或者步骤制作成单个集成电路模块来实现。这样，本发明不限制于任何特定的硬件和软件的结合。
另外，本发明技术方案中对数据的获取、存储、使用、处理等均符合国家法律法规的相关规定。
注意，上述仅为本发明的较佳实施例及所运用技术原理。本领域技术人员会理解，本发明不限于这里的特定实施例，对本领域技术人员来说能够进行各种明显的变化、重新调整和替代而不会脱离本发明的保护范围。因此，虽然通过以上实施例对本发明进行了较为详细的说明，但是本发明不仅仅限于以上实施例，在不脱离本发明构思的情况下，还可以包括更多其他等效实施例，而本发明的范围由所附的权利要求范围决定。
Claims (10)
1.一种前端项目实现方法，其特征在于，包括：
查询前端项目的容器配置文件中挂载的环境变量配置文件，以确定所述前端项目当前部署的目标环境，所述前端项目采用同一打包镜像文件在不同环境中部署；
从所述前端项目的环境属性配置文件中获取所述目标环境的属性配置数据；
根据所述属性配置数据访问所述目标环境对应的目标服务器，以获取所述前端项目的项目数据；
根据所述项目数据实现所述前端项目。
2.根据权利要求1所述的前端项目实现方法，其特征在于，在查询前端项目的容器配置文件中挂载的环境变量配置文件之前，还包括：
获取所述目标环境的环境标识，将所述环境标识写入所述环境变量配置文件；
所述确定所述前端项目当前部署的目标环境，包括：
根据所述环境变量配置文件中的所述环境标识确定所述前端项目当前部署的目标环境。
3.根据权利要求2所述的前端项目实现方法，其特征在于，在将所述环境标识写入所述环境变量配置文件之后，还包括：
在所述前端项目的页面索引文件中引用所述环境变量配置文件；
根据引用的所述环境变量配置文件中的所述环境标识确定所述目标环境；
将所述目标环境的属性配置数据写入所述环境属性配置文件。
4.根据权利要求2所述的前端项目实现方法，其特征在于，在将所述环境标识写入所述环境变量配置文件之后，还包括：
利用写配置文件语言将所述环境变量配置文件挂载在所述容器配置文件中。
5.根据权利要求1所述的前端项目实现方法，其特征在于，所述从所述前端项目的环境属性配置文件中获取所述目标环境的属性配置数据，包括：
判断所述前端项目的环境属性配置文件中的当前环境标识是否为所述目标环境的环境标识；
若所述当前环境标识为所述目标环境的环境标识，则获取所述当前环境标识对应的属性配置数据。
6.根据权利要求1所述的前端项目实现方法，其特征在于，所述目标环境包括开发环境、测试环境、预发环境、灰度环境或生产环境。
7.根据权利要求1所述的前端项目实现方法，其特征在于，所述打包镜像文件通过如下方式生成：
获取为了将所述前端项目在预设环境中部署而打包生成的代码包，所述预设环境包括开发环境、测试环境、预发环境、灰度环境或生产环境，所述预设环境与所述目标环境相同，或者所述预设环境与所述目标环境不同；
根据所述代码包制作所述打包镜像文件。
8.一种前端项目实现装置，其特征在于，包括：
环境确定模块，用于查询前端项目的容器配置文件中挂载的环境变量配置文件，以确定所述前端项目当前部署的目标环境，所述前端项目采用同一打包镜像文件在不同环境中部署；
配置获取模块，用于从所述前端项目的环境属性配置文件中获取所述目标环境的属性配置数据；
访问模块，用于根据所述属性配置数据访问所述目标环境对应的目标服务器，以获取所述前端项目的项目数据；
项目实现模块，用于根据所述项目数据实现所述前端项目。
9.一种电子设备，包括存储器、处理器及存储在所述存储器上并可在所述处理器上运行的计算机程序，其特征在于，所述处理器执行所述程序时实现如权利要求1至7中任一项所述的前端项目实现方法。
10.一种计算机可读存储介质，其上存储有计算机程序，其特征在于，该程序被处理器执行时实现如权利要求1至7中任一项所述的前端项目实现方法。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202410109340.1A CN117931219A (zh) | 2024-01-25 | 2024-01-25 | 前端项目实现方法、装置、电子设备和存储介质 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202410109340.1A CN117931219A (zh) | 2024-01-25 | 2024-01-25 | 前端项目实现方法、装置、电子设备和存储介质 |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN117931219A true CN117931219A (zh) | 2024-04-26 |
Family
ID=90762578
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202410109340.1A Pending CN117931219A (zh) | 2024-01-25 | 2024-01-25 | 前端项目实现方法、装置、电子设备和存储介质 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN117931219A (zh) |
Cited By (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN118626111A (zh) * | 2024-08-13 | 2024-09-10 | 山东未来网络研究院(紫金山实验室工业互联网创新应用基地) | 一种前端项目部署优化方法及系统 |
-
2024
- 2024-01-25 CN CN202410109340.1A patent/CN117931219A/zh active Pending
Cited By (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN118626111A (zh) * | 2024-08-13 | 2024-09-10 | 山东未来网络研究院(紫金山实验室工业互联网创新应用基地) | 一种前端项目部署优化方法及系统 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN111680253B (zh) | 页面应用数据包生成方法、装置、计算机设备及存储介质 | |
| US9529662B1 (en) | Dynamic rule-based automatic crash dump analyzer | |
| US20180121320A1 (en) | Analysis to check web api code usage and specification | |
| US20230161694A1 (en) | Orchestration for automated performance testing | |
| US20150378864A1 (en) | Systems and methods for instrumenting applications for performance monitoring | |
| US11741002B2 (en) | Test automation systems and methods using logical identifiers | |
| CN111221572B (zh) | 一种自动适配运行环境的方法、装置、介质和设备 | |
| CN113885849B (zh) | 基于工业互联网平台的应用开发方法、装置及终端设备 | |
| CN112631590B (zh) | 组件库生成方法、装置、电子设备和计算机可读介质 | |
| US11288170B1 (en) | Log analysis debugging without running on real production environment | |
| CN110888794B (zh) | 接口测试方法和装置 | |
| CN116028028B (zh) | 请求函数生成方法、装置、设备及存储介质 | |
| CN112463256A (zh) | 确定配置文件的方法、系统、电子设备及存储介质 | |
| CN113836014A (zh) | 一种接口测试方法、装置、电子设备和存储介质 | |
| CN115658496A (zh) | 可扩展的Web自动化测试方法、系统、设备及存储介质 | |
| CN111752820B (zh) | gRPC接口的压力测试方法、计算机设备和存储介质 | |
| CN117632710A (zh) | 测试代码的生成方法、装置、设备及存储介质 | |
| CN111258802A (zh) | 捕获应用程序崩溃信息的方法及相关设备 | |
| CN114217789A (zh) | 功能组件拓展方法、装置、设备、存储介质及程序产品 | |
| US10606569B2 (en) | Declarative configuration elements | |
| CN113032256A (zh) | 自动化测试方法、装置、计算机系统和可读存储介质 | |
| CN116756016A (zh) | 多浏览器测试方法、装置、设备、介质及程序产品 | |
| CN109492144B (zh) | 软件系统的关联关系分析方法、装置和存储介质 | |
| US20190317877A1 (en) | Application state monitoring | |
| US11947966B2 (en) | Identifying computer instructions enclosed by macros and conflicting macros at build time |
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 |