CN118092883A - 一种前端项目嵌套方法、装置、存储介质及计算机设备 - Google Patents

Abstract

本发明公开了的一种前端项目嵌套方法、装置、存储介质及计算机设备，涉及计算机技术领域。其中方法包括：首先对第一项目进行打包，得到第一项目的打包文件，获取第一项目的打包文件中的js文件的地址信息，然后基于所述js文件的地址信息在第二项目中引入所述js文件，最后在所述第二项目中通过所述js文件加载所述第一项目中的目标资源。上述方法通过在第二项目中加载第一项目的js文件，无需通过微前端框架即可实现在第二项目中嵌套第一项目，使无法使用npm引入包的前端项目也可以实现项目嵌套。

Description

一种前端项目嵌套方法、装置、存储介质及计算机设备

技术领域

本发明涉及计算机技术领域，尤其是涉及一种前端项目嵌套方法、装置、存储介质及计算机设备。

背景技术

前端项目嵌套是将一个前端项目的页面或模块嵌入到另一个前端项目中，以实现不同项目或模块的集成。在前端项目的开发中，通过将不同的前端项目进行嵌套，可以扩展页面或应用的功能，提供更好的用户体验，还可以实现代码的复用，提高开发效率，便于项目维护。

传统的解决前端项目嵌套通常使用微前端框架来实现，这种方法需要前端项目支持npm(Node Package Manager，节点包管理器)安装微前端框架包，对于使用cdn(ContentDelivery Network，内容分发网络)引入包的旧前端框架很不友好，但是多数有微前端使用需求的都是在新项目和旧项目之间切换过度或者不同技术框架并行使用等，因此亟需提供一种新的前端项目嵌套方法，以使无法使用npm引入包的前端项目也可以实现项目嵌套。

发明内容

有鉴于此，本申请提供了一种前端项目嵌套方法、装置、存储介质及计算机设备，主要目的在于解决通过微前端框架进行前端项目嵌套不支持无法使用npm引入包的项目的技术问题。

根据本发明的第一个方面，提供了一种前端项目嵌套方法，该方法包括：

对第一项目进行打包，得到第一项目的打包文件；

获取第一项目的打包文件中的js文件的地址信息；

基于js文件的地址信息在第二项目中引入js文件；

在第二项目中通过js文件加载第一项目中的目标资源。

可选的，基于地址信息在第二项目中引入js文件，包括：

在第二项目中创建script标签；

基于地址信息，通过script标签在第二项目中引入js文件。

可选的，基于地址信息在第二项目中引入js文件，还包括：

在第二项目中调用目标函数，通过目标函数引入js文件，其中，目标函数用于创建script标签，并将js文件的地址信息添加到script标签中。

可选的，在第二项目中通过js文件加载第一项目中的目标资源，包括：

在第二项目的目标页面中调用目标函数，加载js文件；

通过js文件读取目标页面对应的目标路由；

根据目标路由执行js文件中的与目标路由对应的目标程序；

通过目标程序加载第一项目中与目标页面对应的目标资源。

可选的，所述方法还包括：

在第一项目中创建与第二项目中的目标页面相对应的第一页面；

为第一页面和目标页面设置相同的路由，得到目标路由，以通过目标路由在目标页面中加载第一页面对应的目标资源。

可选的，所述方法还包括：

获取第二项目中的公共资源，将公共资源注册为第二项目的window对象中的公共函数；

在第一项目中通过调用公共函数加载第二项目中的公共资源。

可选的，在获取第一项目的js文件的地址信息之前，所述方法还包括：

通过webpack打包工具将第一项目打包得到打包文件；

将打包文件上传至服务器的指定路径中，以根据服务器的指定路径获取打包文件中的js文件的地址信息。

根据本发明的第二个方面，提供了一种前端项目嵌套装置，该装置包括：

项目打包模块，用于对第一项目进行打包，得到第一项目的打包文件；

