Vue + 微前端混合架构：从碎片化到一体化的演进之路

在企业信息化迭代过程中，多套独立旧后台系统（多采用 Spring Boot MVC 前后端不分离架构）往往面临用户体验割裂、维护成本高、资源重复、扩展困难、切换性能低五大核心痛点。为解决此类问题，本项目以 “统一入口、平滑过渡、降本提效” 为核心目标，采用 Vue 生态构建现代化前端架构，结合iframe 原生集成 + qiankun 微前端的混合方案，实现旧系统无损接入与新功能高效开发的双重需求。项目不仅解决了当前多系统管理的碎片化问题，更通过同步导航、精细化权限、全链路监控等设计，为企业级应用集成提供了可复用的技术范式，同时为未来架构演进（微前端全面落地、组件库统一）奠定基础。

▲旧系统痛点梳理

原有旧后台面临的具体痛点的如下：

▲核心目标设定

基于痛点，项目明确三大核心目标：

技术栈选择以 “兼容性优先、低侵入性、可扩展性” 为原则，各组件选型理由与业务需求强绑定，具体如下：

▲设计原则

应用架构设计遵循以下核心原则：

▲架构模式

采用 “统一基座 + 分类接入” 的分层架构，具体分层如下：

▲统一导航与布局

采用 “顶部导航栏 + 下方分区” 的经典后台布局，适配不同页面场景：

▲ iframe 集成模块：旧系统平滑接入

针对旧系统 “零改造接入” 需求，设计功能完备的 iframe 模块：

//iframe load事件

handleIframeLoad() {

    try {

        if (this.\$refs.contentIframe && this.\$refs.contentIframe.contentWindow.location.href) {

            //iframe性能日志
            const iframeWindow = this.\$refs.contentIframe.contentWindow;
            const iframePerf = iframeWindow.performance;
            const timing = iframePerf.getEntriesByType('navigation')[0];
            //通过window的performance计算相对主window性能计算的开始时间
            const perf = window.performance;
            const nowTime = perf.now();
            console.log("iframe开始时间：" + (nowTime - timing.duration));
            //通过PerformancePaintTiming计算绘制时间
            const paintTime = iframePerf.getEntriesByType('paint');
            let whiteTime = "未知";
            if (paintTime && paintTime.length) {
                whiteTime = paintTime\[0\].startTime + "ms";
            }
            //通过PerformanceNavigationTiming计算各类性能耗时，这里只举例几种常用的计算指标
            console.log(`iframe加载总耗时：\${timing.loadEventEnd - timing.startTime}ms
                白屏时间：${whiteTime}
                页面可交互时间：${timing.domInteractive - timing.startTime}ms
                页面渲染耗时：${timing.loadEventEnd - timing.responseEnd}ms`)
        }
    } catch (error) {
        console.log(error);
    }
}

▲微前端准备：qiankun 接入方案

作为传统的跨应用嵌入方案，iframe 虽实现了页面级别的简单聚合，但在实际应用中暴露诸多难以攻克的问题:

为支撑系统未来的弹性扩展（子应用独立开发、灰度发布、按需加载），我们引入qiankun 微前端框架，核心步骤如下：

registerMicroApps(
        {
            name: 'hot-monitor',
            entry: 'http://abc.com/admin-hot-minotor/index.html#',
            // entry: 'http://abc.com:8087/#/',  //本地，调试时用
            container: '#micro-app-container',
            activeRule: (location) => location.hash.startsWith('#/qiankun/hot-monitor'),
            props: { //传递给子应用的props
                routerBase: '/qiankun/hot-monitor',
                pathObj: {
                    hotRedPath: 'hotred' //子应用接口路径，可以写到环境变量里
                }
            }
        },)

    console.log('registerApps')
    // 合适的位置调用start，按需调整start的配置参数，启动乾坤
    start();
}

//主应用main.js中调用
registerApps();

//子应用main.js

// 定义Vue实例
let vueInstance = null;

