阿里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 = Axios

app.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 = null

function 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 } = props
  const 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>
  )
}

转载