数据获取模块，用于获取第一项目的打包文件中的js文件的地址信息；

项目引入模块，用于基于js文件的地址信息在第二项目中引入js文件；

资源加载模块，用于在第二项目中通过js文件加载第一项目中的目标资源。

根据本发明的第三个方面，提供了一种存储介质，其上存储有计算机程序，所述程序被处理器执行时实现上述前端项目嵌套方法。

根据本发明的第四个方面，提供了一种计算机设备，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，所述处理器执行所述程序时实现上述前端项目嵌套方法。

本发明提供的一种前端项目嵌套方法、装置、存储介质及计算机设备，首先对第一项目进行打包，得到第一项目的打包文件，获取第一项目的打包文件中的js文件的地址信息，然后基于所述js文件的地址信息在第二项目中引入所述js文件，最后在所述第二项目中通过所述js文件加载所述第一项目中的目标资源。本申请通过在第二项目中加载第一项目的js文件，无需通过微前端框架即可实现在第二项目中嵌套第一项目，使无法使用npm引入包的前端项目也可以实现项目嵌套。

上述说明仅是本申请技术方案的概述，为了能够更清楚了解本申请的技术手段，而可依照说明书的内容予以实施，并且为了让本申请的上述和其它目的、特征和优点能够更明显易懂，以下特举本申请的具体实施方式。

附图说明

此处所说明的附图用来提供对本发明的进一步理解，构成本申请的一部分，本发明的示意性实施例及其说明用于解释本发明，并不构成对本发明的不当限定。在附图中：

图1示出了本发明实施例提供的一种前端项目嵌套方法的流程示意图；

图2示出了本发明实施例提供的另一种前端项目嵌套方法的流程示意图；

图3示出了本发明实施例提供的另一种前端项目嵌套方法的流程示意图；

图4示出了本发明实施例提供的一种前端项目嵌套装置的结构示意图；

图5示出了本发明实施例提供的一种存储介质及计算机设备的结构示意图。

具体实施方式

下文中将参考附图并结合实施例来详细说明本发明。需要说明的是，在不冲突的情况下，本申请中的实施例及实施例中的特征可以相互组合。

本申请的各个实施例中，“第一”、“第二”及各种数字编号仅为描述方便进行的区分，并不用来限制本申请实施例的范围。“至少一个”是指一个或多个，“多个”是指两个或两个以上。“和/或”，描述关联对象的关联关系，表示可以存在三种关系，例如，A和/或B，可以表示：单独存在A，同时存在A和B，单独存在B的情况，其中，A，B可以是单数或者复数。字符“/”一般表示前后关联对象是一种“或”的关系。

在一个实施例中，如图1所示，提供了一种前端项目嵌套方法，包括以下步骤：

101、对第一项目进行打包，得到第一项目的打包文件；

102、获取第一项目的打包文件中的js文件的地址信息；

103、基于js文件的地址信息在第二项目中引入js文件；

104、在第二项目中通过js文件加载第一项目中的目标资源。

前端项目是指设计和开发网页、移动应用或其他数字产品的用户界面部分，前端项目开发主要涉及使用HTML(Hyper Text Markup Language，超文本标记语言)、CSS(Cascading Style Sheets，层叠样式表)和JavaScript等技术，为网页和Web应用程序构建具有交互功能的页面，前端项目可以与后端服务器通信，以从服务器检索或储存数据。前端项目的开发具体包括：使用HTML创建网页的整体结构，并确定页面的布局和组织方式；使用CSS设置网页样式，例如颜色、字体、背景、边框等，以达到设计要求；使用JavaScript编写交互逻辑和动态功能，例如事件处理、表单验证、页面加载效果、动画等。

在前端项目开发中，为了扩展页面或应用功能，以及更好地组织和管理前端资源，提高代码的可维护性和复用性，通常会涉及前端项目嵌套。在本实施例中，所述第一项目为被嵌套的项目，通过本申请实施例提供的前端项目嵌套方法将第一项目嵌入到第二项目，以实现在第二项目中加载第一项目资源的目的。

