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 = ''
  }
}

猜你喜欢

转载自blog.csdn.net/bus_lupe/article/details/123910157