const microApps = [
{
name: 'sub-vue',
entry: '//localhost:7777/',
activeRule: '/sub-vue',
container: '#subapp-viewport', // ⼦应⽤挂载的div
props: {
routerBase: '/sub-vue' // 下发路由给⼦应⽤，⼦应⽤根据该值去定义qiankun环境下的路由
}
},
{
name: 'sub-react',
entry: '//localhost:7788/',
activeRule: '/sub-react',
container: '#subapp-viewport', // ⼦应⽤挂载的div
props: {
routerBase: '/sub-react'
}
}
]
export default microApps
然后在src/main.js中引⼊
import Vue from 'vue';
import App from './App.vue';
import { registerMicroApps, start } from 'qiankun';
import microApps from './micro-app';
new Vue({
render: h => h(App),
}).$mount('#app');
registerMicroApps(microApps, {
beforeLoad: app => {
console.log('before load app.name====>>>>>', app.name)
},
beforeMount: [
app => {
console.log('[LifeCycle] before mount %c%s', 'color: green;', app.name);
},
],
afterMount: [
app => {
console.log('[LifeCycle] after mount %c%s', 'color: green;', app.name);
}
],
afterUnmount: [
app => {
console.log('[LifeCycle] after unmount %c%s', 'color: green;', app.name);
},
],
});
start();
在App.vue中，需要声明micro-app.js配置的⼦应⽤挂载div（注意id⼀定要⼀致），以及基座布局相关的，⼤概这样：
<template>
<div id="layout-wrapper">
<div class="layout-header">头部导航</div>
<div id="subapp-viewport"></div>
</div>
</template>
这样，基座就算配置完成了。项⽬启动后，⼦应⽤将会挂载到<div id="subapp-viewport"></div>中。
⼦应⽤配置
⼀、vue⼦应⽤
⽤Vue-cli在项⽬根⽬录新建⼀个sub-vue的⼦应⽤，⼦应⽤的名称最好与⽗应⽤在src/micro-app.js中配置的名称⼀致（这样可以直接使⽤package.json中的name作为output）。
1. 新增fig.js，devServer的端⼝改为与主应⽤配置的⼀致，且加上跨域headers和output配置。
// package.json的name需注意与主应⽤⼀致
const { name } = require('../package.json')
configureWebpack: {
output: {
library: `${name}-[name]`,
libraryTarget: 'umd',
jsonpFunction: `webpackJsonp_${name}`,
}
},
devServer: {
port: v.VUE_APP_PORT, // 在.env中VUE_APP_PORT=7788，与⽗应⽤的配置⼀致
headers: {
'Access-Control-Allow-Origin': '*' // 主应⽤获取⼦应⽤时跨域响应头
}
}
}
2. 新增src/public-path.js
(function() {
if (window.__POWERED_BY_QIANKUN__) {
if (v.NODE_ENV === 'development') {
// eslint-disable-next-line no-undef
__webpack_public_path__ = `//localhost:${v.VUE_APP_PORT}/`;
return;
}
/
/ eslint-disable-next-line no-undef
__webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__;
}
})();
3. src/router/index.js改为只暴露routes，new Router改到main.js中声明。
4. 改造main.js，引⼊上⾯的public-path.js，改写render，添加⽣命周期函数等，最终如下：
import './public-path' // 注意需要引⼊public-path
import Vue from 'vue'
import App from './App.vue'
import routes from './router'
import store from './store'
import VueRouter from 'vue-router'
let instance = null
function render (props = {}) {
const { container, routerBase } = props
const router = new VueRouter({
base: window.__POWERED_BY_QIANKUN__ ? routerBase : v.BASE_URL,    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
}
⾄此，基础版本的vue⼦应⽤配置好了，如果router和vuex不需⽤到，可以去掉。⼆、react⼦应⽤
1. 通过npx create-react-app sub-react新建⼀个react应⽤。
2. 新增.env⽂件添加PORT变量，端⼝号与⽗应⽤配置的保持⼀致。
3. 为了不eject所有webpack配置，我们⽤⽅案复写webpack就可以了。
⾸先npm install react-app-rewired --save-dev
新建sub-react/config-overrides.js
const { name } = require('./package.json');
webpack: function override(config, env) {bootstrap项目
// 解决主应⽤接⼊后会挂掉的问题：github/umijs/qiankun/issues/340
< = filter(
(e) => !e.includes('webpackHotDevClient')
);
config.output.library = `${name}-[name]`;
config.output.libraryTarget = 'umd';
config.output.jsonpFunction = `webpackJsonp_${name}`;
return config;
},
devServer: (configFunction) => {
return function (proxy, allowedHost) {
const config = configFunction(proxy, allowedHost);
config.open = false;
config.hot = false;
config.headers = {
'Access-Control-Allow-Origin': '*',
};
return config;
};
},
};
4. 新增src/public-path.js。
if (window.__POWERED_BY_QIANKUN__) {
// eslint-disable-next-line
__webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__; }
5. 改造index.js，引⼊public-path.js，添加⽣命周期函数等。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。