微前端 qiankun

程序媛兮兮

已于 2024-01-04 16:23:20 修改

阅读量535

点赞数 7

文章标签：前端 javascript vue.js

于 2024-01-04 16:22:48 首次发布

本文链接：https://blog.csdn.net/di970411/article/details/135389845

版权

本文详细介绍了如何在项目中使用Qiankun实现微前端，包括Qiankun的安装、设置默认子应用、注册子应用、子应用的钩子函数、路由配置以及webpack的跨域和UMD打包配置。

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

微前端 qiankun使用梳理：

1、基座：

①安装qiankun

$ npm install qiankun

②在入口文件main.js 引入qiankun相关方法（ start 、 setDefaultMountApp ）
③setDefaultMountApp 注册子应用（类似vue路由注册）

import {  start, setDefaultMountApp } from 'qiankun'
//注册子应用（类似vue路由注册）
// 当匹配到activeRule的时候，请求获取entry资源，渲染到container中
registerMicroApps([
  {
    name: "vue2App",         //自定义子应用名称
    entry: "//localhost:3001", //默认会加载这个html,解析里面的js,动态执行（子应用必须支持跨域）
    container: "#out-main",  //挂载到主应用的哪个元素下
    activeRule: "/vue2", //当我劫持到路由地址为/vue2时，我就把http://localhost:3001这个应用挂载到#app-main的元素下
  }
]);

④ 开启 start();

2.子应用：

子应用不需要额外安装qiankun，即可接入主应用

①修改入口文件main.js, 修改并导出qiankun定义的三个钩子函数（ bootstrap、mount、unmount ）

let instance = null;
function render(props = {}) {
  const { container } = props;
  window.props = props;
  //会把这个应用（也就是这个界面），插入到主应用的container的元素中去
  instance = new Vue({
    router,
    render: (h) => h(App),
  }).$mount(container ? container.querySelector("#app") : "#app"); //这里是挂载到自己的html中，主应用会拿到这个挂载的html,将其插入到主应用中
}

// 独立运行时
if (!window.__POWERED_BY_QIANKUN__) {
  render();
}
export async function bootstrap() {
  console.log("[vue] vue app bootstraped");
}
export async function mount(props) {
  console.log("[vue] props from main framework", props);
  render(props);
}
export async function unmount() {
  instance.$destroy();
  instance.$el.innerHTML = "";
  instance = null;
}

②修改路由文件，将路由base值要和activeRule匹配规则保持一致

export const routes = [
  {
    path: "/",
    redirect: "/list",
  },
  {
    path: "/list",
    component: () => import("@/views/protocol/index"),
  },
];

const router = new VueRouter({
  base: "vue2",
  mode: "history",
  routes,
});
export default router;

③ 修改webpack配置，允许开发环境跨域及umd打包

module.exports = {
  lintOnSave: false,
  devServer: {
    port: "3001",
    headers: {
      "Access-Control-Allow-Origin": "*", //所有人都可以访问我的服务器
    },
  },
  configureWebpack: {
    output: {
      // library: `${name}-[name]`,
      library: `vue2App`,
      libraryTarget: "umd", // 把微应用打包成 umd 库格式
      // jsonpFunction: `webpackJsonp_${name}`,
    },
  },
};