认识达内从这里开始

微应用开发是随着互联网的不断发展而逐渐被程序员掌握的一种开发方式，而今天我们就通过案例分析来了解一下，微应用开发的应用场景都有哪些类型。

一、微应用化

在多domain时通过nginx反向代理的情况下，维护公共代码很痛苦。将各个业务模块拆成子应用后，其各个业务的公共部分则被拆成独立的应用。社区称之为基座应用，或者主应用。

我们将所有domain即子应用的公共部分封装到主应用中，单独维护，同时发布到内部npm私仓。以给子应用在开发环境中将其作为依赖安装。在需要修改公共代码或者提供公共服务的时候，只需要重新构建和部署主应用即可，解决了一大痛点。

二、主应用App

主运行时本身也是一个独立完整的应用，独立运行、开发和部署。我们的项目中，主应用包含了下列内容(通常都包含了以下内容)：

公共依赖

在我们的项目中使用UMD引入公共依赖，同时维护了一份公共的Webpackexternals配置，以避免主应用和各个子应用在打包时重复构建公共依赖。

公共配置，比如：Webpack配置，EnvVariables配置，App配置等

公共插件，比如：ProgressBar,MicroFrontend,LazyLoad,Vuex,VueRouter,Element-UI等

公共服务，比如：Utils,Http,Socket,Storage等

公共数据，比如：Auth,Config,Message等Vuexmodules，我们通过Vuex实现全局Store共享，借助其dynamic-module-registration的能力，实现子应用之间共享数据的注册和销毁。

公共鉴权和校验，比如：路由权限校验Routerbefore/afterHook、用户角色校验AuthManager.hasAuth(authKey)等公共状态校验

公共资源，比如：样式、字体、图标、图片、Theme变量

公共组件，比如：<ContentBlock/>,<FilePreview/>等

公共布局，比如：<DefaultContainer/>,<DetailContrainer/>等

公共路由，比如：/index,/error/401,/error/404等

三、子应用SubApp

在提出了所有公共代码之后，子应用变成了纯业务代码的容器被主应用在运行时加载执行。因此在启动子应用之前需要先启动主应用，以拥有主应用运行时的能力。

在开发环境下，将子应用的入口设置为主应用，兼容主应用的Webpack配置，将devServer的contentBase也设置为主运行时的public目录，以保持主应用/子应用开发和生产环境下的一致性。

四、动态嵌套路由

vue-mfe内部维护了一套独立的pathList和pathMap，虽然独立维护，会增加内存开销成本，好处是不会对VueRouter本身的功能造成任何影响。

当调用router.addRoutes(routes:RouteConfig[],parentPath:string)时，深度优先找到parentPath所在的旧路由oldRoute，并将其children与新的routes合并后生成新的路由options:newRouterOptions。

再使用options:newRouterOptions重新实例化newVueRouter(options:newRouterOptions)，拿到新的router.matcher并将其赋值给app.$router.matcher以达到支持动态嵌套路由、动态更新应用路由注册表的目的。

五、动态加载应用

使用VueMfe.createApp(AppConfig)注册微前端主应用App，初始化Router，刷新VueMfe内部路由注册表pathList和pathMap。

注册beforeEach钩子，拦截路由to是否已存在于当前路由中，若不存在则认为这是一个需要被动态加载的子应用。

执行getAppPrefix(to)获取当前路由的子应用prefix前缀，执行install方法。

【免责声明】本文系本网编辑部分转载，转载目的在于传递更多信息，并不代表本网赞同其观点和对其真实性负责。如涉及作品内容、版权和其它问题，请在30日内与管理员联系，我们会予以更改或删除相关文章，以保证您的权益!更多内容请在707945861群中学习了解。