【无标题】qiankun微前端主子应用Vue3+vite实现

最新推荐文章于 2024-05-23 09:39:28 发布

zzq12138

最新推荐文章于 2024-05-23 09:39:28 发布

阅读量545

点赞数 7

文章标签：前端 typescript vue.js

本文链接：https://blog.csdn.net/zzq12138/article/details/135649844

版权

qiankun微前端Vue3+vite实现

主应用

安装 npm i qiankun -S。

配置main.ts

引入

import { registerMicroApps, addGlobalUncaughtErrorHandler, start } from 'qiankun'

注册子应用

// 注册子应用
registerMicroApps([
  {
    name: 'child1',
    entry: '//localhost:5174',
    container: '#container', // app.vue中加载子应用的div的id
    activeRule: '#/child1', // 访问子应用的路由路径
    props: {
      mag: '给child1发消息' // 主应用向微应用传递参数
    }
  }
])

启动

start({
  prefetch: 'all', // 预加载
  sandbox: {
    experimentalStyleIsolation: true //   开启沙箱模式,实验性方案
  }
})

添加全局异常捕获

addGlobalUncaughtErrorHandler((handler) => {
  console.log('异常捕获', handler)
})

完整示例

import './assets/main.css'
import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'
import router from './router'
import { registerMicroApps, addGlobalUncaughtErrorHandler, start } from 'qiankun'
import naive from 'naive-ui'

const app = createApp(App)
app.use(createPinia())
app.use(router)
app.use(naive)
app.mount('#app')

// 注册子应用
registerMicroApps([
  {
    name: 'child1',
    entry: '//localhost:5174',
    container: '#container', // app.vue中加载子应用的div的id
    activeRule: '#/child1', // 访问子应用的路由路径
    props: {
      mag: '给child1发消息' // 主应用向微应用传递参数
    }
  },
  {
    name: 'child2',
    entry: '//localhost:5175',
    container: '#container', // app.vue中加载子应用的div的id
    activeRule: '#/child2', // 访问子应用的路由路径
    props: {
      mag: '给child2发消息' // 主应用向微应用传递参数
    }
  },
  {
    name: 'xbj',
    entry: '//localhost:8001',
    container: '#container', // app.vue中加载子应用的div的id
    activeRule: '#/xbj', // 访问子应用的路由路径
    props: {
      mag: '给xbj发消息' // 主应用向微应用传递参数
    }
  }
])
// 启动 qiankun
start({
  prefetch: 'all', // 预加载
  sandbox: {
    experimentalStyleIsolation: true //   开启沙箱模式,实验性方案
  }
})
// 添加全局异常捕获
addGlobalUncaughtErrorHandler((handler) => {
  console.log('异常捕获', handler)
})

配置app.vue

添加运行子应用的容器

<div id="container"></div>

子应用

安装 npm install vite-plugin-qiankun

配置vite.config.ts

引入

import qiankun from 'vite-plugin-qiankun'

配置插件

qiankun(`${packName}`, {
  useDevMode: true
})

设置跨域

headers: {
  'Access-Control-Allow-Origin': '*' // 主应用获取子应用时跨域响应头
},

完整示例

import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'
import qiankun from 'vite-plugin-qiankun'

export default defineConfig({
  plugins: [
    vue(),
    vueJsx(),
    qiankun(`child1`, {
      useDevMode: true
    })
  ],
  server: {
    headers: {
      'Access-Control-Allow-Origin': '*' // 主应用获取子应用时跨域响应头
    },
    host: '0.0.0.0'
  },
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
})

配置index.html

将id=“app”，修改为id=“child1-app”，避免与主应用冲突

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" href="/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite App</title>
  </head>
  <body>
    <div id="child1-app"></div>
    <script type="module" src="/src/main.ts"></script>
  </body>
</html>

配置main.ts

引入

import { renderWithQiankun, qiankunWindow, QiankunProps } from 'vite-plugin-qiankun/dist/helper'

子应用初始化，注意路由挂载要挪到这里

let router: any = null
let instance: any = null
let history: any = null
declare global {
  interface Window {
    __POWERED_BY_QIANKUN__: any
    __INJECTED_PUBLIC_PATH_BY_QIANKUN__: any
  }
}
// renderWithQiankun： 为子应用导出一些生命周期函数 供主应用在特殊的时机调用
// qiankunWindow： qiankunWindow.POWERED_BY_QIANKUN 可判断是否在qiankun环境下
const initQianKun = () => {
  renderWithQiankun({
    // bootstrap 只会在微应用初始化的时候调用一次，下次微应用重新进入时会直接调用 mount 钩子，不会再重复触发 bootstrap
    // 通常我们可以在这里做一些全局变量的初始化，比如不会在 unmount 阶段被销毁的应用级别的缓存等
    bootstrap() {
      console.log('bootstrap')
    },
    // 应用每次进入都会调用 mount 方法，通常我们在这里触发应用的渲染方法，也可以接受主应用传来的参数
    mount(_props: any) {
      console.log('mount', _props)
      render(_props)
    },
    // 应用每次 切出/卸载 会调用的unmount方法，通常在这里我们会卸载微应用的应用实例
    unmount(_props: any) {
      console.log('销毁child1', _props)
      unmountApp()
    },
    update: function (props: QiankunProps): void | Promise<void> {
      console.log('update')
    }
  })
}

function render(props: any = {}) {
  instance = createApp(App)
  // 将props挂载到全局上，用于主子应用的交互
  instance.config.globalProperties.$sonProps = props
  history = createWebHashHistory(qiankunWindow.__POWERED_BY_QIANKUN__ ? '#/child1' : '/')
  // 注册路由
  router = createRouter({
    history,
    routes
  })
  instance.use(router)
  instance.use(createPinia())
  instance.mount(props ? props.container.querySelector('#child1-app') : '#child1-app')
  if (qiankunWindow.__POWERED_BY_QIANKUN__) {
    console.log('我正在作为子应用运行。。。')
  }
}
const unmountApp = () => {
  instance.unmount()
  instance._container.innerHTML = ''
  instance = null
  history.destroy() // 不卸载router会导致其他应用路由失败
  router = null
}
// 判断是否为乾坤环境，否则会报错iqiankun]: Target container with #subAppContainerVue3 not existed while subAppVue3 mounting!
qiankunWindow.__POWERED_BY_QIANKUN__ ? initQianKun() : render(null)