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

// 主应用

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