qiankun微前端vue3+ts+vite（配置示例）

qiankun微前端vue3+ts+vite配置示例

原创已于 2025-04-10 16:35:58 修改 · 518 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#前端

于 2025-04-10 16:30:21 首次发布

// 主应用

main.ts

// 注册子应用
registerMicroApps([
  {
    name: 'sub_ANALYTICS_APM_SEARCH',
    entry: 'http://localhost:7101/', // 子应用地址
    container: '#sub-container', // 子应用挂载容器
    activeRule: '/controller/#/location=ANALYTICS_APM_SEARCH', // 路由匹配规则
    props: {
      msg: '我是来自主应用的值-vue' // 主应用向微应用传递参数
    },
  }
])

// 启动 qiankun
start()

// router结构

  {
    path: '/controller',
    component: Controller,
    name: 'Contoller',
    children: [
           {
            path: 'ANALYTICS_APM_SEARCH',
            name: 'sub_ANALYTICS_APM_SEARCH',
            component: () => import('@/app/view/Analyse/APMSearch/index.vue'),
            alias: '/location=ANALYTICS_APM_SEARCH',
            props: (route) => ({
              timeRange: route.query.timeRange,
            }),
          },
     ]
  }

//@/app/view/Analyse/APMSearch/index.vue 文件

<template>
    <div id="sub-container"></div>
</template>

子应用

// vite.config.ts

// 子应用的vite.config.ts
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import qiankun from 'vite-plugin-qiankun';
import path from 'path';



export default defineConfig({
  plugins: [
    vue(),
    qiankun('sub_ANALYTICS_APM_SEARCH', {
      useDevMode: true,  // 使用开发模式
    }),
  ],
  base: '/location=ANALYTICS_APM_SEARCH',  // 子应用的基础路径
  server: {
    port: 7101,  // 子应用的端口
    cors: true,  // 开启跨域
    headers: {
      'Access-Control-Allow-Origin': '*',
    },
  },
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src'),
    },
  },
  build: {
    rollupOptions: {
      output: {
        format: 'umd',  // 构建为umd格式
        name: 'sub_ANALYTICS_APM_SEARCH',  // 设置全局变量名称
      },
    },
  },
});

// main.ts

// 子应用的main.ts
import { createApp } from 'vue';
import App from './App.vue';
import './style.css'
import { renderWithQiankun, qiankunWindow } from "vite-plugin-qiankun/dist/helper"
import router from './router/index';


let app: any;

if (!qiankunWindow.__POWERED_BY_QIANKUN__) {
  createApp(App).use(router).mount("#sub-container");
} else {
  renderWithQiankun({
    mount(props:any) {
      // 传递的值可以获取到了
      app = createApp(App)
      
      app.use(router)
      app.mount(
        props.container
          ? props.container.querySelector("#sub-container")
          : document.getElementById("sub-container")
      );
    },
    bootstrap() {
      console.log("--bootstrap");
    },
    update(props:any) {
      console.log("--update", props);
    },
    unmount() {
      console.log("--unmount");
      app?.unmount();
    },
  });
}

// router

// src/router/index.ts
import { createRouter, createWebHashHistory } from 'vue-router'

const routes = [
  {
    path: '/',
    name: 'Home',
    component: () => import('../views/Home.vue')
  }
]

const router = createRouter({
  history: createWebHashHistory('/controller'), // ✅ 使用 hash 路由
  routes
})


router.beforeEach((to, from, next) => {
  console.log('导航到:', to.fullPath)
  next()
})
export default router

访问路径

http://localhost:8080/controller/#/location=ANALYTICS_APM_SEARCH?timeRange=last_1_hour.BEFORE_NOW.-1.-1.60