vite+vue3主应用，vue-cli+vue3为子应用引入乾坤js（qiankunjs）

最新推荐文章于 2024-08-09 16:29:17 发布

Lmey

最新推荐文章于 2024-08-09 16:29:17 发布

阅读量1k

点赞数 2

文章标签： qiankunjs vue3 vue3+vite

本文链接：https://blog.csdn.net/oyf521/article/details/129978492

版权

该文章详细介绍了如何利用qiankun库构建一个主应用，并注册子应用。主要步骤包括在主应用中配置qiankun，子应用设置乾坤公共路径，以及Vue.js项目的webpack配置，特别是output.library、output.libraryTarget和output.globalObject的设置，还有路由的适配。此外，还涉及到子应用的生命周期管理和渲染方法。

摘要由CSDN通过智能技术生成

主应用

配置：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,
});