vue2+vue-cli下使用乾坤微前端

1. 安装乾坤

npm install qiankun --save

2. 主应用中的mian.js文件注册乾坤

  import { registerMicroApps, start } from 'qiankun'; 
  registerMicroApps([ 
    { 
      name: 'child-app',//子项目的libary名
      entry: '//localhost:8081', //子项目的域名
      container: '#myChildApp', //子应用挂载的容器元素选择器
      activeRule: '/childApp' //子应用的路由匹配激活规则
    } 
  ]);
  start();

3. 子应用中配置

    let instance = null;
    function render(props = {}) {
      const { container } = props
      instance = new Vue({
         render: h => h(App),
         router
      }).$mount(container ? container.querySelector('#app') : '#app');
    }
    // webpack打包公共文件路径
    if (window.__POWERED_BY_QIANKUN__) {
      window. __webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__;
    }
    // 独立运行
    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;
    }

4. 子应用中配置项

  const { packName } = require('./package.json')
  configureWebpack: {
    output: {
      library:`${packName}-[name]`,//需要与父应用中配置的name对应
      libraryTarget:'umd',
    }
  },