1、vue3主应用配置

1、安装 qiankun

yarn add qiankun # 或者 npm i qiankun -S

2、在主应用中注册微应用

import { registerMicroApps, start } from "qiankun"
const apps = [
    {  
      name: 'vue2App', // 应用名称   xs_yiqing_vue2
      entry: '//localhost:8080', // vue 应用的入口地址  
      container: '#vue2Container', // 挂载的子应用容器  
      activeRule: '/vue2App', // 激活子应用的路由规则   //访问子应用的规则，比如：主应用为localhost:8080，那访问该子应用的url应为localhost:8080/vue2App
      props: { user: 'LZQ' }, // 初始化参数 
    },  
    {  
      name: 'vue3App', // 应用名称  xs_faren_vue3
      entry: '//localhost:8888', // React 应用的入口地址  
      container: '#vue3Container', // 挂载的子应用容器  
      activeRule: '/vue3App', // 激活子应用的路由规则  
    },  
    // 可以添加更多子应用配置  
  ];  

//注册子应用
registerMicroApps(apps);  

//启动
start();

3、在App.vue中定义挂载微应用的容器

<template>
  <div id="app">  
    <router-view/>
    <!-- 子应用渲染区，用于挂载子应用节点 -->
    <div id="vue2Container"></div>
    <div id="vue3Container"></div>
  </div>  
</template>

通过以上三个步骤，完成主应用配置。

2、vue2微应用配置

1、安装 qiankun

yarn add qiankun # 或者 npm i qiankun -S

2、在src下新建文件public-path.js

if (window.__POWERED_BY_QIANKUN__) {
    __webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__;
  }

3、main.js配置

import './public-path'; // qiankun

let router = null;
let instance = null;
function render(props = {}) {
  const { container } = props;
  router = new VueRouter({
    base: window.__POWERED_BY_QIANKUN__ ? '/vue2App/' : '/',
    mode: 'history',
    routes,
  });

  instance = new Vue({
    i18n,
    router,
    store,
    render: (h) => h(App),
  }).$mount(container ? container.querySelector('#app') : '#app');
}

// 独立运行时
if (!window.__POWERED_BY_QIANKUN__) {
  render();
}

export async function bootstrap(props) {
  console.log('[vue] vue app bootstraped');
  console.log(props);
}
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;
}

4、vue.config.js配置

 devServer: {
	headers: {
      'Access-Control-Allow-Origin': '*',
    },
},
 configureWebpack: { // qiankun
    output: {
      library: `vue2App`,
      libraryTarget: 'umd', // 把微应用打包成 umd 库格式
      jsonpFunction: `webpackJsonp_vue2App`, // webpack 5 需要把 jsonpFunction 替换成 chunkLoadingGlobal
    },
  },

3、vue3微应用配置

1、安装 qiankun

yarn add vite-plugin-qiankun  或者 npm install vite-plugin-qianku

3、main.ts配置

import { createApp } from 'vue';
import {
  renderWithQiankun,
  qiankunWindow,
  QiankunProps,
} from 'vite-plugin-qiankun/dist/helper'

const app = createApp(App);
const render = (props: QiankunProps = {}) => {
    const { container } = props
    const app2: string | Element = container?.querySelector('#app') || '#app' // 避免 id 重复导致微应用挂载失败
    app.mount(app2)
  }

  const initQianKun = () => {
    renderWithQiankun({
      bootstrap() {
        console.log('微应用：bootstrap')
      },
      mount(props) {
        // 获取主应用传入数据
        console.log('微应用：mount', props)
        render(props)
      },
      unmount(props) {
        console.log('微应用：unmount', props)
      },
      update(props) {
        console.log('微应用：update', props)
      },
    })
  }
  qiankunWindow.__POWERED_BY_QIANKUN__ ? initQianKun() : render() // 判断是否使用 qiankun ，保证项目可以独立运行

3、vue.config.ts配置

import { defineConfig } from 'vite'
import qiankun from 'vite-plugin-qiankun'
 
export default defineConfig((mode) => {
  return {
    plugins: [
      qiankun('vue3App', { // 微应用名字，与主应用注册的微应用名字保持一致
        useDevMode: true,
      }),
    ],
  }
})

4、路由配置

import { createRouter, createWebHashHistory, createWebHistory } from 'vue-router';
// app router
export const router = createRouter({
  history: createWebHistory(qiankunWindow.__POWERED_BY_QIANKUN__ ? '/vue3App' : '/'),
});