微前端，qiankun

 

微前端？

spa 单页应用时代，我们的页面只有 index.html 这一个 html 文件，并且这个文件里面只有一个内容标签 <div id="app"></div>，用来充当其他内容的容器，而其他的内容都是通过 js 生成的。也就是说，我们只要拿到了子项目的容器 <div id="app"></div> 和生成内容的 js，插入到主项目，就可以呈现出子项目的内容。

我们只需要拿到子项目的上面四个标签，插入到主项目的 HTML 中，就可以在父项目中展现出子项目。

然后再把相对应的静态资源引用路径处理好，就可以实现微前端。

微前端意义？

可以把功能离散，一个功能一个工程，自由组合。复用（嵌入）别人的项目页面，但是别人的项目运行在他自己的环境之上。

qiankun ？

qiankun 是一个基于 single-spa 的微前端实现库，旨在帮助大家能更简单、无痛的构建一个生产可用微前端架构系统。https://qiankun.umijs.org/zh/

 

子应用配置

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

//vue.config.js
// 可以在这个文件修改CLI配置
// 配置项参考 https://cli.vuejs.org/zh/config/
const { name } = require('./package');
module.exports = {
    publicPath: './',
    productionSourceMap:false,
    devServer: {
        // port: 8080,
        headers: {
            'Access-Control-Allow-Origin': '*',
        },
        },
        chainWebpack: (config) => {
        config.module
            .rule('fonts')
            .test(/.(ttf|otf|eot|woff|woff2)$/)
            .use('url-loader')
            .loader('url-loader')
            .tap(options => ({ name: '/fonts/[name].[hash:8].[ext]' }))
            .end()
        },
        // 自定义webpack配置
        configureWebpack: {
        output: {
            library: `${name}`,
            libraryTarget: 'umd',// 把子应用打包成 umd 库格式
            jsonpFunction: `webpackJsonp_${name}`,
        },
    },
}

// package.json
{
    "name": "data-dew",
    ...
}

// 子应用入口-例子
import './public-path';
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css';
import request from './http/request'

Vue.prototype.$axios = request;

Vue.config.productionTip = false

Vue.use(ElementUI)

let instance = null;

let render = ({ data = {}, container } = {}) => {
  instance = new Vue({
    router,
    store,
    data() {
      return {
        parentRouter: data.router,
        parentVuex: data.store,
      }
    },
    render: h => h(App)
  }).$mount(container ? container.querySelector('#dataDew') : '#dataDew');
}

if (!window.__POWERED_BY_QIANKUN__) {

  render();

}

export async function bootstrap() {
  console.log('vue app bootstraped');
}

export async function mount(props) {
  console.log('props from main framework', props.data);
  render(props);
}

export async function update(props) {

　　render(props);

}

export async function unmount() {
  instance.$destroy();
  instance.$el.innerHTML = "";
  instance = null;
  console.log(router)
}

 主应用配置

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css';
import request from './http/request'
import { loadMicroApp,initGlobalState,registerMicroApps, start } from 'qiankun';

Vue.prototype.$axios = request;

Vue.config.productionTip = false
 
Vue.use(ElementUI)



const vm = new Vue({
  router,
  store,
  render: h => h(App)
})

vm.registerMicroApps = {};

vm.loadMicroApps = {};

// name-app名称，path-app访问路径，url—app资源路径
vm.loadMicroApp = (name,path,url) => {
  if(!vm.loadMicroApps[name]){
    vm.loadMicroApps[name] = loadMicroApp({
      name:name,
      entry: url, 
      container: '#subAppContainer', 
      activeRule: path,
      props: { vm }
    })
  }
};

// name-app名称
vm.destroyLoadMicroApp = (name) => {
  
  vm.loadMicroApps[name] && vm.loadMicroApps[name].mountPromise.then(() => {

    microApp.unmount()

  });

};

// name-app名称
vm.registerMicroApp = (name,path,url) => {

  const config = {
    name:name,
    entry: url, 
    container: '#subAppContainer', 
    activeRule: path,
    props: { vm }
  };
  
  if(!vm.registerMicroApps[name]){

    registerMicroApps([config],{
      beforeLoad: (a,b) => {
        // console.log("加载前",a,b);
      },
      beforeMount: () => {
        // console.log("挂在前");
      },
      afterMount: () => {
        // console.log("挂载后");
      },
      beforeUnmount: () => {
        // console.log("销毁前");
      },
      afterUnmount: () => {
        // console.log("销毁后");
      },
    })

    start();

    vm.registerMicroApps[name] = config;

  }

};

vm.$mount('#app');

 注册应用

this.$root.registerMicroApp('data-dew2','/bbb','http://192.168.10.161:1111/');
this.$root.registerMicroApp('data-dew','/aaa','http://192.168.10.161:6321/');
this.$root.registerMicroApp('dataworkshop','/ccc','http://192.168.10.161:8083');