Github上有一名开源作者开发了一款Vite插件叫vite-plugin-qiankun,通过这个插件可以在qiankun下走通这两种模式。甚至保留了vite构建模块的优势 修改Vite.config.js 2. 修改子应用的main.ts,将生命周期mount、bootstrap、unmount等通过插件函数renderWithQiankun在其中暴露完成。其他配置与基于webpack构建的子应用相同 ⏰...
我们打开 vite-legacy-polyfill 这个文件,发现 vite polyfill 之后的代码是被 SystemJS 加载的,咱们 import('xx') 会被转换成 System.import('xx')。 System.import 简而言之就是使用 document.createElement('script') 创建脚本,然后 append 到 head 中,加载完再删除。 因为polyfill 代码被 qiankun 劫持了,所以...
import store from './store/index' import { renderWithQiankun, qiankunWindow } from 'vite-plugin-qiankun/dist/helper' import { createRouter, createWebHistory } from 'vue-router' let router: any = null let app: any = null let history: any = null function render(props?) { let container...
因为es模块加载与qiankun的实现方式有些冲突,所以使用本插件实现的qiankun微应用里面没有运行在js沙盒中。所以在不可避免需要设置window上的属性时,尽量显示的操作js沙盒,否则可能会对其它子应用产生副作用。qiankun沙盒使用方式 import{qiankunWindow}from'vite-plugin-qiankun/dist/helper';qiankunWindow.customxxx='...
vite-plugin-qiankun 提供了一些公共方法可以直接使用避免了很多麻烦 代码 配置vite.config.ts import{defineConfig}from'vite'importvuefrom'@vitejs/plugin-vue'importqiankunfrom'vite-plugin-qiankun'importpathfrom'path'//! useDevMode = true 时不开启热更新constuseDevMode=true;// https://vitejs.dev/co...
1. 安装vite-plugin-qiankun(qiankun官方不支持vite)需要安装插件 yarn add vite-plugin-qiankun 2. vite.config.js 添加相关配置 import qiankun from 'vite-plugin-qiankun'exportdefaultdefineConfig({ plugins: [ vue(),qiankun('vue3', { useDevMode: true})], ...
vue-cli + qiankun 老项目构建到 vite + qiankun 安装vite 的依赖后,并配置基础的 vite.config.js 后,并修改 script 脚本,vite build 后我们会发现页面是空白,这个时候原因是 public 的 index.html 需要迁移到根目录。 由于老项目,会存在大量 require, vite 是只支持 esm,我们可以使用vite-plugin-commonjs插...
qiankun是一个基于single-spa的微前端实现库。它旨在帮助开发者更简单、无痛地构建一个生产可用的微前端架构系统。在微前端架构中,qiankun起到了核心作用,它允许你将多个独立的前端应用集成到一个主应用中,每个子应用可以独立开发、独立部署,并且使用不同的技术栈。qiankun提供了一套完整的生命周期函数和通信机制,...
// 1. 引入乾坤import qiankun from 'vite-plugin-qiankun' // 2. composePlugins方法中添加qiankun('vue-child', {useDevMode: true}), 重点mainjs配置 参考 import { createApp } from 'vue'import App from './App.vue'import router from './router'// pinia 仓库import { registerStore, useAppS...