前言：

我这里的父级应用使用的是react工程，umi。下面两个例子vue2，vue3，作为微应用接入到基座所需调整

vue2项目

1: 安装vue-cli

使用vue create XXX(xxx是你的项目名称) 命令创建项目，安装的时候选择vue2

2：改造main.js：

子应用需要在自己的入口文件导出 bootstrap、mount、unmount 三个生命周期钩子，以供主应用在适当的时机调用。

bootstrap：只会在子应用初始化的时候调用一次，下次子应用重新进入时会直接调用 mount 钩子，不会再重复触发 bootstrap。通常我们可以在这里做一些全局变量的初始化，比如不会在 unmount 阶段被销毁的应用级别的缓存等。

mount：应用每次进入都会调用 mount 方法，通常我们在这里触发应用的渲染方法。

unmount：应用每次 切出/卸载 会调用的方法，通常在这里我们会卸载子应用的应用实例

// 声明一个变量，可以用于卸载
let instance = null
// 挂载到自己的html中，基座会拿到这个挂载后的html插入进去
function render(props = {}) {
  const { container } = props
  instance = new Vue({
    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('bootstrap函数：', props)
}
export async function mount(props) {
  console.log('mount函数：', props)
  render(props)
}
export async function unmount(props) {
  console.log('unmount函数：', props)
  instance.$destroy()
  instance = null
}

3：配置文件vue.config.js

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  configureWebpack:{
    output:{
      // 输出暴露的名称,挂载到window上的名称
      library:'vueApp',
      // 打包格式
      libraryTarget:'umd'
    }
  },
  devServer:{
    // 允许跨域
    headers:{
      'Access-Control-Allow-Origin':'*'
    }
  },
})

  旧版本的webpack可能会报错defineConfig，可以去掉difineConfig(),只保留{}中的内容，或者升级新版webpack。

4：启动：

项目启动之后，将基座中注册的子应用地址改为你项目启动的地址。

vue3项目

1：安装新版vue-cli，

使用vue create XXX(xxx是你的项目名称) 命令创建项目，安装的时候选择vue3

2：改造main.js，按照图示

import { createApp } from 'vue'
import {createRouter,createWebHistory} from 'vue-router'
import App from './App.vue'
import routes from './router'

let app
let router
let history
function render(props = {}){
  history = createWebHistory('/vue')
  router = createRouter({
    history,
    routes
  })
  app = createApp(App)
  const {container} = props
  app.use(router).mount(container?container.querySelector('#app'):'#app')
}

if(!window.__POWERED_BY_QIANKUN__){
  render()
}

// 子组件暴露三个函数
export async function bootstrap(props){
  console.log('我是bootstrap项目函数',props);
}
export async function mount(props){
  console.log('我是mount项目函数',props);
  render(props)
}
export async function unmount(props){
  console.log('我是vue项目unmount函数',props);
  history = null
  app = null 
  router = null
}

   vue3不再new Vue了，而是使用createApp，注意和vue2有所区别

3：改造vue.config.js，按照图示：

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  publicPath:'http://localhost:8083',
  configureWebpack:{
    output:{
      library:'vueApp',
      libraryTarget:'umd'
    }
  },
  devServer:{
    port:8083,
    headers:{
      'Access-Control-Allow-Origin':'*'
    }
  },
})

publicPath中的port和devServer中port中保持一致，可以根据你的项目修改。

4：启动

项目启动之后，将基座中注册的子应用地址改为你项目启动的地址。