Vue微服务架构实践：从单应用到微前端的落地方案

// src/main.js
import { createApp } from 'vue';
import App from './App.vue';
import router from './router';
import { createPinia } from 'pinia';
let app = null; // 存储Vue应用实例
// 独立运行模式：直接挂载应用
if (!window.__MICRO_WEB__) {
  renderApp();
}
// 渲染应用的核心函数
function renderApp(props = {}) {
  const { baseUrl = '/', container } = props;
  // 设置路由基础路径（主应用传递，确保路由兼容）
  router.base = baseUrl;
  // 创建Vue应用
  app = createApp(App);
  app.use(router);
  app.use(createPinia());
  // 挂载到指定容器：独立运行挂载到#app，嵌入运行挂载到主应用提供的容器
  app.mount(container ? container.querySelector('#app') : '#app');
}
// 暴露给主应用的生命周期钩子
export const bootstrap = async () => {
  console.log('Vue子应用：初始化完成');
};
export const mount = async (props) => {
  console.log('Vue子应用：开始挂载，接收主应用参数', props);
  renderApp(props); // 传入主应用参数，渲染应用
};
export const unmount = async () => {
  console.log('Vue子应用：开始卸载');
  // 卸载应用，清理资源，避免内存泄漏
  app.unmount();
  app = null;
  router.history.destroy(); // 销毁路由实例
};

// src/router/index.js
import { createRouter, createWebHistory } from 'vue-router';
import Home from './views/Home.vue';
import About from './views/About.vue';
const routes = [
  { path: '/', name: 'Home', component: Home },
  { path: '/about', name: 'About', component: About }
];
// 不固定base，后续由主应用通过props传递
const router = createRouter({
  history: createWebHistory(),
  routes
});
export default router;

// 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: 'VueMicroApp', // 全局变量名（主应用加载后可通过window.VueMicroApp访问）
      formats: ['umd'], // 打包格式：umd（兼容amd/cjs/全局变量）
      fileName: 'vue-micro-app' // 输出文件名
    },
    rollupOptions: {
      // 外部化依赖：避免与主应用重复打包（Vue、VueRouter、Pinia等）
      external: ['vue', 'vue-router', 'pinia'],
      output: {
        // 定义外部依赖的全局变量映射（主应用需暴露这些全局变量）
        globals: {
          vue: 'Vue',
          'vue-router': 'VueRouter',
          pinia: 'Pinia'
        }
      }
    }
  },
  server: {
    port: 5174, // 子应用端口（需与主应用注册的entry地址一致）
    cors: true // 允许跨域（主应用加载子应用时需跨域）
  }
});

npm install qiankun --save

// src/main.js（主应用）
import { createApp } from 'vue';
import { registerMicroApps, start } from 'qiankun';
import App from './App.vue';
import router from './router';
// 创建主应用Vue实例
const app = createApp(App);
app.use(router);
app.mount('#app');
// 1. 注册子应用：配置子应用名称、入口、挂载容器、激活规则等
registerMicroApps([
  {
    name: 'vue-micro-app', // 子应用名称（唯一标识）
    entry: '//localhost:5174', // 子应用开发环境入口（生产环境为CDN地址）
    container: '#micro-container', // 子应用挂载的容器（主应用页面中需有此DOM）
    activeRule: '/vue-app', // 激活规则：访问主应用的/vue-app路径时，加载该子应用
    props: { // 传递给子应用的参数
      baseUrl: '/vue-app', // 子应用路由基础路径
      globalState: { userInfo: { id: 1, name: 'admin' } } // 全局共享状态（如用户信息）
    }
  }
]);
// 2. 启动微前端服务
start({
  prefetch: true // 开启预加载：主应用空闲时预加载常用子应用，提升切换速度
});

<template>
  <div class="layout">
    <!-- 主应用导航栏 -->
    <nav>
      <router-link to="/">主应用首页</router-link>
      <router-link to="/vue-app">Vue子应用</router-link>
    </nav>
    <!-- 子应用挂载容器 -->
    <div id="micro-container"></div>
  </div>
</template>

// 主应用：初始化全局状态并监听变化
import { initGlobalState } from 'qiankun';
// 初始全局状态
const initialState = { userInfo: { id: 1, name: 'admin' } };
// 创建全局状态通信实例
const actions = initGlobalState(initialState);
// 主应用修改全局状态
actions.setGlobalState({ userInfo: { id: 1, name: 'super-admin' } });
// 主应用监听全局状态变化
actions.onGlobalStateChange((newState, oldState) => {
  console.log('主应用监听全局状态变化：', newState, oldState);
});
// 子应用：监听并修改全局状态（在mount钩子中处理）
export const mount = async (props) => {
  const { onGlobalStateChange, setGlobalState } = props;
  
  // 监听主应用全局状态变化
  onGlobalStateChange((newState) => {
    console.log('子应用接收全局状态：', newState);
    // 同步到子应用本地状态
    const userStore = useUserStore();
    userStore.setUserInfo(newState.userInfo);
  }, true); // 第二个参数为true：立即执行一次回调
  
  // 子应用修改全局状态（可选）
  setGlobalState({ key: '子应用修改的状态值' });
  
  // 其他挂载逻辑...
  renderApp(props);
};