一、主应用
1.安装qiankun.js npm i qiankun -S
2.主应用封注册微应用并启动 （封装成qiankun.js在main.js中引用）
import { registerMicroApps, start } from "qiankun";
export const useQiankun = () => {
const apps = [
{
name: "app", // 必选，微应用的名称，微应用之间必须确保唯一
entry: "http://zhulifeng.laidan.com:8085", // - 必选，微应用的入口
container: "#appContainer", // -必选，微应用的容器节点的选择器或者 Element 实例
activeRule: "/app", // - 必选，微应用的激活规则
},
{
name: 'wechat',
entry: 'http://localhost:8087',
container: '#appContainer',
activeRule: '/wechat',
},
];
registerMicroApps(apps, {
beforeLoad: [
(app) => {
console.log(`${app.name}的beforeLoad阶段`);
},
],
beforeMount: [
(app) => {
console.log(`${app.name}的beforeMount阶段`);
},
],
_afterMount: [
(app) => {
console.log(`${app.name}的afterMount阶段`);
},
],
get afterMount() {
return this._afterMount;
},
set afterMount(value) {
this._afterMount = value;
},
beforeUnmount: [
(app) => {
console.log(`${app.name}的beforeUnmount阶段`);
},
],
afterUnmount: [
(app) => {
console.log(`${app.name}的afterUnmount阶段`);
},
],
});
start();
};
3.main.js 中引用 为了确保装载子应用的容器已创建，我们需要在new Vue（）之后，等DOM加载好了在注册并启动qiankun
//main.js
import { useQiankun } from "./utils/qinakun";
const vueApp = new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')
vueApp.$nextTick(() => {
useQiankun()
})
4.使用vue-admin也可以在layou-Appmain.vue中引用
<script>
import { start } from 'qiankun';
export default {
name: 'AppMain',
computed: {
key() {
return this.$route.path
}
},
mounted() {
if(!window.isQiankunStart){
window.isQiankunStart = true;
start();
}
},
}
</script>
5.主应用路由的改造 （vue-admin项目）
//注释404否则微应用的路由跳转会被404拦截导致微应用加载失败
// {
// path: '*',
// redirect: '/404',
// meta: {
// roles: []
// },
// hidden: true
// },
//微应用路由匹配
{
path: '/app/*',
component: Layout,
},
{
path: '/wechat/*',
component: Layout,
},
二、微应用改造 wechat
1.在src目录下新增文件public-path.js，主要用于修改子项目的publicPath
if (window.__POWERED_BY_QIANKUN__) {
// eslint-disable-next-line no-undef
__webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__
}
2.在main.js，引入public-path.js 并配合主项目导出single-spa需要的三个生命周期。注意：路由实例化需要在main.js里面完成，以便于路由的销毁，所以路由文件只需要导出路由配置即可（原模板导出的是路由实例）
import './public-path';
import routes from './router';
let router = null;
let instance = null;
function render(props = {}) {
const { container } = props;
router = new VueRouter({
base: window.__POWERED_BY_QIANKUN__ ? '/wechat/' : '/',
mode: 'history',
routes,
});
instance = new Vue({
router,
store,
render: (h) => h(App),
}).$mount(container ? container.querySelector('#wechatApp') : '#wechatApp');
// index.html 里面的 id 需要改成 appVueHash，否则子项目无法独立运行
}
// 独立运行时
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;
router = null;
}
3.修改打包配置文件webpack.base.conf.js ，output配置
const packageName = require('../package.json').name;
output: {
path: config.build.assetsRoot,
filename: '[name].js',
publicPath: process.env.NODE_ENV === 'production'
? config.build.assetsPublicPath
: config.dev.assetsPublicPath,
library: `${packageName}-[name]`,
libraryTarget: 'umd',
},
4.修改运行配置文件webpack.dev.conf.js ，允许跨域
devServer: {
headers: {
'Access-Control-Allow-Origin': '*'
},
},
三、qiankun.js BUG
1.主应用和微应用同时引用bable-polyfill 报错只能引用一个 删除主应用引用bable-polyfill
解决：在webpack.base.conf.js删除babel-polyfill引用
/ entry: {
// app: [ 'babel-polyfill'，'./src/main.js']
// },
entry: {
app: ['./src/main.js']
},
2.引用官网的output.jsonpFunction 配置报错 注释掉 推断多个应用引用统一名称报错
3.[import-html-entry]: error occurs while executing entry script 出现报错的场景： 子应用使用 CND 的方式引用依赖时，集成到基座应用中报错
4.路由配置错误导致页面未加载 如404页面拦截，ip端口配占用和配置不一样，主应用id和微应用id相同等
<script src="../../../static/xlsx.core.min.js" ignore></script>
<script src="https://gosspublic.alicdn.com/aliyun-oss-sdk-4.10.0.min.js" ignore></script>
qiankun.js常见问题和交流
issues(github.com/umijs/qiank…)
qiankun 技术圆桌:www.yuque.com/kuitos/gky7…
钉钉qiankun交流群：34805470