在本申请实施例中，首先对第一项目进行打包得到打包文件，打包文件通常包括HTML文件、CSS文件、JavaScript文件、图片和其他静态资源等。其中，JavaScript是一种具有函数优先的轻量级，解释型或即时编译型的编程语言，支持面向对象、命令式、声明式、函数式编程范式，是前端项目开发中的核心技术之一。JavaScript在前端项目中具体可以实现以下功能：

DOM(Document Object Model，文档对象模型)操作：JavaScript可以通过DOMAPI(Application Programming Interface，应用程序编程接口)与页面的HTML元素进行交互。通过DOM可以动态地创建、修改、删除HTML元素的内容、样式和结构。例如可以通过JavaScript来更改页面的文本内容、样式、添加或移除元素等。

事件处理：JavaScript通过添加事件处理程序，可以对用户的点击、鼠标移动、键盘输入等事件做出响应。例如，可以使用JavaScript监听按钮的点击事件，并执行相应的操作。

表单验证与交互：JavaScript可以用于验证用户输入的表单数据，以确保符合特定的规则和条件。通过JavaScript可以检查表单字段是否为空、是否满足特定的格式要求，例如电子邮件的地址格式验证、密码强度检查等。此外，还可以根据用户的输入实时更新表单中的其他字段或呈现不同的选项。

动态内容加载：通过JavaScript，可以使用Ajax(Asynchronous JavaScript andXML，异步JavaScript和XML)技术向服务器请求数据，并将响应的数据动态地插入到页面中，无需刷新整个页面，可以实现网页内容的异步加载和更新。

动画和交互效果：JavaScript通过改变HTML元素的样式属性或使用CSS动画实现各种动态效果。例如，可以通过JavaScript实现滑动、淡入淡出、旋转、展开和折叠等动画效果，以提升用户界面的交互性。

第三方API与服务集成：通过使用JavaScript，可以与第三方提供的API(例如社交媒体API、地图API、支付接口等)进行交互和集成，以增加应用的功能和数据来源。

得到打包文件之后，对打包文件进行解析，获取打包文件中第一项目的JavaScript文件(即js文件)的地址信息，根据js文件的地址信息将第一项目的js文件引入到第二项目中，在第二项目中执行js文件，通过js文件实现的功能在第二项目中加载第一项目对应的资源。在第二项目中加载js文件时，根据js文件对应的路径加载相应的资源，例如，如果js文件中包含下述代码“var imageUrl＝'./images/image.jpg'；”，在打包后的文件中，假设image.jpg位于同一个目录下的images文件夹中，那么浏览器会根据JavaScript文件所在路径，将./images/image.jpg解析为正确的资源URL，并加载对应的图片。

本实施例提供的前端项目嵌套方法，首先对第一项目进行打包，得到第一项目的打包文件，获取第一项目的打包文件中的js文件的地址信息，然后基于所述js文件的地址信息在第二项目中引入所述js文件，最后在所述第二项目中通过所述js文件加载所述第一项目中的目标资源。本申请通过在第二项目中加载第一项目的js文件，无需通过微前端框架即可实现在第二项目中嵌套第一项目，使无法使用npm引入包的前端项目也可以实现项目嵌套。

进一步的，作为上述实施例具体实施方式的细化和扩展，为了完整说明本实施例的实施过程，提供了另一种前端项目嵌套方法，如图2所示，该方法包括以下步骤：

201、通过webpack打包工具将第一项目打包得到打包文件，将打包文件上传至服务器的指定路径中。

202、根据服务器的指定路径获取打包文件中的js文件的地址信息

203、在第二项目中调用目标函数，通过目标函数引入js文件，其中，目标函数用于创建script标签，并将js文件的地址信息添加到script标签中。

