qiankun + Vue + React18 搭建微前端

原创 已于 2025-03-03 21:10:13 修改 · 1.5k 阅读 · 14 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue.js #react.js

于 2024-09-26 13:48:23 首次发布

qiankun + Vue + React18 搭建微前端

本章节基于 Vue + qianakun 的方式搭建的微前端，微前端有主应用与微应用构成。

主应用： Vue3 + Vite

微应用：

  1. Vue2 + Webpack
  2. Vue3 + Vite
  3. React18 + webpack
  4. React18 + vite

主应用配置：

  1. 主应用需安装 qiankun 微前端架构 （本章节使用的是最新版本：2.10.16）

    pnpm add qiankun 或者 # yarn add qiankun # 或者 npm i qiankun -S

  2. 注册微应用：在 src 目录新增 qiankun/index.ts

    import {registerMicroApps, start, addGlobalUncaughtErrorHandler} from 'qiankun'
import type {RegistrableApp, FrameworkLifeCycles} from 'qiankun/lib'

// 微应用注册信息
const apps: RegistrableApp<object>[] = [
  {
    name: 'sonVue2', // 微应用名称
    entry: '//localhost:3002/', // 微应用入口
    container: '#container', // 微应用挂载节点
    activeRule: '/son-vue2', // 微应用路由
  },
  {
    name: 'sonVue3',
    entry: '//localhost:3003/',
    container: '#container',
    activeRule: '/son-vue3',
  },
  {
    name: 'sonReact1',
    entry: '//localhost:3004/',
    container: '#container',
    activeRule: '/son-react1',
  },
  {
    name: 'sonReact2',
    entry: '//localhost:3005/',
    container: '#container', 
    activeRule: '/son-react2',
  }
]

// 全局的微应用生命周期钩子
const lifecycle: FrameworkLifeCycles<Object> = {
  beforeLoad: async (app) => {
    console.log(app)
  },
  beforeMount: async (app) => {
    console.log(app)
  },
  afterMount: async (app) => {
    console.log(app)
  },
  beforeUnmount: async (app) => {
    console.log(app)
  },
  afterUnmount: async (app) => {
    console.log(app)
  }
}

registerMicroApps(apps, lifecycle)

// 添加全局的未捕获异常处理器
addGlobalUncaughtErrorHandler((event: any) => {
  const {message: msg} = event
  if (msg && msg.includes('died in status LOADING_SOURCE_CODE')) {
    console.error('微应用加载失败')
  } else {
    console.error(event)
  }
})
export default start

  3. 封装 qiankun 全局通信方法（可选）：在 src 目录新增 qiankun/actions.ts

    import {initGlobalState} from 'qiankun'
import type {MicroAppStateActions, OnGlobalStateChangeCallback} from 'qiankun/lib'

class Actions {
  declare actions: MicroAppStateActions

  setAction(state: Record<string, any>): void {
    this.actions = initGlobalState(state)
  }

  onGlobalStateChange(callback: OnGlobalStateChangeCallback, fireImmediately?: boolean): void {
    return this.actions.onGlobalStateChange(callback, fireImmediately)
  }

  setGlobalState(state: Record<string, any>): boolean {
    return this.actions.setGlobalState(state)
  }

  offGlobalStateChange(): boolean {
    return this.actions.offGlobalStateChange()
  }
}

const actions = new Actions()
export default actions

  4. vue 路由配置

    import {createRouter, createWebHistory} from 'vue-router'

const router = createRouter({
  routes: [...],
  // 路由模式配置为history模式
  history: createWebHistory(import.meta.env.BASE_URL)
})
// 处理微应用内部路由跳转后无法切换到主应用或其他微应用问题
router.afterEach((to) => {
  const current = router.options.history.state.current
  Object.assign(router.options.history.state, {
    current: current === '/' ? '/' : to.fullPath
  })
})

export default router

  5. 在 main.ts 中应用

    import '@/assets/main.scss'
import {createApp} from 'vue'
import App from './App.vue'
import router from './router'
import {createPinia} from "pinia";
import {useMessageStore} from "@/stores/message";
import start from '@/qiankun/index' // 引用注册微应用文件
import actions from '@/qiankun/actions'; // 引用qiankun通信

const app = createApp(App)
app.use(router)
app.use(createPinia())
app.mount('#host-app')

const store = useMessageStore()

// 设置全局状态
actions.setAction({message: store.message})
// 监听全局状态
actions.onGlobalStateChange((state, prev) => {
  store.setMessage(state.message)
})

// 启动qiankun
start({
  prefetch: true, // 开启预加载
  sandbox: true // 开启沙箱
})

  6. 修改 App.vue

    <script setup lang="ts">
    ...
