前言

由于多个中后台系统做前后端分离，各个业务模块集合在一个项目里面开发会造成后期不好维护且容易出问题，也不方便独立部署。
所以需要设计一套高度解耦又聚合在一个平台方便管理的系统架构。

微前端是一种多个团队通过独立发布功能的方式来共同构建现代化 web 应用的技术手段及方法策略。

方案选项

首先，我们整理了核心诉求，按优先级排序如下：

希望异地开发时不同的模块能够独立开发、独立部署。
各个子系统独立运行，互不影响，但允许我们在开发阶段与其他子系统进行联调。
保持单页应用的体验。
由于现有项目都是基于Vue技术栈开发，因此，我们的框架并不需要做到技术栈无关，只要满足Vue的项目即可。

基于以上这些诉求，我们调研了目前市面上常用的微前端方案，最常见的方案有：

基于Nginx的路由分发。
使用Iframe将页面嵌入。
single-spa成熟落地的框架。

这些方案的优劣整理如下：

微前端概念理解

微前端对比微服务

微前端整体架构

实践

安装single-spa CLI

官方文档 single-spa CLI
安装single-spa CLI 执行如下命令

1
2
3

npm install --global create-single-spa
# or
yarn global add create-single-spa

Single-spa CLI创建主应用

1	create-single-spa

出现可选项选择
? Directory for new project (.) // 输入项目名字
? Select type to generate 方向键上下选择❯ single-spa root config

后续按自己需求选择

Single-spa CLI创建微应用

1	create-single-spa --framework vue

要创建其他前端框架的微项目只要修改 vue 参数为 react, angular 即可
创建vue框架微项目前确保你的环境已经安装了 Vue-CLI, 执行命令 vue -V 确认是否安装，如没有安装过，可点击链接查看Vue-CLI官方文档自行安装

执行以上命令后会有一系列选项填写，按照如下填写
? Directory for new project （项目名称按照这样命名方式填写 f2e-xxx）f2e-util
? Organization name (can use letters, numbers, dash or underscore) f2e
Vue CLI v4.5.11
┌───────────────────────────────────────────┐
│ │
│ New version available 4.5.11 → 4.5.12 │
│ Run npm i -g @vue/cli to update! │
│ │
└───────────────────────────────────────────┘

? Please pick a preset:（选择预设，如果有存过构建预设可以选，不确定用什么构建配置就选Manually select features。上下键控制键选择，回车确认）
? Check the features needed for your project:（选要用的vue框架配置，上下键控制选择，空格键勾选，回车键确认）
? Choose a version of Vue.js that you want to start the project with 2.x

? Use history mode for router? Y
? Pick a CSS pre-processor (现在css预编译器，less)
? Pick a linter / formatter config:（为了代码规范ESLing 配置建议选 ❯ESLint + Standard config）
? Pick additional lint features: （为了避免提交错误代码，勾选Lint and fix on commit）
? Where do you prefer placing config for Babel, ESLint, etc.? （❯ In dedicated config files）
? Save this as a preset for future projects? （保存预设？为了方便下次新建同样配置微项目，可以选择保存预设 Y）
? Save preset as: （为预设取个名字方便下次选取）

demo源码地址

https://github.com/microWebApp