📦开箱即用的微前端工程方案，基于 umi3.x + qiankun@next

🍳从实际中台项目孵化，精简的 开发→构建→部署 全流程应用方案

🧭Demo Site：microfe.herokuapp.com

先分别安装基座应用和子应用的依赖，文件结构如下：

Ming
|-- account/ ·········· 子应用 account
|-- car/ ·············· 子应用 car
|-- dist/ ············· 生产环境目录
|-- foundation/ ······· 基座应用
|-- home/ ············· 子应用 home
|-- Dockerfile
|-- app.js ············ hapi 驱动的简单后端路由
|-- package.json

先启动基座应用：

Ming/foundation > $ yarn start

再启动对应的子应用

Ming/account > $ yarn start
Ming/home > $ yarn start
Ming/car > $ yarn start

应用默认运行于 http://localhost:8000

本地开发时，子应用运行在不同的端口，集中配置在基座应用的 config/config.dev.ts 中。

• 开发一个子应用
• children 级子应用与 brother 级子应用
• 基座声明式路由
• DOM 级权限控制
• 微前端下 BrowserHistory Mode 的 404 问题

• UmiJS
• @umijs/plugin-qiankun
• Umi Hooks
• Formily

推荐 OSS 托管静态文件式部署子应用。

各个子应用应分别托管到 OSS 后，暴露自己的入口 index.html 路径给基座应用。从版本 1.1.0 开始，集中子应用配置项到 foundation/config/config.prod.ts：

const subApps = [
  ...
  {
    name: 'account',
    microApp: 'account',
    entry: 'https://oss.myname.cloud.com/micro_subapp/account/index.html',
    path: 'account',
    title: '账户',
    wrappers: ['@/wrappers/brother'],
    routes: [
      {
        path: '/account/login',
        title: '登录',
      },
    ],
  },
  ...
]

以上部署方式可以实现子应用单独开发、单独更新、甚至技术栈无关（子应用只需暴露符合 Single-SPA/qiankun 的生命周期方法）。

参考根目录 package.json 的 scripts，子应用和基座应用都打包进 /dist 后， 参考 app.js 简单处理静态文件与路由冲突导致的 404 问题即可部署。

Ming/dist > $ PORT=3000 node app.js

Ming 将会运行在 http://localhost:3000

先取消注释 dist/Dockerfile 文件中的的端口（PORT）字段

Ming/dist > $ docker build -t vizards/ming .
Ming/dist > $ docker run -p 12580:3000 -d vizards/ming

Ming 将会运行在 http://localhost:12580

The Star And Thank Author License (SATA License)