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

微前端qiankun框架的使用

news 来源：原创 2025/5/16 9:28:26

文章描述

随着工作时间的增加，发现公司的项目逐渐多了起来，有一个项目比较庞大，是需要集成多个子系统而形成的大项目。其中便是使用微前端的概念qiankun框架来集成其他多个子项目的。接下来，一起来看一下qiankun框架的具体使用方法吧。

更具体的使用方法请参考qiankun官网

主要内容

主应用

下载依赖

npm i qiankun -S

我们只需要再主应用中下载即可，需要注意的是，下载当前的依赖对node的版本也有限制，我第一次安装就踩坑了

要求的node版本是"^12.22.0 || ^14.17.0 || >=16.0.0"之内，不能高不能低，挺无语的哈...

添加配置

在main.js文件夹同级下创建registerApp.js文件（重要）

import { registerMicroApps, start } from 'qiankun';

// 配置加载中的钩子函数
const onLoad = ()=>{
  console.log("加载中");
}
registerMicroApps([
  {
    name: 'appChild', // 子程序的name名，对应的是子程序中package中的name名字，唯一的
    entry: '//localhost:3002', // 子程序的路径，就是访问子程序的路径
    container: '#container',   // 希望将子应用放在哪个容器内
    activeRule: '/ortherSystem', // 子程序的路由匹配规则，如当主程序中访问路由/ortherSystem时，框架会自动将子应用的内容加载到上面的容器内
    loader:onLoad,   // 当前子应用加载时运行的函数
    props:{          // 希望给子应用传递的值，在子应用暴露出的mount等函数中可拿到
      text:"你好，我是主应用"  
    }
  }
],{
  beforeLoad:()=>{
    console.log("加载前");
  },
  beforeMount:()=>{
    console.log("挂载前");
  },
  afterMount:()=>{
    console.log("挂载后");
  },
  beforeUnmount:()=>{
    console.log("销毁前");
  },
  afterUnmount:()=>{
    console.log("销毁后");
  },
});


start({
  sandbox: {
    strictStyleIsolation: true, // 开启shadow dom样式隔离模式
  },
});

当然如果，如果我们需要手动添加子应用程序时，可以用下面这个函数，这个函数可以让我们在某个js函数中加载子应用。

import { loadMicroApp } from 'qiankun';

loadMicroApp({
  name: 'app',
  entry: '//localhost:7100',
  container: '#yourContainer',
});

对了，当前创建的文件记得要在main.js文件中引入哦

打包配置

在vue.config.js中也需要添加相关的打包配置

