如何合并两个独立Vue应用并保持各自独立开发测试？

一、问题根源 #

直接引入子应用的App.vue无法加载其main.js中的完整逻辑（路由、Store初始化、全局配置等），导致子应用生命周期未正确初始化，进而引发路径解析失败、路由缺失等问题。

二、核心实现方案 #

1. 子应用改造为可导出的应用工厂 #

将每个子应用的main.js改为导出应用工厂函数，让主应用可以按需创建、销毁子应用实例，而非直接挂载：

// user/src/main.js
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import './styles/global.css'

// 导出工厂函数，接收挂载目标元素
export function createUserApp(target) {
  const app = createApp(App)
  app.use(router)
  app.use(store)
  // 可在此添加全局指令、配置等
  app.mount(target)
  // 返回实例，方便主应用销毁
  return { app, router, store }
}

// 独立开发时正常挂载
if (import.meta.env.DEV) {
  createUserApp('#app')
}

Admin应用做同样改造，导出createAdminApp函数。

2. 主应用集成子应用 #

主应用通过工厂函数按需初始化子应用，同时管理实例的销毁与重建：

<script>
import { ref, onUnmounted } from 'vue'
import { createUserApp } from '../apps/user/src/main.js'
import { createAdminApp } from '../apps/admin/src/main.js'

export default {
  name: 'MainApp',
  setup() {
    const currentApp = ref('user')
    let activeAppInstance = null

    const mountApp = (appName) => {
      // 销毁前序应用实例
      if (activeAppInstance) {
        activeAppInstance.app.unmount()
      }

      const target = document.getElementById('app-container')
      activeAppInstance = appName === 'user' 
        ? createUserApp(target) 
        : createAdminApp(target)
    }

    // 初始挂载用户端应用
    mountApp(currentApp.value)

    const changeApp = (name) => {
      currentApp.value = name
      mountApp(name)
    }

    onUnmounted(() => {
      activeAppInstance?.app.unmount()
    })

    return { currentApp, changeApp }
  }
}
</script>

<template>
  <div>
    <button @click="changeApp('user')">切换用户端</button>
    <button @click="changeApp('admin')">切换管理端</button>
    <div id="app-container"></div>
  </div>
</template>

3. 可选：Vite库模式编译子应用 #

若需将子应用编译为独立库供主应用引入，可配置Vite的build.lib：

// user/vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()],
  build: {
    lib: {
      entry: './src/main.js',
      name: 'UserApp',
      formats: ['es', 'umd'],
      fileName: (format) => `user-app.${format}.js`
    },
    rollupOptions: {
      // 排除Vue、VueRouter等外部依赖，由主应用提供
      external: ['vue', 'vue-router', 'vuex'],
      output: {
        globals: {
          vue: 'Vue',
          'vue-router': 'VueRouter',
          vuex: 'Vuex'
        }
      }
    }
  }
})

编译后主应用可直接引入库文件：

import { createUserApp } from '../apps/user/dist/user-app.es.js'

三、保持独立开发与测试 #

• 子应用独立开发：子应用保留原有入口，开发环境下自动挂载到#app，可单独启动npm run dev开发。
• 主应用集成开发：主应用启动开发服务时自动加载子应用源码，支持热更新。
• 独立测试：子应用可单独运行单元测试、E2E测试，主应用针对集成逻辑编写测试即可。

四、注意事项 #

• 路由隔离：子应用路由需设置前缀（如/user/*、/admin/*）避免冲突，主应用可通过嵌套路由或动态切换路由实例实现隔离。
• 资源路径：子应用静态资源使用相对路径，或配置Vite的base选项，防止路径解析错误。
• 状态管理：子应用Store为独立实例，若需跨应用共享状态，可通过事件总线、Pinia跨实例共享或全局状态方案实现。

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