搭建一个qiankun的微前端应用【未完】

使用qiankun

你好！ 开始之前可以先看看官网信息qiankun。

准备主应用的vue项目

安装qiankun

按照官网的快速上手内容进行主应用的安装。
1，安装qiankun
2，在主应用中注册微应用

根据微应用，主应用注册

import Vue from 'vue'
import App from './App'
import router from './router'
import { registerMicroApps, setDefaultMountApp, start  } from 'qiankun';

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})


registerMicroApps([

  {
    name: 'vueApp',
    entry: '//localhost:8080',
    container: '#container',
    activeRule: '/app-vue',
  },
]);
setDefaultMountApp("/app-vue");
// 启动 qiankun
start();

准备一个vue的微应用

微应用导出生命周期

新增core文件夹，在core目录下新增public-path.js

	if (window.__POWERED_BY_QIANKUN__) {
	  __webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__;
	}

修改入口main.js文件

参考官方文档修改main.js文件为

import '../core/public-path'
// import '../core/life-cycle'
import Vue from 'vue'
import App from './App'
import router from './router'
import store from './store';
// Vue.config.productionTip = false
// let router = null;
let instance = null;
/**
 * @name 子应用实例化函数
 *
 * */
const render = ({routerBase,container}={})=>{
  Vue.prototype.$eventBus = new Vue();
  Vue.config.productionTip = false;
  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() {
  console.log('[vue] vue app bootstraped');
}
export async function mount(props) {
  console.log('[vue] props from main framework', props);
  render(props);
}
export async function unmount() {
  instance.$destroy();
  instance.$el.innerHTML = '';
  instance = null;
}

跨域（问题还未解决）