vite配置qiankun

建立基座应用（使用vue3应用作为基座）

新建vue3应用作为基座

1.   npm create vue@latest
   

2.   npm install
   

3.   npm run dev
   

4.   若报错crypto.hash is not a function：需要升级node版本至 package.json-engines对应的版本
   

基座应用初始化

1.   npm i qiankun -S
   

2.   src下新建文件夹（qiankun）
   

3.   qiankun文件夹下新建main.ts文件如下
          import { registerMicroApps } from 'qiankun'
          import { subApps } from './subAppConfig'
          export function registerApps() {
              try {
                  registerMicroApps(subApps, {
                       beforeLoad: [
                         (app) => {
                           console.log('before load', app)
                           return Promise.resolve()
                         },
                       ],
                       beforeMount: [
                         (app) => {
                           console.log('before mount', app)
                           return Promise.resolve()
                         },
                       ],
                       afterUnmount: [
                         (app) => {
                           console.log('before unmount', app)
                           return Promise.resolve()
                         },
                       ],
                 })
            } catch (err) {
                  console.log(err)
            }
          }
   

4.   qiankun文件夹下新建subAppConfig.ts文件如下
     export const subApps = [
          {
                  name: 'v3', // 子应用注册名称
                  entry: '//localhost:3100', // 入口路由
                  container: '#sub-container', // 容器id
                  activeRule: '/mainApp/v3', // 路由激活规则
          },
      ]
   

5.    配置子应用路由
      {
        path: '/v3/:pathMatch(.*)*',
        name: 'v3',
        component: () => import('@/components/SubContainer.vue'),
      },
   

6.    src/components下新建SubContainer.vue作为微服务容器，并引入qiankun的start() 方法启动乾坤应用
      <!-- 微服务容器 -->
      <template>
        <div>
          主应用容器
          <div id="sub-container"></div>
        </div>
      </template>
   
      <script setup lang="ts">
      import { onMounted } from 'vue'
      import { start } from 'qiankun'
      import { registerApps } from '@/qiankun/main.js' // qiankun主文件的路径
      onMounted(() => {
        registerApps()
        // 开启qiankun
        start({
          // sandbox: {
          //   // sandbox: { strictStyleIsolation: true } // 严格隔离
          //   // experimentalStyleIsolation: true // 样式隔离
          // }
        })
      })
      </script>
   
      <style></style>
   

建立子应用 （子应用也选择vue3）

同上新建vue3应用

子应用配置

1.   npm install vite-plugin-qiankun -S
   

2.   vite.config.ts中配置为qiankun子应用
     import qiankun from 'vite-plugin-qiankun'
     plugins: [
       vue(),
       vueJsx(),
       vueDevTools(),
       qiankun('v3', {
         // 'v3'需与主应用注册的name一致
         useDevMode: true,
       })
   

   ],

3.   配置main.ts
      import { createApp, type App as VueApp } from 'vue'
      import App from './App.vue'
      import router from './router'
      import { renderWithQiankun, qiankunWindow } from 'vite-plugin-qiankun/dist/helper'
   
      let app: VueApp | null = null
      const render = (container?: Element | ShadowRoot) => {
        app = createApp(App)
        app.use(router)
        app.mount(container ? container.querySelector('#app') : '#app')
      }
   
      const initQianKun = () => {
        renderWithQiankun({
          mount(props) {
            const { container } = props
            render(container)
          },
          bootstrap() {},
          unmount() {
            app?.unmount()
            app = null
          },
          update() {},
        })
      }
   
      if (qiankunWindow.__POWERED_BY_QIANKUN__) {
        initQianKun()
      } else {
        render()
      }
   

启动主应用及子应用，并访问对应的路由，即可看到乾坤已配置成功