当前位置：首页 > news >正文

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

news 来源：原创 2025/6/9 8:44:33

一般场景是对已有应用进行改造，比如接入两个新的工程，但是工程不适合整体嵌入现有应用，那就以当前应用为基座，增加微应用路由，通过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);
	    },
	  ], // 卸载前回调
	  afterUnmount: [
	    (app) => {
	      console.log("%c after unmount", "background:#d2525c ; padding: 1px; border-radius: 3px;  color: #fff", app);
	    },
	  ], // 卸载后回调
	};
}

// src/utils/qiankun
import { registerMicroApps } from 'qiankun'
import config from '@/config'

const { subApps, microConfig } = config

export function registerApps() {
  try {
    registerMicroApps(subApps, microConfig)
  } catch (err) {
    console.log(err)
  }
}

// src/router/routes
import Vue from 'vue'
import VueRouter from 'vue-router'
import Login from '@/views/Login'
import Home from '@/views/Home'
import Layout from '@/views/Layout'
Vue.use(VueRouter)
const routes = [
  {
    path: '/',
    redirect: { name: 'home' },
    meta: { title: '首页' },
    children: [
	  {
	    path: '/login',
	    name: 'login',
	    component: Login,
	    meta: { isTabs: false, isSide: false, moduleName: 'main', title: '登录' }
	  },
	  {
	    path: '/',
	    name: 'Layout',
	    component: Layout,
	    redirect: process.env.VUE_APP_DEFAULT_APP, // 默认加载的路由
	    children: [
	      {
	        path: '/home',
	        name: 'Home',
	        component: Home,
	        meta: { isTabs: false, isSide: false, moduleName: 'main', title: '首页' }
	      }
	    ]
	  },
      {
        path: '/app/sub-vue2/',
        name: 'sub-vue2',
        meta: {},
        component: () => import('@/components/sub.vue')
      }
    ]
  }
]

export default routes

// src/components/sub.vue
<template>
  <div id="sub-region"></div>
</template>

<script>
import { start } from 'qiankun'
import { registerApps } from '@/utils/qiankun'
export default {
  mounted() {
    if (!window.qiankunStarted) {
      	window.qiankunStarted = true
      	registerApps()
		start({
		    prefetch: "all", // 可选，是否开启预加载，默认为 true。
		    sandbox: { strictStyleIsolation: true }, // 可选，是否开启沙箱，默认为 true。// 从而确保微应用的样式不会对全局造成影响。
		    singular: true, // 可选，是否为单实例场景，单实例指的是同一时间只会渲染一个微应用。默认为 true。
		});
    }
  }
}
</script>

1、主应用主要提供 Login、Layout、Home、404等基础页面。

2、通过提供qiankun的initGlobalState、registerMicroApps、start等完成主应用的qiankun注册、子应用的注册和数据初始化，监听。

子应用

src/public-path
vue.config.js
main.js

// src/public-path
if (window.__POWERED_BY_QIANKUN__) {
  // eslint-disable-next-line no-undef
  __webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__;
}

// main.js
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import './public-path'

Vue.config.productionTip = false

let instance = null

function render(props = {}) {
  const { container } = props
  instance = new Vue({
    router,
    store,
    render: h => h(App)
  }).$mount(container ? container.querySelector('#app') : '#app')
}

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
}

// vue.config.js
const { name } = require('./package')

module.exports = {
  devServer: {
    port: 8003,
    headers: {
      'Access-Control-Allow-Origin': '*',
    },
  },
  configureWebpack: {
    output: {
      library: `${name}-[name]`,
      libraryTarget: 'umd', // 把微应用打包成 umd 库格式
      jsonpFunction: `webpackJsonp_${name}`,
    },
  },
}

微应用，主要适配qiankun的逻辑在main.js和vue.config.js中，main里需要将子应用声明周期给export出去，且对webpack的路径进行转换，防止资源找不到；vue.config.js中对资源的output进行设置，libraryTarget为umd，防止资源404。

总结：

主应用

设置config文件，两个变量，一个subApps包含name、entry、container、activeRule，一个microConfig生命周期钩子数组。
一个微应用注册方法registerMicroApps(subApps, microConfig)
一个sub.vue, id设置为微应用的container，挂载dom节点
路由匹配规则，要将activeRule匹配进来。

微应用

vue.config.js中output设置umd，library和jsonpFunction也要对应特异处理
设置public-path
main.js,引入public-path，且改造render，既要支持自己启动，也要支持微应用启动（在mount中，使用主应用的props启动 render(props)）。