欢迎来到158源码网!

网页制作

当前位置: 主页 > 网页制作

07. vue3+vite+qiankun搭建微应用前端框架,并接入vue3微应用

时间:2024-02-12 01:04:36|栏目:网页制作|点击:

目录

前言

因为业务系统接入的需要,决定将一个vue3+vite+ts的主应用系统,改造成基于qiankun的微应用架构。此文记录了改造的过程及vue3微应用接入的种种问题。

网上有很多关于微应用改造的案例,但很多都没写部署之后什么情况。写了部署的,没有实操部署在二级目录、三级目录是什么情况,甚至没有对部署之后的情况做测试、没有说明。这是在整个改造过程中最难的一点,也是最困扰我的一个问题。我们所改造的应用说明:

  • 主应用:vue3+vite+ts
  • 微应用1:vue2,qiankun官网API是基于vue2+webpack,我们对vue2也进行了接入,但是在本篇文章中不做说明。
  • 微应用2:vue3+vite,由于主应用已经是vue3的系统,所以,微应用也决定直接使用vue3框架

不懂的地方可以参考qiankun官方API,本文记录的是 基于vue3+vite的微应用,如何在vue3+vite的主应用中接入,以及完整的改造过程。首先有三个前提条件:

  • 主应用为经典运营系统的左右布局结构(下图),要求将微应用接入为主应用的一个路由页面
  • 微应用和主应用部署在不同的服务;
  • 主应用部署在二级目录。

图中所示的微应用菜单处,就是可以动态插拔微应用的菜单。

主应用

  1. 在主应用中注册微应用路由
const microRouters = [
    {
   
        path: '/vite-vue3-app2/', // path值必须与微应用中,路由前缀的`${parentBase}${packagejson.name}`中的${packagejson.name}值相同,否则访问会出错,${parentBase}为主应用部署的目录路径,后面内容中会讲
        component: Layout,
        name: 'vite-vue3-app2',
        meta: {
    title: '微应用测试2', icon: 'dashboard' },
        children: [ // 想要显示的微应用路由,都需要在主应用中注册
            {
   
                path: 'hello',
                component: () => import('@/views/Portal.vue'), // 所有路由都使用同一个vue组件
                hidden: false,
                name: 'app2-hello',
                meta: {
    title: 'app2-hello', icon: 'dashboard' }
            },
            {
   
                path: 'home',
                component: () => import('@/views/Portal.vue'),
                hidden: false,
                name: 'app2-home',
                meta: {
    title: 'app2-home', icon: 'dashboard' }
            },
            {
   
                path: 'about',
                component: () => import('@/views/Portal.vue'),
                hidden: false,
                name: 'app2-about',
                meta: {
    title: 'app2-about', icon: 'dashboard' }
            },
        ]
    },
]
  1. 注册微应用
registerMicroApps([
  {
   
        name: 'app2',
        entry: '/app2/

上一篇:XXL-Job快速入门+详细教程

栏    目:网页制作

下一篇:23fall HKU港大CS 笔试+面试回忆

本文标题:07. vue3+vite+qiankun搭建微应用前端框架,并接入vue3微应用

本文地址:https://158code.com/a/wangyezhizuo/318.html

广告投放 | 联系我们 | 版权申明

重要申明:本站所有的文章、图片、评论等,均由网友发表或上传并维护或收集自网络,属个人行为,与本站立场无关。

如果侵犯了您的权利,请与我们联系,我们将在24小时内进行处理、任何非本站因素导致的法律后果,本站均不负任何责任。

联系QQ:88888369 | 邮箱:158code.com

Copyright © 2002-2024 158源码网-网站源码-源码免费下载 版权所有 网站地图豫ICP备14003415号-3