// qiankun生命周期 - 微应用初始化
function render(props = {}) {
    const { container, routerBase } = props;
    if (routerBase) {
        window.__SUBAPP_BASE_PATH__ = routerBase;
    }

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

// 独立运行时直接渲染，独立调试时配置默认参数
if (!window.__POWERED_BY_QIANKUN__) {
  render();
  //子应用单独访问时的路径
  window.globalPathObj = {
    hotRedPath: 'mrd-hotred'
  }
}

export async function mount(props) {
  render(props);
}


export async function unmount() {
  vueInstance.$destroy();
  vueInstance = null;
}

通过props中的参数判断是否为微应用模式，从而动态调整路由前缀和挂载位置，既保证子应用能独立开发调试，又能无缝嵌入主应用，是微前端子应用适配的核心逻辑。

router可以通过判断是否为乾坤配置base路径，方便单独调试：

//router改造示例
Vue.use(Router)
//根据是否乾坤配置base路径，支持单独访问方便调试
const base = window.__POWERED_BY_QIANKUN__ ? '/qiankun/mrd-microapp' : '';

const routes = [
  {
    path: '/',
    name: 'Home',
    component: () => import('../demo/Home.vue')
  },
  {
    path: base +'/about',
    name: 'About',
    component: () => import('../demo/About.vue')
  }
]

const router = new Router({
  base: base,
  routes
});


export default router;

打包配置如下，需要把微应用打包为umd格式：

//打包配置 vue.config.js
const { name } = require('./package');
module.exports = {
    //主要是configureWebpack配置需要注意
    configureWebpack: {
        output: {
            library: `${name}-[name]`,
            libraryTarget: 'umd', // 把微应用打包成 umd 库格式
            jsonpFunction: `webpackJsonp_${name}`, // webpack 5 需要把 jsonpFunction 替换成 chunkLoadingGlobal
        },
    },
}

▲红点通知功能

采用 Redis+WebSocket 组合方案，将核心通知模块封装成可复用jar包，实现全系统通知状态的统一管理，减少开发周期。通过权限系统控制红点显示规则，解决前端无需修改代码，即可调整红点展示效果。

核心流程：

1.后端服务产生通知消息后，通过 Redis 发布 / 订阅机制将消息分发至对应订阅节点；
2.监听节点接收消息后，结合权限系统配置的展示规则，筛选出符合条件的通知内容；
3.借助 WebSocket 长连接将处理后的通知数据实时推送至前端；
4.前端接收数据后自动更新红点数量与显示状态，完成 “消息产生 - 权限校验 - 实时推送 - 前端渲染” 的全链路闭环。

▲路由设计：分层路由与旧地址重定向

export default new Router({
  base: "/xxx/",
  routes: [
    { path: "/", redirect: "/index" }, // 首页重定向
    { path: "/index", component: () => import("../common/Home.vue") }, // 主应用首页
    // iframe路由：匹配旧系统页面
    {
      path: "/main",
      component: () => import("../common/OutFrame.vue"),
      children: [{ path: "/frame/:params", component: () => import("../pages/frame/index.vue") }]
    },
    // 微前端路由：匹配qiankun子应用
    { path: "/qiankun/*", component: () => import("../common/OutFrame.vue") },
  ],
});

▲精细化权限控制：从 “菜单级” 到 “页面级”

针对旧系统权限漏洞，设计同步权限校验机制：

async handleUrl(systemCode, name, id) {
  // 1. 校验资源ID是否存在
  if (!id) { this.$message.error("资源ID不能为空"); return; }
  // 2. 同步校验用户权限
  const hasPermission = await this.userValidateResourcesId(systemCode, id, name);
  if (!hasPermission) {
    // 无权限时跳转至提示页，并携带系统信息用于授权后直接刷新
    this.$router.push(`/jumpView?systemCode=${systemCode}&showInfo=${encodeURIComponent(name)}`);
    return;
  }
  // 3. 权限通过，构建iframe URL并加载
  this.buildIframeUrl(systemCode, id);
}

▲全链路性能监控：量化体验优化效果

集成web-vitals与自定义监控，实现 “主应用 + iframe + 微应用” 的全链路性能监控：

// main.js中集成web-vitals
import { onCLS, onLCP, onFID } from 'web-vitals';
onCLS(record => console.log("主应用CLS：", record.value));
onLCP(record => console.log("主应用LCP：", record.value));
// iframe监控（在handleIframeLoad中，示例见4.2 iframe 集成模块）
// qiankun微应用使用生命周期的方式实现监控

本项目实现的核心收益如下：

未来将从三方面深化架构：

1. 微前端全面落地：逐步将 iframe 集成的旧系统迁移为 qiankun 微应用，实现 “独立开发、独立部署、独立升级”；

2. 统一组件库建设：开发业务专属组件库，覆盖表单、表格、弹窗等高频场景，进一步提升界面一致性与开发效率；

3. 权限体系与可观测性升级：

   • 权限：完善 RBAC 模型，支持 “数据级权限”（如不同用户查看不同部门数据）；

   • 监控：实现前端异常自动告警，结合远程日志系统实现全链路问题追踪。

本项目通过 “iframe 无损接入 + qiankun 前瞻布局” 的混合方案，成功解决了企业旧后台系统的碎片化问题，实现了 “用户体验统一、开发维护降本、架构可演进” 三大核心目标。其实践价值不仅体现在技术层面，更在业务层面为企业数字化转型提供了 “渐进式改造” 的参考路径 —— 避免一次性重构的风险，同时通过基础能力复用与监控体系建设，为后续系统扩展奠定基础。
对于面临类似 “多旧系统整合” 需求的企业，本方案的核心借鉴点在于：以业务需求为导向选择技术方案（而非盲目追求新技术）、以用户体验为核心设计交互流程、以可观测性为基础保障系统稳定。未来，随着微前端、低代码等技术的融合，该架构将进一步具备 “生态化、智能化” 能力，成为企业中后台系统的核心支撑平台。