阿里qiankun微服务搭建

主服务 chat
vue3 ts vite 子服务 ppt
react 18 vite 子服务 agent

主服务

npm i vite-plugin-qiankun

mian.ts


import './style/base.scss'
import 'virtual:svg-icons-register'
import { createApp } from 'vue'
import { createPinia } from 'pinia'import App from './App.vue'
import router from './router'
import Axios from '@/utils/request.js';
import { registerMicroApps, start } from 'qiankun';
// 引入ui 库
// import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'// 引入ui icon// 将自动注册所有组件为全局组件
// import dataV from '@jiaminghi/data-view'const app = createApp(App)
// for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
//   app.component(key, component)
// }app.config.globalProperties.$http = Axiosapp.use(createPinia())
app.use(router)
// app.use(ElementPlus)
app.mount('#app')
registerMicroApps([{name: 'agent',entry: 'http://localhost:83/',container: '#agentContainer',activeRule: '/agent',props: {// 传递给子应用的数据data: {name: 'agent',age: 18,},},},{name: 'ppt',entry: 'http://localhost:5173/',container: '#pptContainer',activeRule: '/ppt',props: {// 传递给子应用的数据data: {name: 'ppt',age: 18,},},},
], {beforeLoad: [(app: any): any => {console.log('before load', app);// 挂载前回调}],beforeMount: [(app: any): any => {console.log('before load', app);// 挂载后回调}],afterUnmount: [(app: any): any => {console.log('before load', app);// 挂载后回调}]
})
setTimeout(() => {start({prefetch: 'all', // 预加载子应用sandbox: { experimentalStyleIsolation: true }, // 样式隔离});// start();
}, 1);

router/index.ts

    { path: '/ppt', component: () => import('@/views/ppt/index.vue') },{ path: '/ppt/home', component: () => import('@/views/ppt/index.vue') },{ path: '/agent', component: () => import('@/views/agent/index.vue') },

agent/index.vue

<template><div id="agentContainer" style="width: 100%;height: 100%;">react</div>
</template>
<script lang="ts" setup>
</script>
<style>
#pptContainer {width: 100vw;height: 100vh;
}
</style>

ppt/index.vue

<template><div id="pptContainer" style="width: 100%;height: 100%;">zzzzzzzzz</div>
</template>
<script lang="ts" setup>
import { registerMicroApps, start } from 'qiankun';
import { onMounted } from 'vue';onMounted(() => {})</script>
<style>
#pptContainer {width: 100vw;height: 100vh;
}
</style>

vue3 ts服务
vite.cong.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import qiankun from 'vite-plugin-qiankun'// https://vite.dev/config/
export default defineConfig({base: '/ppt/', plugins: [vue(),qiankun('ppt', { // 子应用名称，与package.json的name一致useDevMode: true // 开发模式下需要设置为true})],server: {host: "0.0.0.0",port: 5173, // 设置子应用端口cors: true, // 允许跨域headers: {'Access-Control-Allow-Origin': '*' // 允许跨域}},css: {preprocessorOptions: {scss: {// additionalData: '@import "./src/style/index.scss";' // 修复：改为单个字符串// charset: false}}}
})

main.ts

import { createApp } from 'vue'
// import './style.css'
import App from './App.vue'
import './style/base.scss'
import router from './router/index.ts'// const app =  createApp(App)
// app.use(router)
// app.mount('#app')let instance: any = nullfunction render(props?: {} | undefined) {console.log(props)instance = createApp(App)instance.use(router)instance.mount('#app')}// 独立运行时
if (!window.__POWERED_BY_QIANKUN__) {render()
}// qiankun 生命周期钩子
export async function bootstrap() {console.log('[vue] vue app bootstraped')
}export async function mount(props: {} | undefined) {console.log(props,"props")console.log('[vue] props from main framework', props)render(props)
}export async function unmount() {instance.unmount()instance._container.innerHTML = ''instance = null
}

router/index.ts

import { createRouter, createWebHistory } from 'vue-router'const router = createRouter({history: createWebHistory(window.__POWERED_BY_QIANKUN__ ? '/ppt' : '/ppt'),routes: [// 你的路由配置{path: '/',name: 'home',component: () => import('../views/home/index.vue'),},{path: '/home',name: 'home1',component: () => import('../views/home/index.vue'),},]
})export default router

react 18

package.json

    "qiankun": "^2.10.16","react": "^18.2.0","react-dom": "^18.2.0","react-router-dom": "^7.5.2","vite-plugin-qiankun": "^1.0.15"

vite.config.ts

import { defineConfig, loadEnv } from 'vite'
import react from '@vitejs/plugin-react'
// 1. vite环境下安装qiankun插件
import qiankun from "vite-plugin-qiankun";// https://vitejs.dev/config/
export default defineConfig(({ mode }) => {console.log(mode);  const isDev = mode === 'development'const env = loadEnv(mode, process.cwd());console.log(env); return {plugins: [// 2. 引用qiankun插件，需要注意，这里的microReact是子应用名称，需要和主应用中注册的子应用名称一致qiankun(env.VITE_APP_NAME, {useDevMode: true,}),// 3. react()插件会跟vite-plugin-qiankun插件冲突，所以需要判断是否是开发环境!isDev && react(),],// 4. 同域配置二级域名，异域配置不需要可修改为：isDev ? "/" : 'http://xxx.com/'base: isDev ? "/"+env.VITE_APP_NAME : '/'+env.VITE_APP_NAME,server: {host: "0.0.0.0",port: 83,headers: {'Access-Control-Allow-Origin': '*'},proxy: {'^/reactApi': {target: 'http://localhost:9528/',rewrite: path => path.replace(/^\/reactApi/, ''),changeOrigin: true}}},}
})

.env.development 和 .env.production

VITE_APP_BASE_API='/gateway'
VITE_APP_NAME='agent'

main.tsx

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.tsx'// 1. 引用vite-plugin-qiankun
import { renderWithQiankun, qiankunWindow, QiankunProps } from 'vite-plugin-qiankun/dist/helper'
let root: ReactDOM.Root | null = null// 2. qiankun渲染函数
function render(props: QiankunProps) {console.log(props,"xxxxxxxxx")const { container } = propsconst root = ReactDOM.createRoot((container? container.querySelector('#root'): document.querySelector('#root')) as HTMLElement)root.render(<React.StrictMode><App /></React.StrictMode>)return root
}renderWithQiankun({mount(props) {root = render(props)},bootstrap() {console.log('bootstrap')},unmount() {root?.unmount()},update() {},
})if (!qiankunWindow.__POWERED_BY_QIANKUN__) {root = render({})
}

router/index.tsx

// src/router/index.tsx
import React, { Suspense } from 'react'
import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom'
import { qiankunWindow } from "vite-plugin-qiankun/dist/helper";// 路由懒加载
const Home = React.lazy(() => import('../views/home'))
// const List = React.lazy(() => import('../views/list'))
// const NotFound = React.lazy(() => import('../views/notFound'))export default function Router() {return (// 同域：判断是否为qiankun引用，给出不同路由；异域分别修改为 '/micro-react' : '/'<BrowserRouter basename={qiankunWindow.__POWERED_BY_QIANKUN__ ? "/"+import.meta.env.VITE_APP_NAME : "/"+import.meta.env.VITE_APP_NAME}><Routes><Route path='/' element={<Suspense><Home /></Suspense>}></Route><Route path='/home' element={<Suspense><Home /></Suspense>}></Route>{/* <Route path='/list' element={<Suspense><List/></Suspense>}></Route> */}{/* 定义404路由*/}{/* <Route path='/404' element={<Suspense><NotFound/></Suspense>}></Route> */}{/* 未匹配的路由使用Navigate重定向到此页面 这里即notFound.jsx */}{/* <Route path='/*' element={<Navigate to='/404' />}></Route>  */}</Routes></BrowserRouter>)
}