如何在主Vue.js应用中嵌入已编译的Vue.js子应用？

一、核心集成方案 #

1. 微前端架构（推荐） #

使用qiankun这类成熟的微前端框架，支持直接加载已编译的Vue子应用，仅需对子应用做少量适配：

• 子应用入口文件暴露生命周期钩子：

// 子应用main.js
let vueInstance = null;

// 初始化钩子，仅执行一次
export async function bootstrap() {
  // 可在此加载全局资源，如字体、全局样式
}

// 挂载钩子，主应用激活子应用时触发
export async function mount(props) {
  vueInstance = new Vue({
    router,
    render: h => h(App)
  }).$mount(props.container || '#app');
  // 接收主应用传递的用户角色，存入全局状态
  store.commit('setUserRole', props.userRole);
}

// 卸载钩子，主应用切换子应用时触发
export async function unmount() {
  vueInstance.$destroy();
  vueInstance = null;
}

• 主应用注册子应用并传递权限信息：

// 主应用微前端注册逻辑
import { registerMicroApps, start } from 'qiankun';

registerMicroApps([
  {
    name: 'vue-subapp',
    entry: '//your-subapp-domain/dist', // 子应用编译产物的访问地址
    container: '#subapp-container', // 主应用中承载子应用的DOM容器
    props: {
      userRole: currentUser.role // 传递当前登录用户的角色信息
    }
  }
]);

start();

2. 组件库化改造 #

如果子应用功能可拆分为独立模块，将其编译为Vue组件库，主应用直接引入使用：

• 子应用打包配置（以Vite为例）：

// vite.config.js
export default defineConfig({
  build: {
    lib: {
      entry: 'src/components/index.js', // 组件入口文件
      name: 'SubappComponents',
      fileName: format => `subapp-components.${format}.js`
    },
    rollupOptions: {
      external: ['vue'], // 排除Vue依赖，复用主应用的Vue实例
      output: {
        globals: { vue: 'Vue' }
      }
    }
  }
});

• 主应用中引入并使用：

import SubappComponents from './path/to/subapp-components.umd.js';
import 'subapp-components/style.css';

Vue.use(SubappComponents);

// 页面中使用子应用组件，传入角色权限
<subapp-user-center :user-role="currentUser.role" />

二、权限控制的关键处理 #

• 主应用前置拦截：在加载子应用/组件前，先校验用户角色是否具备访问权限，无权限则直接展示403页面，不触发子应用加载。
• 子应用内部校验：保留子应用自身的权限逻辑，不依赖主应用的拦截（防止绕过主应用直接访问子应用）。比如在子应用路由守卫中校验：

// 子应用路由守卫
router.beforeEach((to, from, next) => {
  // 微环境下取主应用传递的角色，独立运行时取本地存储的角色
  const userRole = window.__POWERED_BY_QIANKUN__ ? store.state.userRole : localStorage.getItem('userRole');
  if (to.meta.requiredRoles && !to.meta.requiredRoles.includes(userRole)) {
    next('/403');
  } else {
    next();
  }
});

三、对比iframe的优势 #

• 避免postMessage的跨域通信复杂度和数据安全风险，主应用与子应用可直接通过props传递数据。
• 样式隔离更可控：微前端框架自带样式隔离机制，组件库方式可通过CSS模块化或命名空间避免样式冲突。
• 路由同步更自然，主应用与子应用路由可整合，用户体验接近单页应用。

内容的提问来源于stack exchange，提问作者Rodrigo Moya