基座配置 1.添加一个跳转到子应用的 router-link 的标签，也可以使用 qiankun 跳转方法去跳转页面 2.需要给你的子项目添加挂载的容器， 比如我把 vue 子项目 挂载到 3.给基座（父级项目）安装 qiankun 依赖：yarn add qiankun -S 4.在 main.js 中引入 qiankun： import { registerMicroApps, start } from “qiankun”; 5.定义 子应用 数组 数据
import { registerMicroApps, start } from "qiankun";
const apps = [
{
name: "vueApp", // 应用名称
entry: "//localhost:10000", // 加载这个html文件
container: "#vue", // 子应用挂载到基座的容器
activeRule: "/vue", // 激活路径
props: {
a: 1,
},
},
{
name: "reactApp",
entry: "//localhost:20000",
container: "#react",
activeRule: "/react",
},
];
registerMicroApps(apps);
// 注册应用
start();
// 开启
Vue 项目配置 1.router 文件修改 base: ‘/vue’ 2. 在 main.js 中 必须导出三个方法
let instance = null;
// 用于保存实例， 方便卸载子应用function render(props) {
instance = new Vue({
router,
render: (h) => h(App),
}).$mount("#app");
// 子应用还是挂载到自己的容器上 基座会拿到挂载后的html文件，然后插入进去
}//确保子应用可以正常独立运行
if (!window.__POWERED_BY_QIANKUN__) {
render();
}// 如果子应用和基座项目的访问ip不同，qiankun可以动态的改变子应用的ip
if (window.__POWERED_BY_QIANKUN__) {
__webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__;
}// 子组件协议 （协议其实就是基座和子应用进行沟通的规则，在这里就是子应用必须导出这三个方法）
export async function bootstrap(props) {
console.log(props.a);
// 1
// 启动
}export async function mount(props) {
// 挂载
render(props);
}export async function unmount(props) {
// 卸载
instance.$destroy();
}
3.配置 vue.config.js 使其子项目导出一个 lib 库
module.exports = {
configureWebpack: {
output: {
library: "vueApp", // 库名
libraryTarget: "umd", // js规范
},
devServer: {
port: 10000, // 开发环境启动端口号
headers: {
// 开发环境允许跨域
"Access-Control-Allow-Origin": "*",
},
},
},
};
react 项目配置 1.因为需要写一些 webpack 的配置，所以需要安装一个插件：yarn add react-app-rewired -D 1.1 需要更改一下命令(start\build 都需要改一下)：react-app-rewired start、：react-app-rewired build 2. 和 Vue 项目一样，先导出三个方法，如下： 3. 封装一个 render 函数 4. 需要在 unmount 中卸载应用 5. 让本地环境可以正常运行需要添加开发环境的 render 函数的执行 6. 如果子应用和基座项目的访问 ip 不同，qiankun 可以动态的改变子应用的 ip
//5. 让本地环境可以正常运行需要添加开发环境的render函数的执行
if (!window.__POWERED_BY_QIANKUN__) {
render();
}// 6. 如果子应用和基座项目的访问ip不同，qiankun可以动态的改变子应用的ip
if (window.__POWERED_BY_QIANKUN__) {
__webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__;
}// 3. 封装一个 render 函数
function render() {
ReactDOM.render(
,
document.getElementById("root")
);
}// 2.导出下面这三个方法
export async function bootstrap(props) {
console.log(props.a);
// 1
// 启动
}export async function mount(props) {
// 挂载
render(props);
}export async function unmount(props) {
// 4. 卸载
ReactDOM.unmountComponentAtNode(document.getElementById("root"));
}