</script>

<template>
	...
	<!-- 微应用挂载节点 -->
    <div id="container"></div>
</template>

<style scoped lang="scss">
    ...
</style>

微应用搭建：

Vue2 + Webpack

微应用无需安装额外的依赖。

  1. 在 src 目录新增 qiankun/public-path.js

    if (window.__POWERED_BY_QIANKUN__) {
    __webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__;
}

  2. 修改 vue.config.js 配置

    const {defineConfig} = require('@vue/cli-service')

module.exports = defineConfig({
    devServer: {
    	port: 3002,
        host: '0.0.0.0',
        // 允许本地跨域请求
        headers: {
            'Access-Control-Allow-Origin': '*',
        },
    },
    // 配置公共访问路径
    publicPath: '/micro-app-vue2/',
    configureWebpack: {
       output: {
            library: `sonVue2`, // 微应用名称
            libraryTarget: 'umd', // 打包成 umd 库格式
            chunkLoadingGlobal: `webpackJsonp_sonVue2`,
       },
    },
})

  3. 封装 qiankun 全局通信方法（可选）：在 src 目录新增 qiankun/actions.js

    class Actions {
    actions = {
        onGlobalStateChange: null,
        setGlobalState: null,
    }

    initAction(actions) {
        this.actions = actions
    }

    onGlobalStateChange() {
        return this.actions.onGlobalStateChange(...arguments)
    }

    setGlobalState() {
        return this.actions.setGlobalState(...arguments)
    }
}

const actions = new Actions()
export default actions

  4. vue 路由配置

    import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const router = new VueRouter({
 	routes:[...],
    base: window.__POWERED_BY_QIANKUN__ ? '/son-vue2' : process.env.BASE_URL', // 配置微应用访问路径
    mode: 'history', // 路由模式配置为history模式
})

export default router

  5. 在 main.js 中应用

    import '@/qiankun/public-path';
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import actions from "@/qiankun/actions"; // 引用qiankun通信

Vue.config.productionTip = false
let app = null;

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

// 独立运行时
if (!window.__POWERED_BY_QIANKUN__) {
    render();
}

// 导出微应用生命周期钩子
// 初始化
export async function bootstrap() {}

// 挂载
export async function mount(props) {
    actions.initAction(props) // 初始化qiankun通信
    render(props);
}

// 更新
export async function update(){}

// 卸载
export async function unmount() {
    app.$destroy();
    app.$el.innerHTML = '';
    app = null;
}

Vue3 + Vite

由于是 Vite 应用需要安装 Vite 版本的 qiankun 依赖

pnpm add vite-plugin-qiankun -D 或者 # yarn add vite-plugin-qiankun -D # 或者 npm i vite-plugin-qiankun -D

  1. 修改 vite.config.js 配置

    import {fileURLToPath, URL} from 'node:url'

import {defineConfig} from 'vite'
import vue from '@vitejs/plugin-vue'
import qiankun from 'vite-plugin-qiankun'

export default defineConfig({
    plugins: [
        vue(),
     	// 配置qiankun    
        qiankun('sonVue3', {
            useDevMode: true
        })
    ],

    base: '/micro-app-vue3/',
    server: {
        port: 3003,
        host: '0.0.0.0',
        cors: true, // 允许本地跨域请求
    },
    
    resolve: {
        alias: {
            '@': fileURLToPath(new URL('./src', import.meta.url))
        }
    }
})

  2. 封装 qiankun 全局通信方法（可选）：在 src 目录新增 qiankun/actions.js

    class Actions {
    actions = {
        onGlobalStateChange: null,
        setGlobalState: null,
    }

    initAction(actions) {
        this.actions = actions
    }

    onGlobalStateChange() {
        return this.actions.onGlobalStateChange(...arguments)
    }

    setGlobalState() {
        return this.actions.setGlobalState(...arguments)
    }
}

const actions = new Actions()
export default actions

  3. vue 路由配置

    import {createRouter, createWebHistory} from 'vue-router'
import {qiankunWindow} from 'vite-plugin-qiankun/dist/helper.js'
const router = createRouter({
    routes: [...],
    // 路由模式配置为history模式，并配置微应用访问路径
    history: createWebHistory(qiankunWindow.__POWERED_BY_QIANKUN__ ? '/son-vue3' : import.meta.env.BASE_URL),
})

export default router

  4. 在 main.js 中应用

    import './assets/main.css'

import {createApp} from 'vue'
import App from './App.vue'
import router from './router'
import {renderWithQiankun, qiankunWindow} from 'vite-plugin-qiankun/dist/helper'
import actions from "@/qiankun/actions.js"; // 引用qiankun通信

