qiankun项目最基础的配置

基础配置

主应用（main）、子应用（app1、app2）均以vue项目为例

主应用

1、安装qiankun

npm i qiankun -S

2、在主应用中注册微应用

// main.js
import { registerMicroApps, start } from 'qiankun';

registerMicroApps([
  {
    name: 'app1',
    entry: '//localhost:8083',
    container: '#app1',
    activeRule: '/app1',
  },
  {
    name: 'app2',
    entry: '//localhost:8084',
    container: '#app2',
    activeRule: '/app2',
  },
]);

start();

// App.vue
<div id="app1"></div>

子应用

1、解决跨域问题、以及打包格式

// vue.config.js
const { name } = require('./package');
module.exports = {
    devServer: {
        port: 8083,
        headers: {
            'Access-Control-Allow-Origin': '*',
        },
    },
    configureWebpack: {
        output: {
            library: `${name}-[name]`,
            libraryTarget: 'umd', // 把微应用打包成 umd 库格式
            jsonpFunction: `webpackJsonp_${name}`,
        },
    }
};

2、子应用声明周期函数

在main.js添加生命周期钩子

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

let instance = null;
function render(props = {}) {
  const { container } = props;

  instance = new Vue({
    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;
}

3、资源加载不存在的问题

比如，子应用单独运行时可以正常显示的图片，在

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