204、在第二项目的目标页面中调用目标函数，加载js文件；通过js文件读取目标页面对应的目标路由；根据目标路由执行js文件中的与目标路由对应的目标程序；通过目标程序加载第一项目中与目标页面对应的目标资源。

在上述实施例中，前端项目在编写完成后需要被部署到服务器或者云平台，以确保网页或应用程序能够正常运行和访问。在将前端项目部署到服务器之前需要通过webpack等打包工具对前端项目进行打包，然后将打包文件上传至服务器上的指定目录中。

在进行项目嵌套时，根据打包文件在服务器中的存储路径获取打包文件中js文件的地址，在第二项目中需要嵌套第一项目的位置创建一个空的script标签，在script标签中添加js文件的地址将js文件引入到这个空的script标签中。或者在第二项目中创建用于引入js文件的目标函数，目标函数包括创建script标签，并根据js文件的地址将js文件添加到script标签中。

其中，前端项目至少包括一个页面，可以针对其中的一个页面进行项目嵌套，将该页面视为目标页面。在第二项目的目标页面中通过调用并执行目标函数将第一项目的js文件引入到第二项目中。

在前端项目开发中需要在项目中设置路由规则，并将路由组件与对应的URL(Uniform Resource Locator，统一资源定位符)进行映射，以实现在用户访问特定的URL时，根据路由规则找到对应的组件并渲染到页面中。第二项目中引入js文件之后，为了实现在通过js文件访问第一项目中的资源，需要为第一项目和第二项目对应的页面配置相同的路由。

在一种可选的实施例中，在第一项目中创建与第二项目中的目标页面相对应的第一页面；为第一页面和目标页面设置相同的路由，得到目标路由，以通过目标路由在目标页面中加载第一页面对应的目标资源。

在上述实施例中，在第一项目的开发过程中，为第一项目的第一页面和第二项目的目标页面设置相同的路由，其中，第一页面为与目标页面对应的页面，即在目标页面中嵌入第一页面对应的内容。在目标页面中执行目标函数引入js文件之后，js文件读取目标页面的路由信息，根据路由信息执行与目标路由对应的目标程序，通过目标程序加载第一页面中与目标页面对应的目标资源。在目标页面中可以创建div元素，并将引入js文件的script标签插入到这个div元素中，即可通过div元素展示第一次项目中与目标路由对应的内容。

在一种可选的实施例中，获取第二项目中的公共资源，将公共资源注册为第二项目的window对象中的公共函数；在第一项目中通过调用公共函数加载第二项目中的公共资源。

在上述实施例中，将第二项目中的公共资源注册为window对象中个公共函数，其中，公共资源可以包括样式、效果等通用方法，在第一项目的开发过程中可以通过调用公共函数加载第二项目中相应的公共资源。

本实施例提供的前端项目嵌套方法，首先对第一项目进行打包，得到第一项目的打包文件，获取第一项目的打包文件中的js文件的地址信息，然后基于所述js文件的地址信息，通过script标签在第二项目中引入所述js文件，最后在所述第二项目中根据目标路由，利用所述js文件加载所述第一项目中的目标资源。另外，将第二项目中的公共资源注册为window对象中的公共函数，在第一项目中通过调用公共函数加载第二项目中的公共资源。本申请通过在第二项目中加载第一项目的js文件实现项目嵌套，并且可以在第一项目中加载第二项目中的公共资源，无需通过微前端框架即可实现在第二项目中嵌套第一项目，使无法使用npm引入包的前端项目也可以实现项目嵌套。

进一步的，如图3所示，作为上述实施例具体实施方式的细化和扩展，以将本申请实施例提供的方法应用于前端项目升级为例，对本申请实施例进行说明：

传统的前端项目嵌套通常使用微前端框架来实现，但是这种方案需要前端项目支持npm安装微前端框架包，而大部分有微前端使用需求的都是在新老项目之间的切换过度，通过微前端框架实现项目嵌套，对于使用cdn引入包的旧前端框架很不友好。

