微前端 qiankun

三个项目，一个管理端，两个微前端

文档地址 https://qiankun.umijs.org/zh

普通项目管理端安装qiankun     npm i qiankun -S

管理端main.js

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false
// 引入qiankun
import {
	registerMicroApps,
	start
} from 'qiankun';
const apps = [{
		name: 'vueApp', // 应用的名字
		entry: 'http://localhost:8081/', // 默认会加载这个html 解析里面的js 动态的执行 （子应用必须支持跨域）fetch
		container: '#vue', // 容器名（此项目页面中定义的容器id，用于把对应的子应用放到此容器中）
		activeRule: '/vue', // 激活的路径
		props: {
			a: 1
		} // 传递的值（可选）
	},
	{
		name: 'reactApp',
		entry: 'http://wfios.com:1667/dqGxpt_qt/', // 默认会加载这个html 解析里面的js 动态的执行 （子应用必须支持跨域）fetch
		container: '#react',
		activeRule: '/react',
	}
]

registerMicroApps(apps); // 注册应用
start({
	prefetch: false // 取消预加载
});
new Vue({
	render: h => h(App),
}).$mount('#app')

　管理端app.vue

<template>
  <div id="app">
	  <a href='/vue'>vue应用1</a>
	  <a href='/react'>应用2</a>
    <div id="vue"></div>
    <div id="react"></div>
  </div>
</template>
 
<style lang="less">
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}
nav {
  padding: 30px;
  a {
    font-weight: bold;
    color: #2c3e50;
 
    &.router-link-exact-active {
      color: #42b983;
    }
  }
}
</style>

　　子应用1 

import Vue from 'vue';
import App from './App.vue';
 
Vue.config.productionTip = false;
 
let router = null;
let instance = null;
function render(props = {}) {
  const { container } = props; 
  instance = new Vue({
    render: (h) => h(App),
  }).$mount(container ? container.querySelector('#app') : '#app');
}
 
 
 
if (window.__POWERED_BY_QIANKUN__) { // 动态添加publicPath
  __webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__;
}
if (!window.__POWERED_BY_QIANKUN__) { // 默认独立运行
  render();
}
 
// 父应用加载子应用，子应用必须暴露三个接口：bootstrap、mount、unmount
// 子组件的协议就ok了
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;
}

　　子应用1 vue.config.js

const { name } = require('./package');
module.exports = {
  lintOnSave: false,  	
  devServer: {
    port: 8081,
    headers: {
      'Access-Control-Allow-Origin': '*',
    },
  },
  configureWebpack: {
    output: {
      library: `${name}-[name]`,
      libraryTarget: 'umd', // 把微应用打包成 umd 库格式
      //jsonpFunction: `webpackJsonp_${name}`,// 取决于webpack的版本（可不要，但小于webpack5.x则需要加上）
    },
  }
};

　　子应用1 router.js

const router = new VueRouter({
    mode: 'history',
    base: window.__POWERED_BY_QIANKUN__ ? "/vue" : "/",//基础路径
    routes
})