微前端提供通过不同技术栈、能够以单独发布的方式将多个子应用构建成一个主应用的技术方案。
所以结构分为主框架,和任意多个子应用。
核心价值
- 和技术栈无关,每个子应用可以选择不同的技术栈
- 子应用可以单独开发、部署,部署完后主框架自动完成同步更新。
- 每个子应用可以独立运行
使用场景
一般适用于较大型的项目,需要将项目拆分成多个子应用并合并,不同的业务模块之间相对独立,可单独开发部署的项目。
Dome
- 建三个项目,包括一个主应用(qiankun-base),两个子应用(qiankun-vue、qiankun-react) 可以用脚手架生成(vue create 、create-react-app)
- 安装包 qiankun
- 尽量端口号不一样,保证三个项目能够同时跑起来
主应用(qiankun-base)
dome选择vue作为基座
修改入口文件src/App.vue
Home
vue应用
react应用
修改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
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(
,
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"
},