在一种可选的实施例中，由于前端项目往往涉及多个页面或者模块，实现项目完全升级需要耗费较长的时间。为了尽快使新项目中的功能上线，通过本申请实施例提供的前端项目嵌套方法实现在不支持npm安装微前端框架包旧项目中嵌套新项目，进而实现在不影响旧项目的使用的的情况下，可以在旧项目中访问新项目中的资源。其中，第二项目为旧项目，第一项目为对旧项目进行升级的新项目。

在上述实施例中，在新项目开发的过程中，需要针对旧项目的页面在新项目中添加相应的页面或功能模块实现对旧项目内容的升级。以在新页面中添加与旧项目相对应的页面为例，针对旧项目中的目标页面，在新项目中创建相应的第一页面，并将第一页面的路由与目标页面的路由设置为相同的路由，得到目标路由。

在新项目开发的过程中，可能会保留一些旧项目中通用的方法，例如样式等，为了提升开发效率，可以将旧项目中的通用方法对应的公共资源在window中注册为多个公共函数，在新项目中直接调用旧项目中的公共函数，即可加载旧项目中的公共资源。通过在新项目中加载旧项目中的公共资源，可以提高开发效率加快新项目上线的同时，还能避免在新项目中重新编写通用方法可能会导致的与旧项目不一致的情况。在项目的主要功能全部升级完成之后再对新项目中的通用方法进行重新编写以完全替换旧项目，此时再对通用方法进行重新编写也不会影响用户使用，通过这种方法可以加快新项目的上线使用。

在项目升级的过程中，新旧项目的替换过程需要一段过渡期，也就是新项目的开发需要一定的时间，在新项目开发过程中每完成一个页面(任务、模块)升级，将新项目的打包文件进行更新。在旧项目的目标页面中通过目标函数将新项目的js文件引入到旧项目中，js文件运行时通过目标路由在旧项目中加载新项目相应的内容。

如图3所示，新项目更新之后通过webpack将新项目进行打包得到打包文件，在新项目的打包文件中获取新项目的js文件，并将新项目的js文件通过script标签插入到旧项目的HIML文件中，在用户访问旧项目的网站时，在旧项目的HTML文件中运行js文件，通过js文件加载新项目的内容，即可实现在旧项目对应的地址中同时展示旧项目的内容和嵌入的新项目的内容。以此通过新项目逐渐替换旧项目，实现技术框架的升级替换。

本申请实施例提供的前端项目嵌套方法，可以应用在前端项目的升级过程中，在旧项目中逐步嵌入新项目升级的内容，在技术框架进行切换更新时可以无缝衔接，不需要等新项目完全可以替代旧项目时再做替换。并且在新项目开发时可以调用旧项目中通用的资源，实现新旧项目双向通信。

进一步的，作为图1、图2、图3所示方法的具体实现，本实施例提供了一种前端项目嵌套装置，如图4所示，该装置包括：项目打包模块31、数据获取模块32、项目引入模块33、资源加载模块34。

项目打包模块31，可用于对第一项目进行打包，得到第一项目的打包文件。

数据获取模块32，可用于获取第一项目的打包文件中的js文件的地址信息。

项目引入模块33，可用于基于js文件的地址信息在第二项目中引入js文件。

资源加载模块34，可用于在第二项目中通过js文件加载第一项目中的目标资源。

在具体的应用场景中，所述项目打包模块31，具体可用于通过webpack打包工具将第一项目打包得到打包文件，然后将打包文件上传至服务器的指定路径中。

在具体的应用场景中，所述数据获取模块32，具体可用于根据服务器的指定路径获取打包文件中的js文件的地址信息。

在具体的应用场景中，所述项目引入模块33，具体可用于在第二项目中调用目标函数，通过目标函数引入js文件，其中，目标函数用于创建script标签，并将js文件的地址信息添加到script标签中。

