当前位置:首页 » 《随便一记》 » 正文

微前端-qiankun:vue3-vite 接入 vue3-vite

20 人参与  2024年02月17日 17:36  分类 : 《随便一记》  评论

点击全文阅读


一、背景

主应用:vue3、vite

主项目接入qiankun

子应用:vue3、webpack

二、代码-接入子应用

2.1、安装vite-plugin-qiankun(qiankun官方不支持vite)需要安装插件

pnpm add vite-plugin-qiankun

2.2、vite.config.ts

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'// https://vitejs.dev/config/export default defineConfig({  plugins: [    vue(), vueJsx(),    qiankun('vue3', {      useDevMode: true    })  ],  server:{    headers: {      'Access-Control-Allow-Origin': '*', // 主应用获取子应用时跨域响应头    },  },  resolve: {    alias: {      '@': fileURLToPath(new URL('./src', import.meta.url))    }  }})

2.3、main.ts

import { createApp } from 'vue'import { createPinia } from 'pinia'import { renderWithQiankun, qiankunWindow, QiankunProps } from 'vite-plugin-qiankun/dist/helper'import App from './App.vue'import router from './router'import './assets/main.css'const app = createApp(App)app.use(createPinia())app.use(router)// app.mount('#app')// 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.container)        },        // 应用每次 切出/卸载 会调用的unmount方法,通常在这里我们会卸载微应用的应用实例        unmount(_props: any) {            console.log('unmount', _props);        },        update: function (props: QiankunProps): void | Promise<void> {            console.log('update');        }    });}const render = (container) => {    // 如果是在主应用的环境下就挂载主应用的节点,否则挂载到本地    const appDom = container ? container : "#app"    app.mount(appDom)}// 判断是否为乾坤环境,否则会报错iqiankun]: Target container with #subAppContainerVue3 not existed while subAppVue3 mounting!qiankunWindow.__POWERED_BY_QIANKUN__ ? initQianKun() : render(null)

2.4、访问微前端应用,访问成功。

三、欢迎交流指正,关注我,一起学习。


点击全文阅读


本文链接:http://zhangshiyu.com/post/68859.html

<< 上一篇 下一篇 >>

  • 评论(0)
  • 赞助本站

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

关于我们 | 我要投稿 | 免责申明

Copyright © 2020-2022 ZhangShiYu.com Rights Reserved.豫ICP备2022013469号-1