Vue + qiankun 搭建微前端

最新推荐文章于 2024-09-26 15:33:22 发布
最新推荐文章于 2024-09-26 15:33:22 发布
阅读量701 收藏 8
点赞数 12
分类专栏： qiankun 文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ExtremeExplorer/article/details/142553861
版权

Vue + qiankun 搭建微前端

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

**主应用：**Vue3 + Vite

微应用：

  1. Vue2 + Webpack5
  2. Vue3 + 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/child/son-vue2', // 微应用入口
    container: '#container', // 微应用挂载节点
    activeRule: '/son-vue2', // 微应用路由
  },
  {
    name: 'sonVue3', // 微应用名称
    entry: '//localhost:3003/', // 微应用入口
    container: '#container', // 微应用挂载节点
    activeRule: '/son-vue3', // 微应用路由
  }

]

// 全局的微应用生命周期钩子
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

```

  1. 封装 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()
  }
}

export default new Actions()

  2. vue 路由配置

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

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

export default router

  3. 在 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 // 开启沙箱
})

  4. 修改 App.vue

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

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

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

微应用搭建：

Vue2 + Webpack5

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

  1. 在 src 目录新增 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: '/child/son-vue2/',
       configureWebpack: {
           output: {
               library: `sonVue2`, // 微应用名称
               libraryTarget: 'umd', // 打包成 umd 库格式
               chunkLoadingGlobal: `webpackJsonp_sonVue2`,
           },
       },
       transpileDependencies: true,
   })

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

    class Actions {
    actions = {
        onGlobalStateChange: null,
        setGlobalState: null,
        offGlobalStateChangeL: null
    }
    
	// 初始化 qiankun 全局通信
    initAction(actions) {
        this.actions = actions
    }
    
	// 监听全局状态
    onGlobalStateChange() {
        return this.actions.onGlobalStateChange(...arguments)
    }

	// 修改全局状态
    setGlobalState() {
        return this.actions.setGlobalState(...arguments)
    }
}

export default new 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__ ? '/' : '/child/son-vue2', // 配置微应用访问路径
    mode: 'history', // 路由模式配置为history模式
})

export default router

  5. 在 main.js 中应用

    import './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() {
	console.log('bootstrap')
}

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

// 卸载
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: '/child/son-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,
        offGlobalStateChangeL: null
    }

	// 初始化 qiankun 全局通信
    initAction(actions) {
        this.actions = actions
    }

	// 监听全局状态
    onGlobalStateChange() {
        return this.actions.onGlobalStateChange(...arguments)
    }

	// 修改全局状态
    setGlobalState() {
        return this.actions.setGlobalState(...arguments)
    }
}

export default new 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__ ? '/' : '/child/son-vue3/'),
})

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('#son-vue3') : '#son-vue3');
}

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

// 初始化
function bootstrap() {
    console.log('bootstrap')
}

// 挂载
function mount(props) {
    actions.initAction(props) // 导出微应用生命周期钩子
    render(props)
}

// 卸载
function unmount(props) {
    app.unmount();
}

// 导出微应用生命周期钩子
renderWithQiankun({
    bootstrap,
    mount,
    unmount,
})
ExtremeExplorer
关注
专栏目录
使用Vite+Vue 3+Qiankun构建微前端应用
偏执的小男孩儿
04-28 702
构建微前端应用可以使用Vite作为主应用的构建工具，Vue 3作为主应用和子应用的框架，Qiankun作为微前端框架。以上是使用Vite+Vue 3+Qiankun构建微前端应用的基本步骤，具体的配置和使用方式可以根据实际需求进行调整。
vue3+vite+qiankun搭建微应用前端框架
qq_37759901的博客
05-10 1748
到此主应用配置完成，若还出现其他问题，打开qiankun应用官网常见问题查看https://qiankun.umijs.org/zh/faq#application-died-in-status-not_mounted-target-container-with-container-not-existed-while-xxx-loading。所有微应用路由都在主应用中注册，注册Portal.vue组件，所有微应用路由使用同一个vue组件。在子路由下添加微应用加载时容器。3．在主应用中注册微应用路由。
vue3+qiankun+vite搭建微前端服务
LD喂！的博客
03-16 4310
因业务需要搭建一套微前端服务, 阅读文档时发现qiankun与vite无法一起使用,需要引入额外插件才可以一起使用,在这里记录下 qiankun基座配置 1.修改index.html中div的id,并在main.js中修改挂在函数 //index.html <div id="qiankunBaseApp"></div> //main.js createApp(App) .mount('#qiankunBaseApp') 2.main.js启动qiankun import { r
07. vue3+vite+qiankun搭建微应用前端框架，并接入vue3微应用
热门推荐
qq_29517595的博客
02-08 1万+
vue3+vite的主应用，改造成基于qiankun的微应用框架。并实现接入vue3+vite微应用、vue2+webpack微应用。微应用的接入，是在主应用的路由菜单中进行激活，也就是说，主应用的一个菜单可以对应一个微应用系统，主应用中展示哪些微应用的路由，可以在主应用在自定义。并且完成了部署，解决了主应用部署在二级目录、三级目录的难题
基于vue2+qiankun的微前端实现
xiaofeiaahehe的博客
03-14 594
由于主应用微应用都能做到技术栈无关，不论是还是其他等框架，这里使用的主应用微应用均使用vue2，前端路由模式为hash模式。
vue+qiankun微前端实践
单眼皮的小熊
07-05 1968
qiankun基座也可以用多种脚手架搭建（此处以vue2.x 为例）： vue-cli搭建vue2.x 项目，然后安装qiankun： $ yarn add qiankun # or npm i qiankun -S 基座配置： 我们将子应用的配置都放在：main/src/micro-app.js下： const microApps = [ { name: 'sub-vue1', entry: '//localhost:7777/', active
vue + qiankun
weixin_45881304的博客
07-01 3028
vue + qiankun
vue3+qiankun项目搭建
前端啤酒屋
11-22 713
vue3+qiankun项目搭建
vue + qiankun 项目搭建
技术改变生活
02-27 1789
vue+qiankun 项目搭建
vue3+vite+qiankun+monorepo框架
08-03
vue3+vite+qiankun+monorepo框架vue3+vite+qiankun+monorepo框架vue3+vite+qiankun+monorepo框架vue3+vite+qiankun+monorepo框架vue3+vite+qiankun+monorepo框架vue3+vite+qiankun+monorepo框架vue3+vite+qiankun+...
基于vue3+koa2+qiankun2的微前端后台管理系统项目实战.zip
03-03
基于vue3+koa2+qiankun2的微前端后台管理系统项目实战.zip 主应用基座构建 主应用需要用到elementui，暂时使用vue2.0+qiankun2.0版本。vue3.0beta体验在下面【子应用构建】章节 主应用项目主要在5个文件：utils...
管理系统系列--基于vue3+koa2+qiankun2的微前端后台管理系统项目实战.zip
02-26
在本项目实战中，我们将深入探讨如何构建一个基于Vue3、Koa2和Qiankun2的微前端后台管理系统。这个系统旨在提供一个高效、可扩展且易于维护的平台，利用现代Web技术来实现复杂的企业级应用。下面将详细阐述每个关键...
文件系统设计 - 开发文件系统 Store (上篇)
qq_44746132的博客
09-21 569
本章以一个基础的响应式Store类开始，对编辑器最核心的基础模块-文件系统管理进行开发设计，遵循面向接口编程的理念，设计文件系统的相关接口类型定义。
Vue3通过$emit实现子向父传递数据
weixin_74261199的博客
09-23 392
子组件通过触发事件，并传递数据，父组件在使用子组件时就可以绑定子组件事件，在事件处理函数中拿到子组件传来的数据。
vue上传预览CAD文件
只会写bug
09-24 519
如果选择的是 Three.js，那么可以创建一个场景来加载和显示模型。如果是用特定的 CAD 查看器库，则按照其文档进行集成即可。根据具体需求和技术能力，可以选择最适合的解决方案来实现 CAD 文件的上传和预览功能。
基于Node.js+Express+MySQL+VUE实现的计算机毕业设计旅游推荐网站
最新发布
计算机程序开发设计
09-26 590
越来越多的人开始注重旅游的品质和体验，追求个性化、多样化的旅游方式。总之，本次计算机毕业设计项目旨在开发一款功能完善、用户友好的旅游推荐网站，通过先进的技术手段和创新的设计理念来满足广大旅游爱好者的个性化、高质量旅游需求。因此，本次计算机毕业设计项目选择开发一款旅游推荐网站，旨在通过先进的技术手段和创新的设计理念，打造一个更加符合用户需求、更加智能化的旅游信息平台。实现个性化的旅游推荐：通过分析用户的浏览历史、搜索记录和行为习惯，网站将能够为用户推荐符合其兴趣和需求的旅游产品和目的地。
vue复制信息到粘贴框
程序员一枚，仅记录工作中的难点
09-21 363
main.js文件引入。
【开源免费】基于SpringBoot+Vue.JS体育馆管理系统（JAVA毕业设计）
customer08的博客
09-23 1294
基于Vue.js和SpringBoot的体育馆管理系统是一个功能全面、易于使用的系统，它分为管理后台和用户网页端，旨在为管理员和学生提供便捷的体育馆管理服务。系统的主要功能包括器材管理，允许管理员对体育馆内的器材进行分类、添加、删除和修改；器材借出归还，学生可以在线借出和归还器材，系统会自动记录借出和归还的时间
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值