let app = null

function render(props = {}) {
    const {container} = props;
    app = createApp(App)
    app.use(router)
    app.mount(container ? container.querySelector('#app') : '#app');
}

// 如果不是在 qiankun 环境中运行，则独立启动
if (!qiankunWindow.__POWERED_BY_QIANKUN__) {
    render()
}

// 导出微应用生命周期钩子
renderWithQiankun({
    // 初始化
    function bootstrap() {}
    // 挂载
    function mount(props) {
        actions.initAction(props) // 初始化qiankun通信
        render(props)
    }
    // 更新
    update: () => {},
    // 卸载
    function unmount(props) {
        app.unmount();
    }
})

React18 + Webpack

微应用无需安装额外的依赖。

  1. 在 src 目录新增 qiankun/public-path.js

    if (window.__POWERED_BY_QIANKUN__) {
    __webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__;
}

  2. 需要修改webpack需要安装@craco/craco 依赖

    pnpm add @craco/craco -D 或者 # yarn add @craco/craco -D # 或者 npm i @craco/craco -D

    修改 craco.config.js 配置

    const path = require('path')
module.exports = {
  devServer: {
    port: 3004,
    hot: true,
    host: '0.0.0.0',
    headers: {
      'Access-Control-Allow-Origin': '*'
    },
  },
  webpack: {
    configure: (webpackConfig, { paths }) => {
      webpackConfig.output = {
        ...webpackConfig.output,
        path: path.resolve(__dirname, 'micro-app-react1'),
        library: 'sonReact1',
        libraryTarget: 'umd',
        chunkLoadingGlobal: 'webpackJsonp_sonReact1',
        globalObject: 'window',
      }
      // 返回修改后的配置
      return webpackConfig
    },
    alias:{
      	"@": path.resolve(__dirname, './src')
    }
  },
}

  3. 封装 qiankun 全局通信方法（可选）：在 src 目录新增 qiankun/actions.js

    class Actions {
  actions = {}
  initAction (actions) {
    this.actions = actions
  }

  onGlobalStateChange () {
    return this.actions.onGlobalStateChange(...arguments)
  }

  setGlobalState () {
    return this.actions.setGlobalState(...arguments)
  }
}

const actions = new Actions()
export default actions

  4. react 路由配置

    import { createBrowserRouter } from 'react-router-dom'
import { lazy, Suspense } from 'react'
import isQiankun from '@/qiankun/isQiankun'

const router = createBrowserRouter(
  [...], 
  {
  	basename: window.__POWERED_BY_QIANKUN__ ? '/son-react1' : '/micro-app-react1'
  }
)
export default router

  5. 在 index.js 中应用

    import { createRoot } from 'react-dom/client'
import './index.scss'
import "@/qiankun/public-path"
import { RouterProvider } from 'react-router-dom'
import router from '@/router'
import actions from '@/qiankun/actions'

let root = null

function render (props = {}) {
  	const { container } = props
  	root = createRoot(container ? container.querySelector('#app') : document.querySelector('#app'))
  	root.render(<RouterProvider router={router}/>)
}

// 独立运行时
if (!window.__POWERED_BY_QIANKUN__) {
  render({})
}

// 导出微应用生命周期钩子
// 初始化
export async function bootstrap () {}
// 挂载
export async function mount (props) {
	actions.initAction(props) // 初始化qiankun通信
  	render(props)
}
// 更新
export async function update () {}
// 卸载
export async function unmount () {
  	root.unmount()
  	root = null
}

React18 + Vite

由于是 Vite 应用需要安装 Vite 版本的 qiankun 依赖

pnpm add vite-plugin-qiankun -D 或者 # yarn add vite-plugin-qiankun -D # 或者 npm i vite-plugin-qiankun -D

  1. 修改 vite.config.ts 配置

    import {fileURLToPath, URL} from 'node:url'
import {defineConfig} from 'vite'
import react from '@vitejs/plugin-react'
import qiankun from 'vite-plugin-qiankun'

export default defineConfig({
  plugins: [
    react(),
    qiankun('sonReact2', {
      useDevMode: true
    })
  ],
  base: '/micro-app-react2/',
  server: {
    port: 3005,
    host: '0.0.0.0',
    cors: true,
    hmr: false, // 在本地开发测试时，需要关闭热更新
  },
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
})

  2. 封装 qiankun 全局通信方法（可选）：在 src 目录新增 qiankun/actions.ts

    import {QiankunProps} from "vite-plugin-qiankun/es/helper";

