CN116360779B

CN116360779B - 基于qiankun在Vue CLI应用构建微前端基座的方法

Info

Publication number: CN116360779B
Application number: CN202310647041.9A
Authority: CN
Inventors: 杨登程; 张金银; 王翔; 王乐珩
Original assignee: Hangzhou Bizhi Technology Co ltd
Current assignee: Hangzhou Bizhi Technology Co ltd
Priority date: 2023-06-02
Filing date: 2023-06-02
Publication date: 2023-08-15
Anticipated expiration: 2043-06-02
Also published as: CN116360779A

Abstract

本发明公开了一种基于qiankun在Vue CLI应用构建微前端基座的方法，包括：步骤S110，Vue CLI创建主应用、子应用；步骤S120，主应用和子应用分别安装自定义插件，安装插件时提供选项安装类型是主应用还是子应用，若为子应用则需要输入子应用对应的端口号；步骤S130，检查并修改主应用关于子应用配置信息，由于主应用添加插件后，会重写主应用中App.vue的代码，需要检查data中apps变量关于子应用配置信息的正确性；步骤S140，启动所有应用完成微前端基座搭建。通过插件的特性并结合qiankun微前端框架可快速对批量应用进行微前端基座的搭建。

Description

基于qiankun在Vue CLI应用构建微前端基座的方法

技术领域

本发明涉及计算机及数据处理技术领域，尤其是涉及一种基于qiankun在Vue CLI应用构建微前端基座的方法。

背景技术

微前端是一种多个团队通过独立发布功能的方式来共同构建Web应用的技术手段及方法策略。它旨在解决单体应用在一个相对长的时间跨度下，由于参与的人、团队增多、变迁，从一个普通应用演变成一个“巨石应用”后，随之带来的应用难维护的问题。不少产品构建前端应用所选择的架构方案，特别是多个应用需要融合在一个应用时，不局限于各个子应用的技术栈，用户可以无感知在主应用中对不同的子应用进行切换。

同时微前端有如下特点：

1、与技术栈无关：框架不限制介入应用的技术栈，微前端具备完全的主动权；

2、微前端包含的应用可独立开发、部署：所有应用代码仓库独立，部署完成后框架可自行完成同步更新；

3、增量升级：复杂场景中很难对一个系统做全量的技术栈升级或者重构，通过微前端这一技术手段可以进行渐进式的升级；

4、独立运行时：微前端中每个应用间JS、CSS均会隔离，运行时状态不共享，避免污染；

目前在微前端领域主要方案有以下几种：

1、通过Nginx路由转发：其主要手段是基于Nginx提供的反向代理能力，通过配置不同的路径映射不同的应用，但是这一手段在应用切换时会刷新浏览器降低用户体验；

2、iframe应用嵌套：主应用是单独页面，子应用均使用iframe进行嵌套，由于其自带沙箱可以使得应用间状态、样式不共享，不会出现污染的问题，同时应用间可以使用postMessage或contentWindow的方式进行通讯。但是通过iframe的样式和兼容性使得该手段在微前端应用具有一定的局限性；

3、Web Components：每个应用需要通过Web Components技术编写组件，可以单独部署的同时每个应用间也拥有独立的CSS和JS。但是当面对老项目时，改造成本过高，通信复杂的问题也会随之涌现；

4、组合式应用路由分发：每个应用独立构建部署，主应用通过父应用进行路由管理，子应用的相互隔离、无感知切换是该手段的优势，但是子应用之间样式冲突、变量污染、通信复杂的缺点也随之出现；

不过，通过第三方库qiankun就可以解决巨石应用拆解成若干可以自治的松耦合应用，它支持任意JS框架均可以使用，同时具备微前端需要的基本能力，例如样式隔离、JS沙箱、预加载、应用间通讯等，经过足量的线上系统打磨，稳定性也相对较高。搭建Vue应用微前端基座时，不同类型的应用需要不同配置，并且相同类型的应用需要重复配置。因此，如何解决重复配置和快速实现微前端基座是搭建Vue微前端基座必须要解决的技术问题。

基于以上研究，本发明以插件的形式通过qiankun实现快速在Vue CLI应用构建微前端基座。

发明内容

针对现有技术存在的问题，本发明的目的在于提供一种以插件的形式通过qiankun实现快速在Vue CLI应用构建微前端基座的方法，由于Vue CLI创建的应用结构统一，同时提供了自定义插件的功能，通过插件的特性并结合qiankun微前端框架可快速对批量应用进行微前端基座的搭建。

为实现上述目的，本发明提供一种基于qiankun在Vue CLI应用构建微前端基座的方法，所述方法包括以下步骤：

