微前端之案例——以antpro为主，react、vue、angular为子应用

【注】按照案例来，一定可以成功（每一步都写清楚了）

1. 主要技术：

qiankun、react(umi框架)+antd、vue+vant、angular+antd

2. 搭建主应用：

yarn create umi main-app
> ant-design-pro
> 选择 pro v4
> 选择 typescript
> 选择 simple
> 选择 antd@4

yarn install 或者 npm install

主应用中增加.env文件，加入一行“PORT=8020”，指定端口

yarn start 或者 npm run start 启动，访问本地地址，如下图所示

[图片上传失败...(image-a1b2b7-1616382070563)]

2.1 安装qiankun

yarn add qiankun

2.2 安装包@umijs/plugin-qiankun

yarn add @umijs/plugin-qiankun -D

3. 配置React子应用与主应用的连接

3.1 创建子应用

mkdir sub-react-umi

cd sub-react-umi

yarn create @umijs/umi-app

yarn install 或者 npm install

子应用创建.env文件，增加一行"PORT=8021"

3.2 子应用中安装@umijs/plugin-qiankun

yarn add @umijs/plugin-qiankun -D

3.3 子应用package修改name

打开 package.json 文件，在第一行添加属性 name 及相应属性值"sub-react-umi"

3.4 主应用中注册子应用

参考：umi官方配置

{
  ...
  qiankun: {
    master: {
      apps: [
        {
          name: 'sub-react-umi',
          entry: '//localhost:8021',
        },
      ],
    },
  },
}

3.5 主应用路由中装载子应用

在主应用的config/config.ts 文件中，在 routes 属性下进行添加：

{
    ...,
    {
        name: 'list.table-list',
        ...,
    },
    {
        name: 'sub-react-umi',
        icon: 'smile',
        path: '/sub-react-umi',
        microApp: 'sub-react-umi',
    }
}

3.6 子应用注册qiankun

参考：umi官方子应用配置

在.umirc.ts文件中添加如下代码（.umirc.ts与config/config.js作用一致，具体查看umi官方）：

{
    ...,
    qiankun: {
        slave: {}
      }
}

3.7 子应用导出生命周期

参考：umi官方配置

在子应用的 src/app.ts 里导出 qiankun 对象，如果没有app.ts自行创建。

export const qiankun = {
    // 应用加载之前
    async bootstrap(props: any) {
      console.log('app1 bootstrap', props);
    },
    // 应用 render 之前触发
    async mount(props: any) {
      console.log('app1 mount', props);
    },
    // 应用卸载之后触发
    async unmount(props: any) {
      console.log('app1 unmount', props);
    },
  };

4. 配置Vue子应用与主应用的连接

4.1 创建子应用

 vue create sub-vue-cli
 >vue-cli-4

4.2 子应用在 src 目录新增 public-path.js

if (window.__POWERED_BY_QIANKUN__) {
  __webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__;
}

4.3 子应用入口文件 main.js 修改，为了避免根 id #app 与其他的 DOM 冲突，需要限制查找范围

在main.js中将原有代码替换为如下代码：

import './public-path'
import Vue from 'vue'
import App from './App.vue'
import VueRouter from 'vue-router'
import routes from './router'
import store from './store'

Vue.config.productionTip = false

let router = null
let instance = null
function render (props = {}) {
  const { container } = props
  router = new VueRouter({
    base: window.__POWERED_BY_QIANKUN__ ? '/sub-vue-cli/' : '/',
    mode: 'history',
    routes
  })
  instance = new Vue({
    router,
    store,
    render: h => h(App)
  }).$mount(container ? container.querySelector('#app') : '#app')
}
// 独立运行时
if (!window.__POWERED_BY_QIANKUN__) {
  render()
}
export async function bootstrap () {
  console.log('[vue] vue app bootstraped')
}
export async function mount (props) {
  console.log('[vue] props from main framework', props)
  render(props)
}
export async function unmount () {
  instance.$destroy()
  instance.$el.innerHTML = ''
  instance = null
  router = null
}

4.4 子应用打包配置修改（`vue.config.js`）

如果有vue.config.js则直接增加配置，如果没有请先新建vue.config.js文件

const { name } = require('./package');
module.exports = {
  devServer: {
    headers: {
      'Access-Control-Allow-Origin': '*',
    },
  },
  configureWebpack: {
    output: {
      library: `${name}-[name]`,
      libraryTarget: 'umd',// 把微应用打包成 umd 库格式
      jsonpFunction: `webpackJsonp_${name}`,
    },
  },
};

4.5 主应用中注册+装载子应用

打开主应用的config.ts文件，加入如下代码（类似3.4）

{
    name: 'sub-vue-cli', // 唯一 id
    entry: '//localhost:8022', // html entry
}

打开主应用的routes.ts文件，加入如下代码（类似3.5）

{
    name: 'sub-vue-cli',
    icon: 'smile',
    path: '/sub-vue-cli',
    microApp: 'sub-vue-cli',
}

至此，vue配置完成，启动起来可以直接访问了。

但是会遇到一个问题，问题描述：“Missing message: “menu.xxx“ for locale: “zh-CN“, using default message as fallback”。

解决办法：在主应用的config/defaultSettings.ts中，将proSettings中的menu做下修改，具体如下：

const proSettings: DefaultSettings = {
  ...,
  menu:{
    locale: false // 修改为false则没有了错误
  }
}

5. 配置Angular子应用与主应用的连接

5.1 创建子应用

ng new sub-angular

>sub-angular

5.2 子应用在src目录新增public-path.js

if (window.__POWERED_BY_QIANKUN__) {
  // eslint-disable-next-line no-undef
  __webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__;
}

5.3 设置子应用的路由模式

