主框架

使用vue-cli

index.html容器

<div id="app"></div>

main.js

/app/child/one/表示部署后该子应用的部署路劲

import { createApp } from 'vue'
import App from './App.vue'
import { registerMicroApps, start, setDefaultMountApp } from 'qiankun'
createApp(App).mount('#app')
registerMicroApps([
  {
    name: 'app01', // app name
    entry: process.env.NODE_ENV ==='production' ?'/app/child/one/':'http://localhost:3004',
    container: '#container',
    activeRule: '/app01',
  },
]
  , {
    beforeLoad: [
      app => {
        console.log('[LifeCycle] before load %c%s', 'color: green', app.name)
      },
    ],
    beforeMount: [
      app => {
        console.log('[LifeCycle] before mount %c%s', 'color: green', app.name)
      },
    ],
    afterUnmount: [
      app => {
        console.log('[LifeCycle] after unmount %c%s', 'color: green', app.name)
      },
    ],
  }
)
start({
  prefetch: false
})
setDefaultMountApp('/app01')

vue.config.js

publicPath表示主框架部署到服务器上的目录名称，

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  lintOnSave: false,
  publicPath: '/app',
})

微应用 -vite

index.html容器

<div id="appChild"></div>

main.js

import { App, createApp } from "vue";
import {
  renderWithQiankun,
  qiankunWindow,
} from "vite-plugin-qiankun/dist/helper";
import exportLifeCycleHooks from "vite-plugin-qiankun/dist/helper";
import VueKonva from "vue-konva";
import rootComponents from "./App.vue";
import { QiankunProps } from "vite-plugin-qiankun/es/helper";
import "./index.scss";
let instance: any = null;
function render(props: any = {}) {
  const { container } = props;
  instance = createApp(rootComponents);
  instance.mount("#appChild")
}
renderWithQiankun({
  mount(props: any) {
    console.log('子应用挂载')
    render(props);
  },
  bootstrap() {
    console.log("%c", "color:green;", " ChildOne bootstrap");
  },
  update() {
    console.log("%c", "color:green;", " ChildOne update");
  },
  unmount(props: any) {
    console.log("unmount", props);
    instance.unmount();
    instance._container.innerHTML = "";
    instance = null;
  },
});
if (!qiankunWindow.__POWERED_BY_QIANKUN__) {
  render();
}

vite.config.js

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import qiankun from "vite-plugin-qiankun"; 
import { name as packageName } from "./package.json";
export default defineConfig({
  plugins: [
    vue(),
     qiankun(`${packageName}`,
      { useDevMode: true }), 
    ],
  server: {
    port: 3004,
    host: "0.0.0.0",
    headers: {
      "Access-Control-A1low-Origin": "*",
    },
  },
  base:process.env.NODE_ENV ==='production' ?'/app/child/one/':'/',
  build:{
    rollupOptions:{
      output:{
        assetFileNames: "assets/[ext]/[name]-[hash].[ext]"
      }
    }
  }
});

qiankun框架配置-vue3(主-vue-cli,子-vite)

主框架