步骤S110，Vue CLI创建主应用、子应用；

步骤S120，主应用和子应用分别安装微前端CLI插件，安装微前端CLI插件时提供选项安装类型是主应用还是子应用，若为子应用则需要输入子应用对应的端口号；

步骤S130，检查并修改主应用关于子应用配置信息，由于主应用添加微前端CLI插件后，会重写主应用中App.vue的代码，需要检查data中apps变量关于子应用配置信息的正确性；

步骤S140，启动所有应用完成微前端基座搭建。

进一步，在步骤S110中， Vue的版本为2.x并且Vue Router的mode为history。

进一步，步骤S120中具体包括如下流程：

步骤S200.安装微前端CLI插件；当执行vue add 微前端CLI插件名称时，Vue CLI根据插件名称从npm仓库下载相应的插件；

步骤S210.选择应用类型；根据微前端基座的两种应用类型，利用CLI插件的对话选项功能，选择应用类型是主应用还是子应用，并针对不同应用类型插件执行不同的安装操作；

进一步，步骤S210中，在选择的应用类型为主应用时，则执行以下步骤：

步骤S410：在主应用的配置中安装qiankun依赖，同时在应用入口对子应用进行注册；CLI插件中Generator提供了extendPackage API可以方便注入依赖配置；

步骤S420:CLI插件的Generator提供render API，通过使用ejs渲染模版文件的方式修改当前应用中的文件。

进一步，插件内部存放主应用入口文件的模版文件，此时主应用的App.vue被插件中已存在的模版文件App.vue所替换，当前模版文件内容实际上就是使用qiankun注册子应用的信息和qiankun对子应用全生命周期管理的内容。

进一步，在选择的应用类型为子应用时，则会执行以下步骤：

步骤S310:插件提供一个对话选项：输入子应用的端口号，微前端CLI插件缓存当前用户输入的端口号；

步骤S320:在子应用请求头中添加跨域配置；

步骤S330: 子应用入口文件引入qiankun配置并修改子应用入口文件地址；

步骤S340:修改子应用打包模式为umd模式，使主应用能够正确识别子应用；

步骤S350:修改子应用启动命令，在步骤S310中用户输入的端口会在步骤S350中使用，则当前应用在启动时自动在步骤S310输入的端口进行启动；然后进行子应用的qiankun相关配置；

步骤S360：修改子应用路由base地址；通过Generator提供的postProcessFilesAPI对子应用的路由文件内容进行替换，postProcessFiles推送一个文件中间件，将在应用所有正常的文件中间件之后应用，通过正则匹配文本的方式将路由base地址进行替换；

步骤S370：导出qiankun在子应用的生命周期钩子；通过导出的钩子，子应用能够在特定的时机接受来自主应用的调用，从而执行相应的操作；实现子应用和主应用之间协同工作和正确的生命周期管理。

进一步，生命周期钩子包括bootstrap钩子、mount钩子和unmounted钩子；其中：bootstrap钩子用于在子应用被加载之前执行，用于初始化子应用的环境和资源；mount钩子用于在子应用被加载后、即将被渲染到页面上时执行；unmounted钩子用于在子应用从页面上卸载之前执行，用于清理和销毁子应用的资源。

进一步，每个子应用的信息包括子应用应用名称、需要匹配的路由地址、子应用渲染容器和子应用入口路径。

进一步，同时需要在initQiankun方法中检查setDefaultMountApp设置的默认加载子应用信息。

进一步，所述微前端CLI插件包括Generator、Service插件入口、插件包配置、对话选项和Vue UI集成；其中：

Generator为应用扩展依赖，用于创建新的文件或者编辑已经存在的文件；

Service插件入口用于修改webpack配置，创建新的Vue CLI service命令或者修改已经存在的命令；

对话选项用于在创建一个新的应用或者在已有应用中添加新的插件时处理用户选项时使用；

Vue UI集成使得用户能够通过图形接口来架构和管理项目，并且微前端CLI插件的管理也集成到接口中。

本发明的有益效果如下：

当使用微前端CLI插件时，可以轻松地为基于Vue CLI创建的应用程序构建微前端基座。无需手动编写繁琐的配置代码，只需在安装过程中通过选项设置应用类型和端口（子应用需要设置），插件会自动为应用程序添加适当的qiankun配置。

使用该插件后，将节省大量时间和精力，因为它简化了微前端基座的搭建过程。根据本发明的微前端CLI插件会自动处理与qiankun相关的事务，例如应用程序生命周期管理、打包工具配置和路由配置，无需用户手动配置，从而能够快速构建出具有良好微前端架构的应用程序。

