主应用
配置:qiankun.ts
import { registerMicroApps, start } from "qiankun";
registerMicroApps([
{
name: "manifest_1_0_app", // app name registered
entry: "http://172.16.10.94:8080/",
container: "#yourContainer",
activeRule: "/yourContainer"
}
]);
start();
main.ts
引入qiankun.ts文件
import "./qiankun"
子应用
路径文件
qiankun-public.ts
if ((window as any).__POWERED_BY_QIANKUN__) {
__webpack_public_path__ = (window as any).__INJECTED_PUBLIC_PATH_BY_QIANKUN__;
}
main.ts
必须在头部导入
import {createApp} from "vue";
import "qiankun-public";
import App from "./App.vue";
const app = createApp(App);
导出乾坤js相关声明周期
// 判断是否是通过qiankunjs加载应用
if (!(window as any).__POWERED_BY_QIANKUN__) {
// 如果不是,则参数传入{}对象
render({});
}
function render(props = {}) {
const { container } = props as any;
app.use(store, key);
app.use(router);
app.mount(container ? container.querySelector("#app") : "#app");
}
export async function bootstrap() {
}
export async function mount(props: any) {
render(props);
}
export async function unmount() {
}
vue.config.js 配置
const packageName = require("./package.json").name;
module.exports = defineConfig({
chainWebpack: (config) => {
// webpack5的qiankunjs配置
// 重点
config.output.library(`${packageName}-[name]`);
// 重点
config.output.libraryTarget("umd");
// 重点
config.output.globalObject(`webpackJsonp_${packageName}`);
}
})
路由
// base 地址通过判断是否是乾坤子应用来添加 yourContainer 对应到主应用中注册的匹配规则
const router = createRouter({
history: createWebHistory(
(window as any).__POWERED_BY_QIANKUN__ ? "/yourContainer" : "/"
),
routes,
});