2.微前端-qiankun

1.快速上手

$ git clone https://github.com/umijs/qiankun.git
$ cd qiankun
$ yarn install
$ yarn examples:install
$ yarn examples:start

Visit http://localhost:7099. examples/main是基座项目，index.js作为子应用注册的入口存在。

2.生产环境搭建（vue作为portal）

安装qiankun

$ yarn add qiankun  # or npm i qiankun -S

注册微应用

//main.js
import { registerMicroApps, runAfterFirstMounted, setDefaultMountApp, start, initGlobalState } from 'qiankun';

import render from './render/VueRender';

/**
 * Step1 初始化应用（可选）
 */
render({ loading: true });

const loader = loading => render({ loading });

registerMicroApps(
  [
    {
      name: 'react16',
      entry: 'http://localhost:7100',
      container: '#subapp-viewport',
      loader,
      activeRule: '/react16',
    },
  ]
  );

  const { onGlobalStateChange, setGlobalState } = initGlobalState({
    user: 'qiankun',
  });
  
  onGlobalStateChange((value, prev) => console.log('[onGlobalStateChange - master]:', value, prev));
  
  setGlobalState({
    ignore: 'master',
    user: {
      name: 'master',
    },
  });

  /**
 * Step3 设置默认进入的子应用
 */
setDefaultMountApp('/react16');

/**
 * Step4 启动应用
 */
start();

runAfterFirstMounted(() => {
  console.log('[MainApp] first app mounted');
});

//VueRender
import Vue from 'vue/dist/vue.esm';

function vueRender({ loading }) {
  return new Vue({
    template: `
      <div id="subapp-container">
        <h4 v-if="loading" class="subapp-loading">Loading...</h4>
        <div id="subapp-viewport"></div>
      </div>
    `,
    el: '#subapp-container',
    data() {
      return {
        loading,
      };
    },
  });
}

let app = null;

export default function render({ loading }) {
  if (!app) {
    app = vueRender({ loading });
  } else {
    app.loading = loading;
  }
}

分别启动portal和子应用即可运行

3.部署 将portal的dist包放至nginx根目录，创建/subapp/存放子项目dist包

修改nginx.conf

#添加子项目服务
server {
       listen       7100;
       server_name  localhost;

       # 配置跨域访问，此处是通配符，严格生产环境的话可以指定为主应用 192.168.2.192:8889
      add_header Access-Control-Allow-Origin *;
      add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS';
      add_header Access-Control-Allow-Headers 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization';

       location / {
           root   /usr/local/var/www/subapp/react;
           index  index.html index.htm;
       }
    }

4.import-html-entry
我所面临的子应用是require.js的应用，注册之后发现子应用的init方法没有被调用，查阅源码发现qiankun会使用import-html-entry将子应用的html作为资源索引。 将子应用的script转换为fetch请求，然后require的引用方式不仅引用script的src，还有data-main,而import-html-entry并不会对script的特殊属性做处理。 造成引用丢失，初始化事件无法执行。因此qiankun不得不被我们放弃。