create-iking-admin/template-micro/iking-micro-admin/src/main.ts

金合技术中台脚手架

/*
 * @Author: wfl
 * @LastEditors: wfl
 * @description: 
 * @updateInfo: 
 * @Date: 2022-10-24 10:09:58
 * @LastEditTime: 2022-10-24 15:52:13
 */
import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import {
  renderWithQiankun,
  qiankunWindow,
  QiankunProps,
} from 'vite-plugin-qiankun/dist/helper'

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

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 ，保证项目可以独立运行
console.log('qiankunWindow.__POWERED_BY_QIANKUN__: ', qiankunWindow.__POWERED_BY_QIANKUN__);