微前端提供通过不同技术栈、能够以单独发布的方式将多个子应用构建成一个主应用的技术方案。
所以结构分为主框架，和任意多个子应用。
核心价值
- 和技术栈无关，每个子应用可以选择不同的技术栈
- 子应用可以单独开发、部署，部署完后主框架自动完成同步更新。
- 每个子应用可以独立运行
使用场景
一般适用于较大型的项目，需要将项目拆分成多个子应用并合并，不同的业务模块之间相对独立，可单独开发部署的项目。
Dome
- 建三个项目，包括一个主应用(qiankun-base)，两个子应用(qiankun-vue、qiankun-react) 可以用脚手架生成（vue create 、create-react-app）
- 安装包 qiankun
- 尽量端口号不一样，保证三个项目能够同时跑起来
主应用(qiankun-base)
dome选择vue作为基座
修改入口文件src/App.vue
<template>
<div id="app">
<el-menu :router="true" mode="horizontal">
<!--基座中可以放自己的路由-->
<el-menu-item index="/">Home</el-menu-item>
<!--引用其他子应用路由-->
<el-menu-item index="/vue">vue应用</el-menu-item>
<el-menu-item index="/react">react应用</el-menu-item>
</el-menu>
<!-- 主应用自己的路由 -->
<router-view></router-view>
<!-- 子应用的渲染位置 -->
<div id="vue"></div>
<div id="react"></div>
</div>
</template>
修改src/main.js引入qiankun
// 引入qiankun
import { registerMicroApps, start } from 'qiankun';
const apps = [
{
name: 'vueApp', // 子应用的名字
entry: '//localhost:8081', // 默认会加载这个html 解析里面的js 动态的执行 （子应用必须支持跨域）fetch
container: '#vue', // App.vue中容器名（此项目页面中定义的容器id，用于把对应的子应用放到此容器中）
activeRule: '/vue', // 激活的路径
props: { a: 1 } // 传递的值（可选）
},
{
name: 'reactApp',
entry: '//localhost:20000', // 默认会加载这个html 解析里面的js 动态的执行 （子应用必须支持跨域）fetch
container: '#react',
activeRule: '/react',
}
]
registerMicroApps(apps); // 注册应用
start({
prefetch: false // 取消预加载
});// 开启
const router = new VueRouter({
mode: "history",
routes,
});
new Vue({
router,
render: h => h(App),
}).$mount('#app')
子应用(qiankun-vue)
src/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('#vueApp'); // 这里是挂载到自己的html中 基座会拿到这个挂载后的html 将其插入进去
}
if (window.__POWERED_BY_QIANKUN__) { // 动态添加publicPath
__webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__;
}
if (!window.__POWERED_BY_QIANKUN__) { // 默认独立运行
render();
}
// 父应用加载子应用，子应用必须暴露三个接口：bootstrap、mount、unmount
// 子组件的协议就ok了
export async function bootstrap(props) {
};
export async function mount(props) {
render(props)
}
export async function unmount(props) {
instance.$destroy();
}
public/index.html
<div id="vueApp"></div>
vue.config.js
module.exports = {
lintOnSave: false, // 关闭eslint检测
devServer: {
port: 8080,//这里的端口是必须和父应用配置的子应用端口一致
headers: {
//因为qiankun内部请求都是fetch来请求资源，所以子应用必须允许跨域
'Access-Control-Allow-Origin': '*'
}
},
configureWebpack: {
output: {
//资源打包路径
library: 'vueApp',
libraryTarget: 'umd'
}
}
}
子应用(qiankun-react)
安装包：react-app-rewired
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')); // 卸载节点
}
qiankun-react下创建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
}
}
}
qiankun-react下创建.env文件
PORT=20000
BROWSER=none
修改package.json的启动命令
"scripts": {
"start": "react-app-rewired start",
"build": "react-app-rewired build",
"test": "react-app-rewired test",
"eject": "react-app-rewired eject"
},