在src/app/app-routing.module.ts文件下，做如下更改

// 引入下列代码
import { APP_BASE_HREF } from '@angular/common';

@NgModule({
  ...,
  // @ts-ignore
 providers: [{ provide: APP_BASE_HREF, useValue: window.__POWERED_BY_QIANKUN__ ? '/sub-angular' : '/' }]
})

5.4 修改入口文件src/main.js

修改后如下所示：

import './public-path';
import { enableProdMode, NgModuleRef } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
import { environment } from './environments/environment';

if (environment.production) {
  enableProdMode();
}

if (environment.production) {
  enableProdMode();
}
let app: void | NgModuleRef<AppModule>;
async function render() {
  app = await platformBrowserDynamic()
    .bootstrapModule(AppModule)
    .catch(err => console.error(err));
}
if (!(window as any).__POWERED_BY_QIANKUN__) {
  render();
}
export async function bootstrap (props: Object) {
  console.log(props);
}
export async function mount (props: Object) {
  render();
}
export async function unmount (props: Object) {
  console.log(props);
  // @ts-ignore
  app.destroy();
}

5.5 修改`webpack`打包配置

首先：安装 @angular-builders/custom-webpack 插件，注意：angular 9 项目只能安装 9.x 版本，angular 10 项目可以安装最新版

npm i @angular-builders/custom-webpack@9.2.0 -D

在根目录下增加custom-webpack.config.js文件，内容如下：

const appName = require('./package.json').name;
module.exports = {
  devServer: {
    headers: {
      'Access-Control-Allow-Origin': '*',
    },
  },
  output: {
    library: `${appName}-[name]`,
    libraryTarget: 'umd',
    jsonpFunction: `webpackJsonp_${appName}`,
  },
};

修改augular.json文件，修改的具体内容如下

...> architect > build > builder目录下修改为：
"builder": "@angular-builders/custom-webpack:browser",
紧跟着的options增加如下配置
  "options": {
      ...,
    "customWebpackConfig": {
      "path": "./custom-webpack.config.js"
    }
  }

...> architect > serve > builder目录下修改为：
"builder": "@angular-builders/custom-webpack:dev-server",

5.6 主应用中注册+装载子应用

打开主应用的config.ts文件，加入如下代码（类似3.4）

{
    name: 'sub-angular', // 唯一 id
    entry: '//localhost:8023', // html entry
}

打开主应用的routes.ts文件，加入如下代码（类似3.5）

{
    name: 'sub-angular',
    icon: 'smile',
    path: '/sub-angular',
    microApp: 'sub-angular',
}

5.7 解决zone.js问题

angular默认引入zone文件，当它为子应用之后，引入路径放到父应用中

父应用引入zone.js，一定在引入import qiankun之前，在父应用src目录下新建app.js文件，并且在父应用中npm install --save-dev zone

文件中写入import 'zone.js';

在子应用的src/polyfills.ts 里面的引入 zone.js 代码删掉

在微应用的 src/index.html 里面的 <head> 标签加上下面内容，微应用独立访问时使用

<!-- 也可以使用其他的CDN/本地的包 -->
<script src="https://unpkg.com/zone.js" ignore></script>

至此，项目可以启动并且访问

5.8 打包问题解决

修改tsconfig.json文件

// 将原有的targe：es2015删除，写入如下代码
"target": "es5",
 "typeRoots": [
   "node_modules/@types"
 ],

5.9 解决各个应用名称相同问题

子应用的src/index.html页面中将app-root标签增加 id="angular9"，如下：

<app-root id="angular9"></app-root>

同时修改src/app/app.components.ts中selector中的内容，如下：

selector: '#angular9 app-root',

微服务应用到此，可以初步展开了...

最后编辑于：2021.03.26 09:46:02

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 217,185评论 6赞 503
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 92,652评论 3赞 393
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 163,524评论 0赞 353
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 58,339评论 1赞 293
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 67,387评论 6赞 391
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 51,287评论 1赞 301
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 40,130评论 3赞 418
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 38,985评论 0赞 275
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 45,420评论 1赞 313
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 37,617评论 3赞 334
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 39,779评论 1赞 348
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 35,477评论 5赞 345
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 41,088评论 3赞 328
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 31,716评论 0赞 22
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 32,857评论 1赞 269
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 47,876评论 2赞 370
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 44,700评论 2赞 354

微前端之案例——以antpro为主，react、vue、angular为子应用

微前端之案例——以antpro为主，react、vue、angular为子应用

1. 主要技术：

2. 搭建主应用：

2.1 安装qiankun

2.2 安装包@umijs/plugin-qiankun

3. 配置React子应用与主应用的连接

3.1 创建子应用

3.2 子应用中安装@umijs/plugin-qiankun

3.3 子应用package修改name

3.4 主应用中注册子应用

3.5 主应用路由中装载子应用

3.6 子应用注册qiankun

3.7 子应用导出生命周期

4. 配置Vue子应用与主应用的连接

4.1 创建子应用

4.2 子应用在 src 目录新增 public-path.js

4.3 子应用入口文件 main.js 修改，为了避免根 id #app 与其他的 DOM 冲突，需要限制查找范围

4.4 子应用打包配置修改（vue.config.js）

4.5 主应用中注册+装载子应用

5. 配置Angular子应用与主应用的连接

5.1 创建子应用

5.2 子应用在src目录新增public-path.js

5.3 设置子应用的路由模式

5.4 修改入口文件src/main.js

5.5 修改webpack打包配置

5.6 主应用中注册+装载子应用

5.7 解决zone.js问题

5.8 打包问题解决

5.9 解决各个应用名称相同问题

推荐阅读更多精彩内容

4.4 子应用打包配置修改（`vue.config.js`）

5.5 修改`webpack`打包配置