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图片吧
4、nginx禁止缓存问题解决：

    add_header Cache-Control "no-store, no-cache, must-revalidate, proxy-revalidate";
    add_header Pragma "no-cache";
    add_header Expires 0;