qiankun微前端任意位置子应用

主项目

1、安装qiankun

npm i qiankun -S

2、引入注册

创建存放子应用页面

//whpvue.vue文件
<template><div style="height: 800px;"><div id="whpvue">该项目未启动,请联系管理员!</div></div>
</template>
<script setup lang="ts">
import { loadMicroApp } from 'qiankun';
import { onMounted } from 'vue';
onMounted(() => {let loadAppRef: any = null;console.log('loadApp:', loadAppRef);if (loadAppRef?.current) {//加上判断，避免多次创建loadAppRef.current.unmount();}let app = {name: 'whpvue', //子项目名称entry: 'http://localhost:81/whpvue', // 子项目地址container: '#whpvue', // 在主项目中配置子项目将要显示的位置节点activeRule: '/whpvue', //激活规则，可以通过设置不同的路由进行激活props: {mainAppMethod: (params) => {console.log('主应用方法被调用', params);},refreshPage() {//子应用回到主应用时需要用到更新路由的方法window.location.href = '/';}} //传参       //子项目 主项目传参的通道};loadAppRef.current = loadMicroApp(app);
});
</script>

3、路由创建

在主应用中需要对子应用的路由进行配置

 // 子应用配置{path: '/whpvue/index',component: () => import('@/views/whpvue.vue'),hidden: true},//当在子应用中刷新页面的时候会重定向到子应用页面，这个很关键{path: '/whpvue/:pathMatch(.*)*',component: () => import('@/views/whpvue.vue'),hidden: true},

4、路由守卫

这个也很关键

//main.ts
router.beforeEach((to, from: any, next) => {console.log(to, 40);if (Object.keys(from).includes('href') && from?.href.indexOf('/whpvue') > -1 && to.name == 'Index') {// 从子应用过来的// 手动调用返回方法吧(window as any).backMain();}next();
});

二、子项目

子项目往往都是可以独立运行的，所以动的越少越好

1、安装@sh-winter/vite-plugin-qiankun

npm i @sh-winter/vite-plugin-qiankun

2、main.js配置

• Vue3.x

import './assets/main.css'
import { createApp } from 'vue'
import App from './App.vue'import { exportLifeCycleHooks, qiankunWindow } from '@sh-winter/vite-plugin-qiankun/dist/helper'
function render() {const app = createApp(App)app.mount('#app1') //此处的id和html中一致，最好不要与主项目的一致，以免冲突
}
exportLifeCycleHooks({bootstrap() {// do nothing.},mount(props) {render(props.container);},unmount() {app?.unmount();}
})
if (!qiankunWindow.__POWERED_BY_QIANKUN__) {render();
}

3、vite.config.js配置

• Vue3.x

import {qiankunPlugin, transformAssetUrl } from '@sh-winter/vite-plugin-qiankun'
import { name as packageName } from './package.json'
export default defineConfig({base: `/${packageName}/`,plugins: [vue({template: {compilerOptions: {nodeTransforms: [transformAssetUrl]}}}),qiankunPlugin({ packageName })  //这里要看.env.development中的配置],resolve: {alias: {'@': fileURLToPath(new URL('./src', import.meta.url))}},})

三、问题解决

1、可能出现报错信息：

问题分析：一般实在网络较慢的时候出现，意思就是还没有加载好没法显示
问题解决：使用v-if绑定子项目显示的位置，在mounted后进行显示即可
2、路由配置一定要注意，如果页面加载有问题，多数是路由问题
3、背景图片不展示，地址获取错误：需要将@/assets改成…/的形式，或者将背景图片换成img图片吧