qiankun:vue3+webpack 微前端搭建

主应用

1.安装乾坤

js 复制代码

npm install qiankun 或 yarn add qiankun

2.设置微应用容器文件或容器节点

js 复制代码

<div id="micros"></div>

3.设置子应用列表引入registerMicoApps方法注册子应用

js 复制代码

import { registerMicroApps, setDefaultMountApp } from "qiankun";

js 复制代码

 registerMicroApps(
    [
      {
        name: "technicalservice", //子应用名称
        entry: process.env.VUE_APP_MICROS_PATH, //加载子应用路径
        container: "#micros", //容器主节点
        activeRule: "/micros", //加载微应用的路径，（当我们访问的路由路径以配置内容开头时，自动访问微应用）
        props: {},    //向微应用传递数据
      },
    ])

4.在项目入口文件main.js

js 复制代码

import { start } from "qiankun";
start();

注：如果是本地调试记得设置跨域，在vue.config.js中的server中

js 复制代码

      headers: {
      "Access-Control-Allow-Origin": "*",
    },

子应用

1.子应用中无需安装qiankun在入口文件中设置render函数，导出生命周期钩子函数

js 复制代码

export async function bootstrap() {
  console.log("technicalservice bootstrap");
  // 你的启动逻辑（可选）
}

export async function mount(props) {
  console.log("technicalservice mount", props);
  const { container } = props;
  render(container);
  // 你的挂载逻辑（比如将应用渲染到某个DOM元素中）
}

export async function unmount() {
  console.log("technicalservice unmount");
  // 你的卸载逻辑（比如清理或从DOM中移除应用）
}

let app = null;
const render = (container) => {
  app = createApp(App);
  const getIcons = (requireContext) =>
    requireContext.keys().map(requireContext);
  //   如果是在主应用下就挂载主应用的节点，否则挂载在本地
  const appDom = container ? container.querySelector("#ccbn-son") : "#ccbn-son";
  getIcons(require.context("./assets/icon", false, /\.svg$/));
  app.component("Icon", icon);
  const pinia = createPinia();
  app.use(pinia).use(router).use(Antd).use(Print).mount(appDom);
};

// 独立运行
if (!window.__POWERED_BY_QIANKUN__) {
  console.log("独立运行");
  render(null);
}

2.添加pulic-path.js文件，在main.js中引入

js 复制代码

if (window.__POWERED_BY_QIANKUN__) {
  __webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__;
}

如果这段代码报错，在webpack配置中添加

js 复制代码

   "globals": {
      "__webpack_public_path__": true
    }

3.配置微前端打包工具，否则挂载微前端时会报错找不到子应用导出生命周期函数

js 复制代码

  configureWebpack:{
    output:{
      library:`${name}-[name]`,
      libraryTarget:"umd",
    }
  },