【qiankun】简易前端微应用搭建

最新推荐文章于 2025-11-25 15:02:17 发布

原创

最新推荐文章于 2025-11-25 15:02:17 发布 · 599 阅读

10 ·

CC 4.0 BY-SA版权

文章标签：

#前端

一般场景是对已有应用进行改造，比如接入两个新的工程，但是工程不适合整体嵌入现有应用，那就以当前应用为基座，增加微应用路由，通过router-view，将子应用接入，
且这种方式可以共用登录信息。

主应用准备和改造如下几个文件：

src/config.js
src/utils/qiankun
src/router/routes
src/components/sub.vue

// src/config.js
export default {
   
   
  subApps: [
    {
   
   
      name: 'sub-vue2', // 子应用名称，跟package.json一致
      entry: '//localhost:8003', // 子应用入口，本地环境下指定端口
      container: '#sub-region', // 挂载子应用的dom
      activeRule: '/app/sub-vue2', // 路由匹配规则
      props: {
   
   } // 主应用与子应用通信传值
    },
  ],
  /* qiankun全局声明周期钩子 */
  microConfig = {
   
   
	  beforeLoad: [
	    (app) => {
   
   
	      console.log("%c before load", "background:#3a5ab0 ; padding: 1px; border-radius: 3px;  color: #fff", app);
	    },
	  ], // 预加载
	  beforeMount: [
	    (app) => {
   
   
	      console.log("%c before mount", "background:#7d9553 ; padding: 1px; border-radius: 3px;  color: #fff", app);
	    },
	  ], // 挂载前回调
	  afterMount: [
	    (app) => {
   
   
	      console.log("%c after mount", "background:#7d7453 ; padding: 1px; border-radius: 3px;  color: #fff", app);
	    },
	  ], // 挂载后回调
	  beforeUnmount: [
	    (app) => {
   
   
	      console.log("%c before unmount", "background:#7dd253 ; padding: 1px; border-radius: 3px;  color: #fff", app);
	    }