[JavaScript知识库]qiankun的简单实用

一、在主应用注册子应用

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import { registerMicroApps, start } from 'qiankun';

Vue.config.productionTip = false

Vue.use(ElementUI);

const apps = [
  {
    name: 'vueApp',
    entry: 'http://localhost:10000', // 默认会加载这个html，解析里面的js动态执行（子应用必须支持跨域）
    container: '#vue',
    activeRule: '/vue'
  },
  {
    name: 'reactApp',
    entry: 'http://localhost:20000', // 默认会加载这个html，解析里面的js动态执行（子应用必须支持跨域）
    container: '#react',
    activeRule: '/react'
  }
];
registerMicroApps(apps);
start();

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

二、设置使用vue框架的子应用

1、vue.config.js

module.exports = {
    devServer: {
        port: 10000,
        headers: {
            'Access-Control-Allow-Origin': '*'
        }
    },
    configureWebpack: {
        output: {
            library: 'singleVue',
            libraryTarget: 'umd'
        }
    }
}

2、main.js：设置导出协议

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

// Vue.config.productionTip = false

let instance = null;
function render(props){
  instance = new Vue({
    router,
    render: h => h(App)
  }).$mount('#app'); // 这里是挂载到自己的html中，基座会拿到这个挂载后的html将其插入进去
}
if(window.__POWERED_BY_QIANKUN__){ // 添加publicPath
  __webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__;
}
if(!window.__POWERED_BY_QIANKUN__){ // 默认独立运行
  render();
}
// 子组件的协议
export async function bootstrap(props){

}
export async function mount(props){
  render(props)
}
export async function unmount(props){
  instance.$destroy();
}

3、设置路由base

const router = new VueRouter({
  mode: 'history',
  base: '/vue',
  routes
})

三、设置使用React框架的子应用

1、config.overrides.js

module.exports = {
    webpack:(config) => {
        config.output.library = 'reactApp';
        config.output.libraryTarget = 'umd';
        config.output.publicPath = 'http://localhost:20000/';
        return config;
    },
    devServer:(configFunction) => {
        return function(proxy, allowedHost){
            const config = configFunction(proxy, allowedHost);
            config.headers = {
                "Access-Control-Allow-Origin": "*"
            }
            return config;
        }
    }
}

2、index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';

function render(){
  ReactDOM.render(
    <React.StrictMode>
      <App />
    </React.StrictMode>,
    document.getElementById('root')
  );
}

// if(window.__POWERED_BY_QIANKUN__){ // 添加publicPath
//   __webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__;
// }
if(!window.__POWERED_BY_QIANKUN__){ // 默认独立运行
  render();
}

export async function bootstrap(){

}
export async function mount(){
  render();
}
export async function unmount(){
  ReactDOM.unmountComponentAtNode(document.getElementById('root'))
}