由于本发明简化了配置过程，提供了自动化的qiankun集成，节省了大量开发时间。用户仅需要通过三步，即可完成微前端基座搭建。无论是初次尝试微前端架构，还是需要加快开发速度，微前端插件都能很好的提效。

本发明利用Vue CLI插件特性，实现了Vue应用快速完成微前端基座的搭建。使用者无需了解插件的运行过程和微前端实现方式。

附图说明

图1示出了根据本发明实施例的搭建微前端基座的流程图；

图2示出了本发明实施例的插件安装流程。

具体实施方式

下面将结合附图，对本发明的技术方案进行清楚、完整地描述，显然，所描述的实施例是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。

在本发明的描述中，需要说明的是，术语“中心”、“上”、“下”、“左”、“右”、“竖直”、“水平”、“内”、“外”等指示的方位或位置关系为基于附图所示的方位或位置关系，仅是为了便于描述本发明和简化描述，而不是指示或暗示所指的装置或元件必须具有特定的方位、以特定的方位构造和操作，因此不能理解为对本发明的限制。此外，术语“第一”、“第二”、“第三”仅用于描述目的，而不能理解为指示或暗示相对重要性。

在本发明的描述中，需要说明的是，除非另有明确的规定和限定，术语“安装”、“相连”、“连接”应做广义理解，例如，可以是固定连接，也可以是可拆卸连接，或一体地连接；可以是机械连接，也可以是电连接；可以是直接相连，也可以通过中间媒介间接相连，可以是两个元件内部的连通。对于本领域的普通技术人员而言，可以根据具体情况理解上述术语在本发明中的具体含义。

以下结合图1和图2对本发明的具体实施方式进行详细说明。应当理解的是，此处所描述的具体实施方式仅用于说明和解释本发明，并不用于限制本发明。

微前端基座下的应用分为两种类型：主应用和子应用。主应用管控各个子应用的入口，可以通过发布订阅的模式进行应用间的通讯。

当使用qiankun时，主应用中需要在应用入口注册子应用；针对子应用则会相对繁琐，需要导出子应用相应的生命周期钩子、配置打包工具、修改路由配置。

Vue CLI对外提供了自定义插件开发的功能。Vue CLI使用了一套基于插件的架构，而插件都是以@vue/cli-plugin-开头的，一个CLI插件是一个npm包，它能够为Vue CLI创建的应用添加额外的功能，这些功能包括：

修改项目的webpack配置；

添加vue-cli-serve命令；

扩展package.json；

在项目中创建新文件、或者修改老文件；

提示用户选择一个特定的选项。

针对Vue CLI创建的应用，当应用很多时，希望能够减少繁琐的配置并快速搭建微前端基座。

为实现上述目的，图1示出了根据本发明基于qiankun在Vue CLI应用构建微前端基座的方法，包括以下步骤。

步骤S110，Vue CLI创建主应用和子应用；

步骤S140，启动所有应用完成微前端基座搭建；

下文将详细介绍每个步骤的具体实现流程。

具体地，在步骤S110中，由于Vue CLI是一个基于Vue.js进行快速开发的完整系统，因此在创建项目的时候Vue的版本为2.x并且Vue Router的mode为history。完成了S110创建应用后，最重要的就是步骤S120，下面对步骤S120进行详细说明，这也是插件核心部分。

根据本发明的微前端CLI插件包括Generator、Service插件入口、插件包配置（package.json）、对话选项（prompts）和Vue UI集成。其中：

Generator为应用扩展依赖，创建新的文件或者编辑已经存在的文件时需要使用；

Vue UI集成使得用户能够通过图形接口来架构和管理项目，并且CLI插件的管理也集成到接口中；主要是因为Vue CLI对外提供了一个非常强大的UI工具。

综上所述，一个CLI插件结构如下：

丨- README.md(CLI插件说明)

丨- generator.js（Generator入口文件）

丨- index.js（Service插件入口文件）

丨- prompts.js（对话设置文件）

丨- package.json（插件依赖配置）

丨- ui.js（Vue UI集成配置）

本发明微前端CLI插件结构如下：

丨- /generator（Generator相关内容）

丨- /template（模版管理，包含子应用和主应用模版）

丨- /child

丨- main.js

丨- /master

丨- /src

丨- App.vue

丨- child.js（子应用Generator入口）

丨- index.js（Generator入口）

丨- master.js（主应用Generator入口）

丨- index.js（Service插件入口）

丨- prompts.js（对话选项）

丨- public-path.js（qiankun配置文件）

丨- README.md（微前端CLI插件说明）

丨- .gitignore（git忽略文件）

丨- package.json（插件依赖配置）

