一、背景：将公司各个产品融合到一个前端界面中，菜单部分为主应用，内容部分为微应用
二、步骤
1、主应用中的配置
npm install qiankun -g 或 yarn qiankun在主应用的入口文件中添加如下代码（我是在src\App.js） import {registerMicroApps,start} from 'qiankun' //引入qiankun componentDidMount(){ registerMicroApps( [ { name:'front', //微应用的名称，微应用之间必须确保唯一(微应用中package.json中的name) entry:'//localhost:1101', //微应用的entry地址 container:'#subapp-container',//微应用的容器节点的选择器 activeRule:'/react'//微应用的激活规则 }, { name:'vue', entry:'//localhost:1103', container:'#subapp-container', activeRule:'/vue' } ] ) start({prefetch:'all'}) //启动，配置all则主应用start后即开始预加载所有微应用静态资源 } render(){ return ( <div> <LeftMenu /> <div> <TopMenu /> <main id='subapp-container' /> </div> </div> )子应用中的配置（react项目中） webpack.js
const {name}=require('../package.json') module.exports={ output:{ library:`${name}`, //name为package.json中的name libraryTarget:'umd', jsonpFunction:`webpackJsonp_${name}`, globalObject:'window' }, devServer:{ port:'1101', clientLogLevel:'warning', disableHostCheck:true, historyApiFallback:true, compress:true, headers:{ 'Access-Control-Allow-Origin':'*', }, overlay:{ warnings:false, errors:true } } }/src/index.js
import './public-path' // 使用 webpack 运行时 publicPath 配置 const initAPP = container => { ReactDOM.render( <Provider store={store}> <Routers store={store} /> </Provider>, container?container.querySelector('#root'):document.querySelector('#root') } //全局变量来判断环境，独立运行时 if(!window.__POWERED_BY_QIANKUN__){ initAPP() } /** * bootstrap 只会在微应用初始化的时候调用一次，下次微应用重新进入时会直接调用 mount 钩子，不会再重复触发 bootstrap。 * 通常我们可以在这里做一些全局变量的初始化，比如不会在 unmount 阶段被销毁的应用级别的缓存等。 */ export async function bootstrap() { await console.log('react app bootstraped'); } /** * 应用每次进入都会调用 mount 方法，通常我们在这里触发应用的渲染方法 */ export async function mount(props) { const {container}=props await initAPP(container) } /** * 应用每次 切出/卸载 会调用的方法，通常在这里我们会卸载微应用的应用实例 */ export async function unmount() { await ReactDOM.unmountComponentAtNode(document.getElementById('react15Root')); } /** * 可选生命周期钩子，仅使用 loadMicroApp 方式加载微应用时生效 */ export async function update(props) { await console.log('update props', props); }src/public-path.js
if(window.__POWERED_BY_QIANKUN__){ //qiankun 将会在微应用 bootstrap 之前注入一个运行时的 publicPath 变量，你需要做的是在微应用的 entry js 的顶部添加如下代码 __webpack_public_path__=window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__三、开发中遇到的坑
微应用与主应用的DOM节点id不能相同在微应用中加入container?container.querySelector('#root'):document.querySelector('#root') 防止找不到节点而无法显示在html中引入的css、js要采用绝对路径，不然找不到主应用在注册微应用时一定要在节点渲染完时注册，不然会导致渲染失败