基于qiankun实现微前端React18接入子应用Vue3

最新推荐文章于 2024-07-05 11:47:21 发布

csdn-Allen

最新推荐文章于 2024-07-05 11:47:21 发布

阅读量575

点赞数

文章标签：前端 javascript

本文链接：https://blog.csdn.net/baidu_41601299/article/details/130157701

版权

该文详细介绍了如何使用qiankun框架在React18主应用中注册和管理Vue3子应用，包括安装qiankun库、配置主应用与子应用的入口、挂载节点、路由规则以及处理公共路径和生命周期钩子。同时，文章提到了样式隔离和预加载的设置。

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

参考文档

qiankun官方文档
 github地址
 csdn1
csdn2
csdn3
csdn4

流程

以React18为主应用，vue3为子应用

主应用配置

安装qiandkun：npm i qiankun -S
在html中增加子应用挂在的节点

  <!-- qiankun子应用 -->
  <div id="webpack-vue3-container"></div>

增加一个页面，点击到这个页面去注册子应用
qiankun.tsx文件代码：

import React, { useEffect } from 'react';
import { registerMicroApps, start } from 'qiankun';

export default function Container (){
  useEffect( () => {
    registerMicroApps([
      {
        name: 'vue_test', // 必须与微应用注册名字相同
        entry: 'http://子应用ip地址:8080', // 入口路径，开发时为微应用所启本地服务，上线时为微应用线上路径
        container: '#webpack-vue3-container', // 本项目内微应用挂载的节点（index.html中配置）
        activeRule: '/webpack-vue3', // 当访问路由为 /webpack-vue3 时加载微应用
        props: {
          msg: "我是来自主应用的值-vue"  // 主应用向微应用传递参数
        }
      },
    ])
    // 启动qiankun，并开启预加载
    start({
      prefetch: true,
      sandbox: {
          strictStyleIsolation: true, // 开启样式隔离
      },
    })
  }, [])
  return (
    <div />
  )
}

配置子应用
在src下增加public-path.js

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

在main.js中配置

import './public-path'; // 引入qiankun配置文件
import App from './App.vue';
import routes from './router';
import { createApp } from 'vue';
import { createWebHistory, createRouter } from "vue-router";

let router = null
let instance = null

function render({ container } = {}){
  console.log('window.__POWERED_BY_QIANKUN__', window.__POWERED_BY_QIANKUN__)
  router = createRouter({
    routes,
    history: createWebHistory(window.__POWERED_BY_QIANKUN__ ? '/webpack-vue3' : ''),
    base: window.__POWERED_BY_QIANKUN__ ? '/webpack-vue3' : ''
  })
    
  instance = createApp(App)
  instance.use(router).mount(container ? container.querySelector('#app') : '#app')
}
// createApp(App).use(router).mount('#app')
// 如果是单独启动的子文件，保证仍能正常运行
if (!window.__POWERED_BY_QIANKUN__) {
  render()
}

// 生命周期的钩子函数
// 导出第一次进入当前子应用的钩子函数
export async function bootstrap() {
  console.log('第一次进入admin')
}

// 导出每次创建挂载时的钩子函数
export async function mount(props) {
  console.log("创建挂载组件", props)
  render(props)
}

// 导出每次销毁时的钩子函数
export async function unmount(props) {
  console.log("销毁组件")
  instance.unmount()
  instance._container.innerHTML = ''
  instance = null
  router = null
}

在vue.config.js中增加打包配置：

const { defineConfig } = require('@vue/cli-service')
// 获取 package.json 的 name，可以直接写死，但是需要保持一致
const { name } = require('./package.json')

module.exports = defineConfig({
  devServer: {
    headers: {
      'Access-Control-Allow-Origin': '*',
    },
    port: 8080,
  },
  lintOnSave:false,
  transpileDependencies: true,
  configureWebpack: {
    output: {
      library: `${name}-[name]`,
      libraryTarget: 'umd',	// 把微应用打包成 umd 库格式
      chunkLoadingGlobal: `webpackJsonp_${name}`,
    },
  },
})