如图2所示，步骤S120中具体包括如下流程：

步骤S200:安装微前端CLI插件。当执行vue add 微前端CLI插件名称时，Vue CLI根据插件名称从npm仓库下载相应的插件。故本发明的微前端CLI插件按照CLI的要求命名为“vue-cli-plugin-micro-frontend”。

步骤S210:选择应用类型。根据微前端基座的两种应用类型，利用CLI插件的对话选项功能，此处为用户提供了主应用和子应用（对应master和child），在执行安装的第一步，给予用户一个对话：请选择一个应用类型（Pick a project type）：master（主应用）或child（子应用）。针对不同应用类型插件执行不同的操作。

当用户选择的应用类型为master时，当前应用被标记为主应用。则如图2所示执行步骤S410：在主应用的配置中安装qiankun依赖，同时在应用入口对子应用进行注册。CLI插件中Generator提供了extendPackage API用于注入依赖配置。注入依赖配置的相关代码如下：

// 增加qiankun依赖

api.extendPackage({

dependencies: {

'qiankun': '^2.0.0',

}

})

依赖添加完成后进入步骤S420:CLI插件的Generator提供render API，通过使用ejs渲染模版文件的方式修改当前应用中的文件。相关代码如下：

// 渲染template文件夹下master.js

api.render('./template/master')

使得能够读取template目录中master目录的内容，并将主应用对应目录的内容进行替换。

所述目录的内容为：

丨- /src

丨- App.vue

当执行了api.render(‘./template/master’)后，主应用src/App.vue会被替换。通过Vue CLI创建的Vue应用中的App.vue主要提供了当前应用内的路由跳转功能，下面代码为原App.vue初始化成功的代码：

<页面DOM元素，Home和About页面路由入口>

<router-link to="/">Home</router-link> |

<router-link to="/about">About</router-link>

</div>

<router-view/>

</div>

</template>

<style>

// 页面样式

#app {

font-family: Avenir, Helvetica, Arial, sans-serif;

-webkit-font-smoothing: antialiased;

-moz-osx-font-smoothing: grayscale;

text-align: center;

color: #2c3e50;

}

#nav {

padding: 30px;

}

#nav a {

font-weight: bold;

color: #2c3e50;

}

#nav a.router-link-exact-active {

color: #42b983;

}

</style>

主应用集成qiankun并通过qiankun实现主应用对子应用的管理。插件内部存放主应用入口文件的模版文件。主应用的App.vue被插件中已存在的模版文件App.vue所替换，模版文件内容实际上就是使用qiankun注册子应用的信息和qiankun对子应用全生命周期管理的内容。

微前端CLI插件在主应用中已经将主应用的qiankun相关配置进行了统一的封装。这些配置涵盖了主应用的qiankun配置，包括子应用列表的展示、子应用的渲染入口、子应用列表信息的汇总、qiankun全生命周期方法的封装、页面跳转逻辑的封装以及qiankun主应用的初始化。其内部实现了主应用与子应用之间配置信息的解耦，由于各个应用互相解耦，主应用无法直接获取子应用列表的内容。为了解决这一问题，本发明在步骤S130中设置为重新检查子应用配置信息的准确性。

主应用模版内容如下：

<展示所有子应用路由入口>

<nav>

<ol>

</li>

</ol>

</nav>

</header>

</div>

</template>

import { registerMicroApps, runAfterFirstMounted, setDefaultMountApp,start } from 'qiankun' // 引入qiankun官方提供的方法