type OnGlobalStateChangeCallback = (state: Record<string, any>, prevState: Record<string, any>) => void

class Actions {
  actions: QiankunProps | null = null

  initAction(actions: QiankunProps) {
    this.actions = actions
  }

  onGlobalStateChange(callback: OnGlobalStateChangeCallback, fireImmediately?: boolean) {
    return this.actions?.onGlobalStateChange(callback, fireImmediately)
  }

  setGlobalState(state: Record<string, any>): boolean {
    return this.actions?.setGlobalState(state)
  }
}

const actions = new Actions()
export default actions

  3. react 路由配置

    import {createBrowserRouter} from "react-router-dom";
import {qiankunWindow} from 'vite-plugin-qiankun/dist/helper'

const router = createBrowserRouter(
  [...],
  {
    basename: qiankunWindow.__POWERED_BY_QIANKUN__ ? "/son-react2" : import.meta.env.BASE_URL
  }
)

export default router

  4. 在 main.ts 中应用

    import {createRoot} from 'react-dom/client'
import './index.scss'
import {RouterProvider} from "react-router-dom";
import router from "@/router";
import {qiankunWindow} from 'vite-plugin-qiankun/dist/helper'
import {renderWithQiankun} from "vite-plugin-qiankun/dist/helper";
import actions from "@/qiankun/actions.ts"; // 引用qiankun通信

type propsType = {
  container?: ReactDOM.Container,
}
let root: ReturnType<typeof createRoot> | null = null

function render(props: propsType = {}) {
  const {container} = props;
  root = createRoot(container ? container.querySelector("#app")! : document.querySelector("#app")!)
  root.render(
    <RouterProvider router={router}/>
  )
}

// 如果不是在 qiankun 环境中运行，则独立启动
if (!qiankunWindow.__POWERED_BY_QIANKUN__) {
  render({})
}