const { defineConfig } = require('@vue/cli-service')
const packageName = require('./package.json').name;
module.exports = defineConfig({
  devServer: {
    host:'localhost',
    port:3001,
    headers:{
      'Access-Control-Allow-Origin':'*',
    },
  publicPath:'./',
  configureWebpack:{
    output: {
      library: `${packageName}`,
      libraryTarget: 'umd',
      chunkLoadingGlobal: `webpackJsonp_${packageName}`,
    },
  }
})

请注意'Access-Control-Allow-Origin':'*'配置一定需要，要不会有跨域错误。

子应用

子应用中不需要下载相关的依赖，只需要安装要求进行配置即可

配置main.js

根据官网要求，我们需要在子应用的main.js文件中添加并导出几个函数，分别是bootstrap，mount，unmount等函数。main.js的文件具体写法如下，被我改造了一下

import { createApp } from 'vue'
import App from './App.vue'

// 引入路由
import router from './router/router'

let app = null;
const render = (props)=>{
  app = createApp(App);
  app.use(router);
  app.use(ElementPlus);
  app.mount(props && props.container ? props.container.querySelector("#app") : '#app');
}
/**
 * bootstrap 只会在微应用初始化的时候调用一次，下次微应用重新进入时会直接调用 mount 钩子，不会再重复触发 bootstrap。
 * 通常我们可以在这里做一些全局变量的初始化，比如不会在 unmount 阶段被销毁的应用级别的缓存等。
 */
export async function bootstrap(props) {
  console.log(props,'props app bootstraped');
}

// 这个变量是qiankun框架暴露给全局的，判断当前应用是否使用qiankun框架了
if(!window.__POWERED_BY_QIANKUN__){
  render()
}
/**
 * 应用每次进入都会调用 mount 方法，通常我们在这里触发应用的渲染方法
 */
export async function mount(props) {
  console.log(props,"props");
  render(props)
}
/**
 * 应用每次 切出/卸载 会调用的方法，通常在这里我们会卸载微应用的应用实例
 */
export async function unmount(props) {
  app.unmount()
  app = null;
}

/**
 * 可选生命周期钩子，仅使用 loadMicroApp 方式加载微应用时生效
 */
export async function update(props) {
  console.log('update props', props);
}

添加文件

创建public-path.js、.env.development、.env.production等文件

1、.env.development

VUE_APP_PORT = 3002

2、env.production

VUE_APP_PORT = 3002

3、public-path.js（该文件主要用于动态修改publicPath属性）

(function() {
	if (window.__POWERED_BY_QIANKUN__) {
		if(process.env.NODE_ENV	 === 'development') {
			 __webpack_public_path__ = `//localhost:${process.env.VUE_APP_PORT}${process.env.BASE_URL}`;
			 return;
		}
		__webpack_public_path__ = window.INJECTED_PUBLIC_PATH_BY_QIANKUN__;
	}
})();

该文件记得在main.js中引入哦

打包配置

1、在package.json文件中，将name修改为主应用中注册所使用的name名。

2、在路由配置中，将路由的baseUrl改成主应用中注册的路由规则的值，如：

// 我得主应用的路由规则为 /ortherSystem
const routerHistory = createWebHistory('/ortherSystem')

3、在vue.config.js里面配置

const { defineConfig } = require('@vue/cli-service')
const packageName = require('./package.json').name;

module.exports = defineConfig({
  devServer: {
    host: 'localhost',
    headers:{
      'Access-Control-Allow-Origin':'*',
    },
    port: process.env.VUE_APP_PORT,
  },
  configureWebpack:{
    output: {
      library: `${packageName}`,
      libraryTarget: 'umd',
      chunkLoadingGlobal: `webpackJsonp_${packageName}`,
    },
  }
})

运行结果

好了，进行了上面的几步后我们应该就可以看到基本的效果了，

报错经历

1、node版本不匹配，这是我们需要换适合的node版本了，推荐是"^12.22.0 || ^14.17.0 || >=16.0.0"之间。

2、当我们的主应用和子应用都准备好了，但是效果还是不出来，查看控制台发现是跨域了，这是因为端口后ip不同，我们需要再vue.config.js文件的devServer下添加相关配置

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

3、子应用中路由不匹配，子应用中匹配好的路由，子应用单独启动能正常跳转，但是使用qiankun框架使用就无法正常匹配了，报404未找到页面

这大概率是因为你在主应用中将添加子应用的容器使用router-view这个标签渲染了，我们不要用这个标签，可以的话在组件中直接引入渲染即可

<template>
  <!-- 不要要用这种方法 -->
  <!-- <router-view></router-view> -->
  <!-- 用这种方法渲染homePage组件，子应用的容器就在homePage组件中 -->
  <homePage></homePage>
</template>

<script setup>
import homePage from '@/components/homePage.vue'
</script>

4、样式问题，在子应用中样式是正常的，但是在主应用中，子应用的样式丢失了，而且在我还设置了strictStyleIsolation: true模式，样式还是很神奇的消失了，

网上查询了好多方法，最后用审查元素查看发现子应用也正常被shadow-root包裹起来了，结果发现是子应用中，挂载元素时自己写错了，在子应用中的render函数应该这样写

let app = null;
const render = (props)=>{
  app = createApp(App);
  app.use(router);
  app.use(ElementPlus);
  // 错误
  // app.mount(props && props.container ? props.container : '#app');
  // 正常
  app.mount(props && props.container ? props.container.querySelector("#app") : '#app');
}