export default {

name: 'master',

data () {

return {

apps: [

{ name: 'child', entry: '//localhost:8301',container: '#appContainer', activeRule: '/child' }

] // 子应用列表

}

},

created () {

// 如果是qiankun环境则执行initQiankun方法进行qiankun初始化

if (!window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__) {

this.initQiankun()

} else {

// 修复热加载问题

location.reload()

}

},

methods: {

// 页面跳转方法

goto (title, href) {

window.history.pushState({}, title, href)

},

// 初始化qiankun，包括子应用注册及qiankun全生命周期管理

initQiankun () {

registerMicroApps(

this.apps,

{

beforeLoad: [

app => {

// eslint-disable-next-line no-console

console.log('before load', app)

}

],

beforeMount: [

app => {

// eslint-disable-next-line no-console

console.log('before mount', app)

}

],

afterUnmount: [

app => {

// eslint-disable-next-line no-console

console.log('after unload', app)

}

]

}

)

setDefaultMountApp('/child')

runAfterFirstMounted(() => {

// eslint-disable-next-line no-console

console.info('first app mounted')

})

start({ prefetch: true })

}

</script>

// 页面样式处理

a {

color: #42b983;

cursor: pointer;

}

.appContainer {

margin-top: 50px;

}

</style>

以上，完成App.vue的替换。

当选择的应用类型为child时，当前应用会被标记为子应用。此时执行以下步骤：

步骤S310:插件提供一个对话选项：输入子应用的端口号（Input a childproject port），微前端CLI插件缓存当前用户输入的端口号。

对话选项结束后插件对子应用进行相应的配置。

步骤S320：在子应用请求头中增加配置，防止跨域问题；Vue CLI创建的应用使用Webpack进行打包处理，Service插件可以方便修改Webpack配置。利用这一特性，在子应用请求头中增加配置，防止跨域问题；具体代码如下：

api.chainWebpack((config) => {

config.devServer

.headers({

'Access-Control-Allow-Origin': '*'

})

步骤S330：子应用入口文件引入qiankun配置并修改子应用入口文件地址；具体代码如下：

api.chainWebpack((config) => {

config.merge({

entry: {

main: [

path.resolve(__dirname, './public-path.js'),

path.resolve(api.service.context, 'src/main.js')

]

}

})

子应用中引入的public-path.js实际上是qiankun的配置，目的是判断当前子应用是独立运行还是通过主应用启动。代码如下：

if (window.__POWERED_BY_QIANKUN__) {

// eslint-disable-next-line

__webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__

}

步骤S340：修改子应用打包模式为umd模式，目的是为了让主应用能正确识别子应用暴露出来的一些信息，需要针对打包增加下面的配置；

api.chainWebpack((config) => {

config.output

.library(`${name}-[name]`)

.libraryTarget('umd')

.jsonpFunction(`webpackJsonp_${name}`)

})

Vue CLI创建的应用内置了Webpack，当主应用对子应用进行识别时，能够根据子应用的webpack配置进行相应的处理，以确保正确加载和渲染子应用。具体地，主应用对子应用进行识别流程包括如下子步骤：

S3401，将子应用的打包模式修改为umd模式，并设置输出的library名称、libraryTarget和jsonpFunction。这些配置项的设置如下：

输出的library名称通过${name}-[name]来定义，其中${name}是占位符，代表子应用的名称。这样的设置允许每个子应用在打包后拥有独立的命名空间，避免与其他子应用冲突。

将libraryTarget设置为umd，子应用将以通用模块定义（UMD）的格式进行打包，使得可以在不同的环境中运行和使用。这样，主应用能够兼容不同的加载方式和环境要求。

将jsonpFunction设置为webpackJsonp_${name}，以满足Webpack的JSONP函数的命名约定，用于动态加载和解析子应用的模块。主应用根据子应用的名称和模块名称使用合适的JSONP函数来实现对子应用的加载和执行。

S3402.主应用在运行时，根据子应用的配置信息和入口文件路径，使用Webpack的动态加载机制，将子应用的代码和资源动态加载到主应用中。主应用根据子应用定义的library和libraryTarget按需加载和执行子应用的模块。

通过以上识别和加载过程，主应用能够准确地识别子应用，并将子应用的内容嵌入到适当的位置。主应用负责管理子应用的生命周期、路由切换以及通信机制，以实现微前端架构的整合和协作。每个子应用都能独立开发、测试和部署，而主应用提供了一个统一的入口和容器，使得多个子应用能够协同工作，从而共同构建出一个完整的应用系统。

这种基于qiankun和Webpack的子应用识别过程，为构建复杂而灵活的微前端架构提供了强大的支持。主应用能够动态地加载和管理多个子应用，为用户提供一体化的应用体验。

经过步骤S320-步骤S340，插件已经完成了子应用关于Webpack相关的配置，完整代码如下：

const path = require('path')

module.exports = (api) => {

const { name, dependencies = {} } = api.service.pkg // 读取webpack的name和dependencies变量，name用于打包输出文件，denpendencies用于获取依赖列表

const isMaster = dependencies.qiankun // 通过依赖列表中是否有qiankun依赖判断是否是主应用

if (isMaster) return // 如果不是主应用直接跳过

// 增加子应用相关配置，包括跨域配置、入口文件修改、打包输出文件

api.chainWebpack((config) => {

config.devServer

.headers({

'Access-Control-Allow-Origin': '*'

})

config.merge({

entry: {

main: [

path.resolve(__dirname, './public-path.js'),

path.resolve(api.service.context, 'src/main.js')

]

}

})

config.output

.library(`${name}-[name]`)

.libraryTarget('umd')

.jsonpFunction(`webpackJsonp_${name}`)

})

}

步骤S350：修改子应用启动命令，在步骤S310中用户输入的端口会在步骤S350中使用，则当前应用在启动时自动在步骤S310输入的端口进行启动。

// 修改服务启动端口

api.extendPackage({

scripts: {

serve: `vue-cli-service serve --port ${port}`

}

})

步骤S360：修改子应用路由base地址。微前端旨在主应用可以管理子应用，同时子应用也可以单独运行，不同类型应用互相解耦。使用qiankun后，qiankun需要判断子应用是否处于qiankun微前端环境，如果处于qiankun微前端环境中，则子应用的base地址为“/应用名称”；如果未处于qiankun微前端环境，则子应用的base地址为“/”。相关代码如下：

const routerConfigPath = 'src/router/index.js'

if (files[routerConfigPath]) {

files[routerConfigPath] = files[routerConfigPath].replace(

/base: process.env.BASE_URL,/,

`base: window.__POWERED_BY_QIANKUN__ ? '/${projectName}' :'/',`

)

}

微前端CLI插件将进行子应用的qiankun相关配置。Generator提供的postProcessFiles API对子应用的路由文件内容和子应用入口文件内容进行替换，postProcessFiles推送一个文件中间件，它允许在文件生成后进行修改、替换或执行其他操作，以满足特定的需求。文件中间件（file middleware）是一种机制，它允许在文件生成过程中根据需求对文件进行自定义处理。同时使用文件中间件来添加自定义模版、根据用户输入动态生成文件内容，或者对生成的文件进行其他自定义操作。

步骤S370：导出qiankun在子应用的生命周期钩子。子应用中，qiankun需要在子应用中导出生命周期钩子，通常在子应用入口导出bootstrap、mount、unmount三个生命周期钩子，以供主应用在适当时机进行调用。导出的这些生命周期钩子的目的是为了实现子应用和主应用之间协同工作和正确的生命周期管理。通过导出的这些钩子，子应用能够在特定的时机接受来自主应用的调用，从而执行相应的操作。生命周期钩子包括bootstrap钩子、mount钩子和unmounted钩子。其中：

bootstrap钩子用于在子应用被加载之前执行，用于初始化子应用的环境和资源。在bootstrap钩子中进行初始化的操作，包括加载子应用所需的依赖、和初始化全局状态。

mount钩子用于在子应用被加载后、即将被渲染到页面上时执行。在mount钩子中进行子应用的渲染和挂载操作，包括创建子应用的根实例和设置路由。

unmounted钩子用于在子应用从页面上卸载之前执行，用于清理和销毁子应用的资源。在unmounted钩子中进行清理操作，包括取消订阅和释放资源。

通过导出的上述生命周期钩子，主应用能够在适当的时机调用子应用的对应钩子，以实现整个微前端应用的协同工作和生命周期管理。主应用可以根据需求，按照特定的顺序和时机，调用子应用的bootstrap钩子、mount钩子和unmounted钩子，以确保子应用的正确初始化、渲染和卸载过程，从而实现了整个微前端基座中应用的灵活性和扩展性。

其中mount钩子在子应用每次进入时调用；bootstrap钩子只需在子应用初始化的时候调用一次，下次子应用重新进入时直接调用mount钩子；unmount钩子在子应用每次切出或卸载时调用。在该生命周期中，经常卸载子应用的应用实例。

本发明使用正则匹配文本的方式将将子应用中main.js文件内容进行替换，重写Vue实例。提前准备的文本内容如下：

// 引入Vue依赖并初始化Vue实例

exports.standard = `import Vue from 'vue'

import App from './App.vue'

Vue.config.productionTip = false

new Vue({

render: h => h(App)

}).$mount('#app')

// 通过window中全局变量__POWERED_BY_QIANKUN__判断是否处于qiankun环境，如果不在qiankun环境则初始化Vue实例，如果处于qiankun环境则增加qiankun生命周期方法，其中bootstrap方法中增加控制台打印，mount方法中初始化Vue实例并增加控制台打印，unmount方法中卸载Vue实例并释放内存。

exports.replacement = `let instance = null

function render () {

instance = $1

}

if (!window.__POWERED_BY_QIANKUN__) {

render()

}

export async function bootstrap () {

// eslint-disable-next-line no-console

console.log('vue app bootstraped')

}

export async function mount (props) {

console.log('props from main framework', props)

render()

}

export async function unmount () {

instance.$destroy()

instance = null

}

本实施例中设置两个变量，standard变量和replacement变量。replacement变量用于为子应用入口文件替换后的内容，其中包含了qiankun三个生命周期的声明。主要代码如下：

if (!files[api.entryFile].match(/\nnew Vue\(/)) {

files['src/child-main.js'] = childMain.standard.replace(

/(new Vue\([\s\S]*)/,

childMain.replacement

)

console.info('\n暂无法自动转换该项目的 main.js 文件，请参考 src/child-main.js 手动修改\n')

} else {

files[api.entryFile] = files[api.entryFile].replace(

/(new Vue\([\s\S]*)/,

childMain.replacement

)

}

通过设置两个变量standard变量和replacement变量，在子应用中找到入口文件，利用正则表达式replace方法对入口文件内容进行替换。检测入口文件内容中是否存在以new Vue开头的整个语句，检测为是则捕获到后将捕获到的内容替换为replacement变量内容，替换成功后子应用的入口将自动添加qiankun子应用生命周期钩子，从而方便与主应用进行通信。

另外，当子应用独立运行的时候，子应用对当前环境进行判断，自行调用render方法以确保正确渲染页面；若检测后入口文件未找到以new Vue开头的整个语句，微前端CLI插件将在当前子应用src文件夹下创建一个child-main.js文件，文件内容是将standard变量中以new Vue开头的整个语句进行捕获并替换为replacement变量内容，同时终端会出现“暂无法自动转换该项目的main.js文件，请参考src/child-main.js手动修改”。child-main.js用于为用户提供参考，用户可以结合实际情况对子应用入口文件进行子应用配置。

至此，步骤S220.插件安装完成。

以上就是插件针对主应用或者子应用安装的详细过程。接下来是最后一步配置检查。

由于在每个应用中，微前端CLI插件都是独立进行安装，当微前端CLI插件在主应用安装完成后，子应用注册信息实际上是模版内容，需要手动修改子应用注册信息。在主应用App.vue中存在apps的变量和需要默认加载子应用的信息，应用微前端CLI插件安装完成后，src目录下App.vue会有下面这段代码：

apps: [

{ name: 'child-app-1', entry: '//localhost:8301', container: '#appContainer', activeRule: '/child-app-1' }

]

apps为注册子应用的数组对象，每个子应用对象由name（子应用应用名称）、activeRule（需要匹配的路由地址）、container（子应用渲染容器）、entry（子应用入口路径）组成。由于主应用和子应用相互解耦，需要用户根据自己子应用数量进行手动配置。

同时主应用App.vue中需要在initQiankun方法中检查setDefaultMountApp设置的默认加载子应用信息。该配置的目的是设置访问主应用时默认挂载的子应用地址。

例如存在两个子应用child-app-1和child-app-2，对应的端口为8301和8302，并且两个子应用均完成了微前端CLI插件子应用的安装，本发明的apps就是下面这样的配置：

apps: [

{ name: 'child-app-1', entry: '//localhost:8301', container: '#appContainer', activeRule: '/child-app-1' },

{ name: 'child-app-2', entry: '//localhost:8302', container: '#appContainer', activeRule: '/child-app-2' }

]

本发明希望当主应用访问时默认挂载的子应用是child-app-2，则设置setDefaultMountApp：

setDefaultMountApp('/child-app-2')

完成步骤S130后，即可启动所有应用，至此通过微前端CLI插件完成了Vue应用的微前端基座搭建。

Vue CLI是一个基于Vue.js进行快速开发的完成系统，其致力于将Vue生态中的工具进行标准化。同时CLI插件也是基于Vue CLI的插件架构衍生出的扩展功能。本发明内调用的一些API均为CLI插件对外暴露的API，所以非Vue CLI创建的Vue应用不能使用该发明。需手动集成qiankun并针对应用类型进行对应的配置。

针对CLI插件的特性，结合 qiankun对不同类型应用的配置，本发明开发一个自定义插件来解决快速搭建微前端基座的问题，称该自定义插件为微前端CLI插件，它为VueCLI创建的应用提供了快速完成主应用或者子应用配置的功能，在插件安装的过程中提供了主应用和子应用两个选项，根据不同应用类型的配置，对应用进行对应的配置。当使用微前端CLI插件时，可以轻松地为基于Vue CLI创建的应用程序构建微前端基座。该插件已经封装了qiankun在Vue应用中的配置，包括生命周期钩子、配置打包工具和路由配置等方面。这意味着，无需手动编写繁琐的配置代码，只需在安装过程中通过选项设置应用类型和端口（子应用需要设置），插件会自动为应用程序添加适当的qiankun配置。

使用该插件后，将节省大量时间和精力，因为它简化了微前端基座的搭建过程。在微前端CLI插件安装过程中提供了终端交互的方式提供给用户选项，基于应用类型进行微前端改造，开发者只需专注于应用程序的开发，而不必过多关注微前端的复杂性。微前端CLI插件会自动处理与qiankun相关的事务，例如应用程序生命周期管理、打包工具配置和路由配置，无需用户手动配置，从而能够快速构建出具有良好微前端架构的应用程序。

安装成功后，只需检查每个应用的配置信息，即可验证微前端基座的正确性。可以轻松地查看每个子应用的配置，确保它们被正确地集成到微前端基座中。

总而言之，微前端CLI插件是一个强大而便捷的工具，可为基于Vue CLI创建的应用程序快速构建微前端基座。它简化了配置过程，提供了自动化的qiankun集成，节省了大量开发时间。无论是初次尝试微前端架构，还是需要加快开发速度，微前端插件都能很好的提效。

本发明的效果在于：

本发明简单易用，用户仅需要通过三步，即可完成微前端基座搭建。

本发明利用Vue CLI插件特性，在使用者无需了解插件的运行过程和微前端实现方式的情况下，实现了Vue应用快速完成微前端基座的搭建。

本发明流程图中或在此以其他方式描述的任何过程或方法描述可以被理解为表示包括一个或多个用于实现特定逻辑功能或过程的步骤的可执行指令的代码的模块、片段或部分，可以实现在任何计算机刻度介质中，以供指令执行系统、装置或设备，所述计算机可读介质可以是任何包含存储、通信、传播或传输程序以供执行系统、装置或设备使用。包括只读存储器、磁盘或光盘等。

在本说明书的描述中，参考术语“实施例”、“示例”等的描述意指结合该实施例或示例描述的具体特征、结构、材料或者特点包含于本发明的至少一个实施例或示例中。在本说明书中，对上述术语的示意性表述不必须针对的是相同的实施例或示例。此外，本领域的技术人员可以在不产生矛盾的情况下，将本说明书中描述的不同实施例或示例以及其中的特征进行结合或组合。

上述内容虽然已经示出和描述了本发明的实施例，可以理解的是，上述实施例是示例性的，不能理解为对本发明的限制，本领域的普通技术人员在本发明的范围内可以对上述实施例进行变化、修改、替换和变型等更新操作。

Claims

1.基于qiankun在Vue CLI应用构建微前端基座的方法，其特征在于，所述方法包括以下步骤：

步骤S110，Vue CLI创建主应用、子应用；

步骤S140，启动所有应用完成微前端基座搭建；

步骤S120中具体包括如下流程：

步骤S220.配置检查，插件安装完成；

步骤S210中，在选择的应用类型为主应用时，则执行以下步骤：

步骤S420:CLI插件的Generator提供render API，通过使用ejs渲染模版文件的方式修改当前应用中的文件；

在选择的应用类型为子应用时，则会执行以下步骤：

步骤S320:在子应用请求头中添加跨域配置；

步骤S360：修改子应用路由base地址；通过Generator提供的postProcessFiles API对子应用的路由文件内容进行替换，postProcessFiles推送一个文件中间件，将在应用所有正常的文件中间件之后应用，通过正则匹配文本的方式将路由base地址进行替换；

2.根据权利要求1所述的基于qiankun在Vue CLI应用构建微前端基座的方法，其特征在于，在步骤S110中， Vue的版本为2.x并且Vue Router的mode为history。

3.根据权利要求1所述的基于qiankun在Vue CLI应用构建微前端基座的方法，其特征在于，插件内部存放主应用入口文件的模版文件，此时主应用的App.vue被插件中已存在的模版文件App.vue所替换，当前模版文件内容实际上就是使用qiankun注册子应用的信息和qiankun对子应用全生命周期管理的内容。

4.根据权利要求1所述的基于qiankun在Vue CLI应用构建微前端基座的方法，其特征在于，生命周期钩子包括bootstrap钩子、mount钩子和unmounted钩子；其中：bootstrap钩子用于在子应用被加载之前执行，用于初始化子应用的环境和资源；mount钩子用于在子应用被加载后、即将被渲染到页面上时执行；unmounted钩子用于在子应用从页面上卸载之前执行，用于清理和销毁子应用的资源。

5.根据权利要求4所述的基于qiankun在Vue CLI应用构建微前端基座的方法，其特征在于，每个子应用的信息包括子应用应用名称、需要匹配的路由地址、子应用渲染容器和子应用入口路径。

6.根据权利要求5所述的基于qiankun在Vue CLI应用构建微前端基座的方法，其特征在于，同时需要在initQiankun方法中检查setDefaultMountApp设置的默认加载子应用信息。

7.根据权利要求1-6任一项所述的基于qiankun在Vue CLI应用构建微前端基座的方法，其特征在于，所述微前端CLI插件包括Generator、Service插件入口、插件包配置、对话选项和Vue UI集成；其中：