4-11 子应用接入微前端vue2

修改vue.config.js

module.exports = {
  	...
    output: {
      // 把子应用打包成 umd 库格式 commonjs 浏览器，node环境
      library: `${packageName}`,
      libraryTarget: 'umd',
    },
  },
};

main.js

修改main.js暴露bootstrap开始、mount挂载、unmount卸载生命周期

import Vue from 'vue'
import App from './App.vue'
import router from './router'
Vue.config.productionTip = false

const render = () => {
  new Vue({
    router,
    render: h => h(App)
  }).$mount('#app-vue')
}

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

// 开始加载结构
export async function bootstrap() {
  console.log('bootstrap');
}

export async function mount() {
  render()
}

export async function unmount(ctx) {
  const { container } = ctx
  if (container) {
    document.querySelector(container).innerHTML = ''
  }
}