vite-plugin-qiankun是一个用于在微前端中集成qiankun的vite插件,它允许我们在同一页面中同时运行多个子应用,实现应用的解耦和团队协作。然而,由于各个子应用可能使用相同的CSS类名或样式,这就可能导致样式污染。 vite-plugin-qiankun工作原理 vite-plugin-qiankun通过自动化分包、公共依赖、沙箱隔离等核心功能,实现了微...
Github上有一名开源作者开发了一款Vite插件叫vite-plugin-qiankun,通过这个插件可以在qiankun下走通这两种模式。甚至保留了vite构建模块的优势 修改Vite.config.js 2. 修改子应用的main.ts,将生命周期mount、bootstrap、unmount等通过插件函数renderWithQiankun在其中暴露完成。其他配置与基于webpack构建的子应用相同 ⏰...
// vite.config.tsimportqiankunfrom'vite-plugin-qiankun';exportdefault{// 这里的 'myMicroAppName' 是子应用名,主应用注册时AppName需保持一致plugins:[qiankun('myMicroAppName')],// 生产环境需要指定运行域名作为basebase:'http://xxx.com/'} ...
但是我们 import('xx') 这段代码里面的内容是没有被 qiankun 劫持的,所以我们 js 没有被劫持,自然 js 中动态加载 css 也不会被劫持。 如果css 没被劫持,就会泄漏,从而影响其他子应用样式,js 没被劫持,也会影响到其他子应用。 @vitejs/plugin-legacy ,我们使用 vite 提供的这个包来打包应用。 // dist/in...
Github上有一名开源作者开发了一款Vite插件叫vite-plugin-qiankun,通过这个插件可以在qiankun下走通这两种模式。甚至保留了vite构建模块的优势 修改Vite.config.js 修改子应用的main.ts,将生命周期mount、bootstrap、unmount等通过插件函数renderWithQiankun在其中暴露完成。其他配置与基于webpack构建的子应用相同 ...
"vite-plugin-qiankun": "1.0.10", "vue-tsc": "^0.40.7" "vite": "3.0.9", "@vitejs/plugin-vue": "^1.6.0", "vue": "^3.2.37", "vue-router": "^4.1.3", vue项目入口文件main.ts : import { createApp } from 'vue'
import "./qiankun" 在App.vue挂载微应用节点 代码语言:javascript 复制 微应用micro-vue-app(vue3+vite) qiankun目前是不支持vite的,需要借助插件完成 安装vite-plugin-qiankun 代码语言:javascript 复制 npm install vite-plugin-qiankun 修改vite.config.js 代码语言:javascript 复制 import { defineConfig }...
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})], ...
import{createApp}from'vue'importAppfrom'./App.vue'import{createRouter,createWebHashHistory}from'vue-router'importroutesfrom'./router'import'./public-path.js'import{renderWithQiankun,qiankunWindow}from'vite-plugin-qiankun/dist/helper'// 通过renderWithQiankun导出import{mount,unmount,bootstrap,update...
vue-cli + qiankun 老项目构建到 vite + qiankun 安装vite 的依赖后,并配置基础的 vite.config.js 后,并修改 script 脚本,vite build 后我们会发现页面是空白,这个时候原因是 public 的 index.html 需要迁移到根目录。 由于老项目,会存在大量 require, vite 是只支持 esm,我们可以使用vite-plugin-commonjs插...