在具体的应用场景中，所述资源加载模块34，具体可用于在第二项目的目标页面中调用目标函数，加载js文件；通过js文件读取目标页面对应的目标路由；根据目标路由执行js文件中的与目标路由对应的目标程序；通过目标程序加载第一项目中与目标页面对应的目标资源。

在具体的应用场景中，所述项目引入模块33，具体还可用于获取第二项目中的公共资源，将公共资源注册为第二项目的window对象中的公共函数；在第一项目中通过调用公共函数加载第二项目中的公共资源。

在具体的应用场景中，本装置还包括路由配置模块35，所述路由配置模块35具体可用于在第一项目中创建与第二项目中的目标页面相对应的第一页面；为第一页面和目标页面设置相同的路由，得到目标路由，以通过目标路由在目标页面中加载第一页面对应的目标资源。

需要说明的是，本实施例提供的一种前端项目嵌套装置所涉及各功能单元的其它相应描述，可以参考图1、图2、图3中的对应描述，在此不再赘述。

基于上述如图1、图2、图3所示方法，相应的，本实施例还提供了一种存储介质，其上存储有计算机程序，该程序被处理器执行时实现上述如图1、图2、图3所示的前端项目嵌套方法。

基于这样的理解，本申请的技术方案可以以软件产品的形式体现出来，该待识别软件产品可以存储在一个非易失性存储介质(可以是CD-ROM，U盘，移动硬盘等)中，包括若干指令用以使得一台计算机设备(可以是个人计算机，服务器，或者网络设备等)执行本申请各个实施场景所述的方法。

基于上述如图1、图2、图3所示的方法，以及图4所示的前端项目嵌套装置实施例，为了实现上述目的，如图5所示，本实施例还提供了一种前端项目嵌套的计算机设备，具体可以为个人计算机、服务器、智能手机、平板电脑、智能手表、或者其它网络设备等，该计算机设备包括存储介质和处理器；存储介质，用于存储计算机程序和操作系统；处理器，用于执行计算机程序以实现上述如图1至图3所示的方法。

可选的，该计算机设备还可以包括内存储器、通信接口、网络接口、摄像头、射频(Radio Frequency，RF)电路，传感器、音频电路、WI-FI模块、显示屏(Display)、输入装置比如键盘(Keyboard)等，可选的，通信接口还可以包括USB接口、读卡器接口等。网络接口可选的可以包括标准的有线接口、无线接口(如WI-FI接口)等。

本领域技术人员可以理解，本实施例提供的一种操作动作的识别的计算机设备结构并不构成对该计算机设备的限定，可以包括更多或更少的部件，或者组合某些部件，或者不同的部件布置。

存储介质中还可以包括操作系统、网络通信模块。操作系统是管理上述计算机设备硬件和待识别软件资源的程序，支持信息处理程序以及其它待识别软件和/或程序的运行。网络通信模块用于实现存储介质内部各组件之间的通信，以及与信息处理计算机设备中其它硬件和软件之间通信。

通过以上的实施方式的描述，本领域的技术人员可以清楚地了解到本申请可以借助软件加必要的通用硬件平台的方式来实现，也可以通过硬件实现。通过应用本申请的技术方案，首先对第一项目进行打包，得到第一项目的打包文件，获取第一项目的打包文件中的js文件的地址信息，然后基于所述js文件的地址信息，通过script标签在第二项目中引入所述js文件，最后在所述第二项目中根据目标路由，利用所述js文件加载所述第一项目中的目标资源。另外，将第二项目中的公共资源注册为window对象中的公共函数，在第一项目中通过调用公共函数加载第二项目中的公共资源。并且，本申请提供的技术方案可以应用于项目升级的过程中，在旧项目中逐步嵌入新项目升级的内容，在技术框架进行切换更新时可以无缝衔接，不需要等新项目完全可以替代旧项目时再做替换。并且在新项目开发时可以调用旧项目中通用的资源，实现新旧项目双向通信。与现有技术相比，本申请通过在第二项目中加载第一项目的js文件实现项目嵌套，并且可以在第一项目中加载第二项目中的公共资源，无需通过微前端框架即可实现在第二项目中嵌套第一项目，使无法使用npm引入包的前端项目也可以实现项目嵌套。

