续上篇 qiankun 微前端配置

上篇文章地址：微前端框架 qiankun 配置使用【基于 vue/react脚手架创建项目 】-CSDN博客

主应用：

src/main.js  配置：

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import { registerMicroApps, start } from 'qiankun';registerMicroApps([{name: 'react app', // app name registeredentry: 'http://localhost:3000/index.js',container: '#react',activeRule: '/react',sandbox: {strictStyleIsolation: true // 开启样式隔离}},{name: 'vue app',entry: 'http://localhost:8888/',container: '#vue',activeRule: '/vue',sandbox: {strictStyleIsolation: true // 开启样式隔离}},
]);start();
Vue.config.productionTip = falsenew Vue({router,render: h => h(App)
}).$mount('#app')

src/App.vue  配置：

<template><div>qiankun<router-link to="/vue">vue</router-link><router-link to="/react">react</router-link><router-view v-show="$route.name"></router-view><div id="vue"></div><div id="react"></div></div>
</template><style>
</style>

vue微应用：

src/main.js 配置：

import Vue from 'vue'
import App from './App.vue'
Vue.config.productionTip = false
let instance = null;
function render(props) {console.log(props);// props 组件通信instance = new Vue({render: h => h(App)}).$mount('#app') // 这里是挂载到自己的HTML中，基座会拿到这个挂载后的HTML，将其插入进去
}if (!window.__POWERED_BY_QIANKUN__) { // 如果是独立运行，则手动调用渲染render();
}
if(window.__POWERED_BY_QIANKUN__){ // 如果是qiankun使用到了，则会动态注入路径// __webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__;
}// 根据 qiankun 的协议需要导出 bootstrap/mount/unmount
export async function bootstrap(props) {console.log(props);
}
export async function mount(props) {render(props);
}
export async function unmount(props) {console.log(props);instance.$destroy();
}

vue.config.js  配置：

module.exports = {devServer: {port: 8888,headers:{'Access-Control-Allow-Origin': '*' // 允许跨域}},configureWebpack: {output: {library: 'vue app',//这里的名称和主应用的name一致！！！libraryTarget: 'umd'}}
};

react微应用：

src/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__){render();
}
export async function bootstrap(){}
export async function mount() {render()
}
export async function unmount(){ReactDOM.unmountComponentAtNode( document.getElementById('root'));
}

config/webpack.config.js  配置

如果没有可以看看我的另一篇文章：react 项目如何暴露 webpack配置文件-CSDN博客

在output配置下加入：

library: `react app`,//和主应用配置的name一致
libraryTarget: 'umd'

如图：

 vue：

 react：