// 导出微应用生命周期钩子
renderWithQiankun({
  // 初始化
  bootstrap: () => {},
  // 挂载
  mount: (props) => {
    // 初始化qiankun通信
    actions.initAction(props)
    render(props)
  },
  // 更新
  update: () => {},
  // 卸载
  unmount: () => {
    root && root.unmount()
    root = null
  },
})
vue微前端qiankun框架学习到项目实战,基座登录动态菜单及权限控制
前端开发工程师
09-22 9160
技术无关，独立开发，独立部署，增量升级，独立运行，微前端的核心目标是将巨石应用拆解成若干可以自治的松耦合微应用。
qiankun微前端部署（主/子应用部署在同一个服务）(2024.05.20更新~)
Alice_hhu的博客
01-26 2799
qiankun微前端部署（主/子应用部署在同一个服务）
微前端完整vue实例-乾坤【qiankun】
01-16
功能说明： 1.此实例包含有一个`qiankun-main`主应用和`qiankun-vue-child`子应用。【可以包含若干个子应用，这里只建立一个vue子应用进行演示】 2.主应用跨域访问子应用系统。 3.无node_modules，执行npm install即可。 更新时间：2021-03-26
微前端（qiankun）使用教程
最新发布
m0_74079648的博客
10-21 1051
微前端架构与qiankun实现指南 本文介绍了微前端架构的概念及其实现方案。微前端是一种将大型前端应用拆分为独立开发部署的小型应用的架构模式，具有技术栈无关、独立开发部署、增量升级等优势。文章详细对比了微前端与iframe的差异，包括上下文隔离、通信方式、性能开销等9个维度，并分析了各自的优缺点。 重点讲解了如何使用qiankun框架实现微前端，包含主应用和微应用的配置步骤。主应用负责注册微应用、路由管理和容器挂载，微应用需要适配qiankun的生命周期。通过这种方式，可以实现多技术栈应用的统一集成，提高大
【微前端】手把手带你从零开始搭建一个qiankun+vue微前端应用
lixiaosenlin的专栏
11-04 4773
前言 小伙伴们大家好。上一篇文章中我们分享了qiankun的一些概念和特性，以及基于qiankun实现有一个微前端应用的大概步骤，最后以qiankun加vue2.0为例给出了快速搭建qiankun微前端的一些核心代码。那么接下来将基于前面文章的操作步骤及核心代码，从零开始实现一个简单而又完整的qiankun微前端项目。此项目中仍以vue2.0为主进行项目构建。话不多说，我们马上开始。 主应用 利用vue脚手架创建一个vue2.0项目：qiankun-main（vue create qiankun-m
vue2使用qiankun微前端（跟着步骤走可实现）
请叫我欧皇！的博客
01-16 8217
比如现在的vue项目，是一个整体之后包含了多个模块（路由），之后多人开发的时候合并代码可能会造成代码冲突，打包也是全部代码一起打包。微前端解决了这个问题，由一个主应用程序（也就是基座）之后连接多个单独的子应用程序，每个子应用程序都是单独的，你用vue写商品管理，他用react写物流管理等都可以，不同的模块可以由不同的技术栈写。打包也是单独打包。比较方便。
qiankun+vue3的源码案例
03-10
4. 多版本兼容：qiankun兼容Vue、React等多种前端框架，使其在不同技术栈的项目中都能发挥其作用。 Vue3框架介绍： Vue3作为Vue.js的最新版本，引入了Composition API，大幅增强了代码的复用性和逻辑组织能力。Vue3...
qiankun+vite+vue3从零搭建一个微前端架构系统
weixin_43162494的博客
11-28 1307
微前端是一种多个团队通过独立发布功能的方式来共同构建现代化 web 应用的技术手段及方法策略。技术栈无关。微应用可以是你喜欢的任意技术栈，Vue、React or Angular…独立部署独立运行。微应用之间状态隔离。
基于qiankun搭建vue3 webpack ts微前端项目入门实践
mjnmjn000的博客
03-21 580
基于qiankun搭建vue3 webpack ts微前端项目入门实践
Vue微前端架构与Qiankun实践理论指南
https://blog.cmdragon.cn/
06-15 1602
这篇文章介绍了微前端架构概念，聚焦于如何在Vue.js项目中应用Qiankun框架实现模块化和组件化，以达到高效开发和维护的目的。讨论了Qiankun的原理、如何设置主应用与子应用的通信，以及如何解决跨域问题和优化集成过程，从而实现前端应用的灵活扩展与组织。
qiankun - 微前端应用搭建
ZionHH的博客
07-20 825
qiankun - 微前端应用搭建
vue-qiankun微前端
qq_41169990的博客
12-14 1043
vue-qiankun微前端
React 18 配置 QianKun：主应用【React 18】+ 微应用【React 18】
qq_37070696的博客
10-13 1372
前端技能提升 react 18 QianKun微前端 react 18 主应用 + react 18微应用
为什么舍弃Iframe探究新的微前端技术？
hyupeng1006的博客
07-02 2807
为什么不用 iframe，这几乎是所有微前端方案第一个会被 challenge 的问题。但是大部分微前端方案又不约而同放弃了 iframe 方案，自然是有原因的，并不是为了 "炫技" 或者刻意追求 "特立独行"。 如果不考虑体验问题，iframe 几乎是最完美的微前端解决方案了。 iframe 最大的特性就是提供了浏览器原生的硬隔离方案，不论是样式隔离、js 隔离这类问题统统都能被完美解决。但他的最大问题也在于他的隔离性无法被突破，导致应用间上下文无法被共享，随之带来的开发体验、产品体验的问题。 其实
vue + qiankun全局变量配置（组件，指令，函数）
Todo_MrWu的博客
07-16 487
/ 注册全局指令})// 注册全局组件})// 注册全局函数})}, true)
qiankun微前端
D_insist_on的博客
04-07 600
微前端：简单说就是前端版本的微服务，将一个大型前端应用拆分成了多个模块，每个模块可以由不同团队进行管理和开发，框架自由、仓库自由，且能够独立部署。中文官网：https://zh-hans.single-spa.js.org/docs/getting-started-overview/实现方式：每个子应用通过iframe标签嵌入父应用，利用iframe标签的隔离属性，可做到子与子、子与父互不影响。官网：https://qiankun.umijs.org/zh。。
微前端（qiankun）
qq_24832277的博客
03-29 5903
什么是微前端 微前端是一种多个团队通过独立发布功能的方式来共同构建现代化 web 应用的技术手段及方法策略。、 微前端架构旨在解决单体应用在一个相对长的时间跨度下，由于参与的人员、团队的增多、变迁，从一个普通应用演变成一个巨石应用(Frontend Monolith)后，随之而来的应用不可维护的问题。这类问题在企业级 Web 应用中尤其常见。 微前端架构具备以下几个核心价值： 技术栈无关 主框架不限制接入应用的技术栈，微应用具备完全自主权 独立开发、独立部署 微应用仓库独立，前后端可独立开发，部署完成
前端微服务实践：qiankun项目及Vue/React子项目源码解析
“qiankun”是一个由阿里巴巴开源的微前端框架，它支持使用Vue.js, React等前端技术栈的微前端架构。微前端是一种架构理念，旨在使单体应用更加模块化，可以将大型应用程序拆分成多个独立的、可独立部署的小型应用。...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值