本领域技术人员可以理解附图只是一个优选实施场景的示意图，附图中的模块或流程并不一定是实施本申请所必须的。本领域技术人员可以理解实施场景中的装置中的模块可以按照实施场景描述进行分布于实施场景的装置中，也可以进行相应变化位于不同于本实施场景的一个或多个装置中。上述实施场景的模块可以合并为一个模块，也可以进一步拆分成多个子模块。

上述本申请序号仅仅为了描述，不代表实施场景的优劣。以上公开的仅为本申请的几个具体实施场景，但是，本申请并非局限于此，任何本领域的技术人员能思之的变化都应落入本申请的保护范围。

Claims (10)

1.一种前端项目嵌套方法，其特征在于，所述方法包括：

对第一项目进行打包，得到第一项目的打包文件；

获取所述第一项目的打包文件中的js文件的地址信息；

基于所述js文件的地址信息在第二项目中引入所述js文件；

在所述第二项目中通过所述js文件加载所述第一项目中的目标资源。

2.根据权利要求1所述的方法，其特征在于，所述基于所述地址信息在第二项目中引入所述js文件，包括：

在所述第二项目中创建script标签；

基于所述地址信息，通过所述script标签在所述第二项目中引入所述js文件。

3.根据权利要求2所述的方法，其特征在于，所述基于所述地址信息在所述第二项目中引入所述js文件，还包括：

在所述第二项目中调用目标函数，通过所述目标函数引入所述js文件，其中，所述目标函数用于创建script标签，并将所述js文件的地址信息添加到所述script标签中。

4.根据权利要求3所述的方法，其特征在于，所述在所述第二项目中通过所述js文件加载所述第一项目中的目标资源，包括：

在所述第二项目的目标页面中调用所述目标函数，加载所述js文件；

通过所述js文件读取所述目标页面对应的目标路由；

根据所述目标路由执行所述js文件中的与所述目标路由对应的目标程序；

通过所述目标程序加载所述第一项目中与所述目标页面对应的目标资源。

5.根据权利要求1至4任一项所述的方法，其特征在于，所述方法还包括：

在所述第一项目中创建与所述第二项目中的目标页面相对应的第一页面；

为所述第一页面和所述目标页面设置相同的路由，得到目标路由，以通过所述目标路由在所述目标页面中加载所述第一页面对应的目标资源。

6.根据权利要求1所述的方法，其特征在于，所述方法还包括：

获取第二项目中的公共资源，将所述公共资源注册为所述第二项目的window对象中的公共函数；

在第一项目中通过调用所述公共函数加载所述第二项目中的公共资源。

7.根据权利要求1所述的方法，其特征在于，在所述获取第一项目的js文件的地址信息之前，所述方法还包括：

通过webpack打包工具将所述第一项目打包得到打包文件；

将所述打包文件上传至服务器的指定路径中，以根据所述服务器的指定路径获取所述打包文件中的js文件的地址信息。

8.一种前端项目嵌套装置，其特征在于，所述装置包括：

项目打包模块，用于对第一项目进行打包，得到第一项目的打包文件；

数据获取模块，用于获取所述第一项目的打包文件中的js文件的地址信息；

项目引入模块，用于基于所述js文件的地址信息在第二项目中引入所述js文件；

资源加载模块，用于在所述第二项目中通过所述js文件加载所述第一项目中的目标资源。

9.一种存储介质，其上存储有计算机程序，其特征在于，所述计算机程序被处理器执行时实现权利要求1至7中任一项所述的方法的步骤。

10.一种计算机设备，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，其特征在于，所述计算机程序被处理器执行时实现权利要求1至7中任一项所述的方法的步骤。