Github上有一名开源作者开发了一款Vite插件叫vite-plugin-qiankun,通过这个插件可以在qiankun下走通这两种模式。甚至保留了vite构建模块的优势 修改Vite.config.js 2. 修改子应用的main.ts,将生命周期mount、bootstrap、unmount等通过插件函数renderWithQiankun在其中暴露完成。其他配置与基于webpack构建的子应用相同 ⏰...
1.安装依赖:在vite项目根目录下执行命令`npm install qiankun`安装qiankun依赖。 2.配置微应用:在vite项目中创建一个新的文件,如`sub-app.js`,用于配置微应用。在该文件中,需要导出一个微应用实例,可通过`initGlobalState`方法来创建一个全局状态管理对象,并配置微应用的基本信息,如路由、静态资源地址等。 3....
专利摘要显示，本申请实施例涉及前端开发应用技术领域，公开了一种基于vite和qiankun的项目处理方法，该处理方法包括：获取vite的入口文件，入口文件为非模块引入；通过vite提供的插件将应用文件打包生成新的构建文件，新的构建文件包含经过转换和降级处理之后的代码；根据新的构建文件确认qiankun的js沙箱功能完整，实现vite与...
要在Vite项目中使用`qiankun`,可以按照以下步骤进行操作: 1.安装`qiankun`: ```bash npm install qiankun ``` 2.在主应用中引入`qiankun`: ```javascript import { createQiankun } from'qiankun'; import App from './'; const qiankun = createQiankun({ name: 'main', //主应用的名称 entry:...
qiankun是一个基于single-spa的微前端实现库。它旨在帮助开发者更简单、无痛地构建一个生产可用的微前端架构系统。在微前端架构中,qiankun起到了核心作用,它允许你将多个独立的前端应用集成到一个主应用中,每个子应用可以独立开发、独立部署,并且使用不同的技术栈。qiankun提供了一套完整的生命周期函数和通信机制,...
首先我们得清楚 vite 为何不兼容 qiankun Qiankun 执行子应用 script 如下是 qiankun 执行子应用代码的地方,可以看到我们子应用的 script 是用 eval 执行的。 // import-html-entryexportfunctionevalCode(scriptSrc,code){constkey=scriptSrc;if(!evalCache[key]){constfunctionWrappedCode=`window.__TEMP_EVAL_FU...
2. 微前端框架qiankun与Vite 通过上文,我们了解到使用Vite的优势。那是否qiankun支持基于vite构建的子应用集成呢?这里我们以vue3+vite的demo为例 会遇到以下两个需要解决的问题: 开发模式:在开发环境下,如果我们使用 vite 来构建vue3子应用,基于vite的构建机制,会在子应的html的入口文件的script标签上携带type=mod...
金融界2024年10月21日消息,国家知识产权局信息显示,深圳市讯方技术股份有限公司申请一项名为“一种基于vite和qiankun的项目处理方法”的专利,公开号CN 118760469 A,申请日期为2024年6月。 专利摘要显示,本申请实施例涉及前端开发应用技术领域,公开了一种基于vite和qiankun的项目处理方法,该处理方法包括:获取vite的入口...
一、qiankunqiankun是一个基于chameleon技术的微前端框架,它能够让多个前端应用共享同一个壳,从而实现了单页面应用的微服务化。通过qiankun,我们可以将一个大型的单页面应用拆分成多个独立的子应用,每个子应用都可以独立开发、部署和升级,而不需要影响整个应用。二、ViteVite是一个基于ES模块的构建工具,它提供了快速的...
在使用qiankun和vite一起时,可能会遇到一些问题,导致js沙箱隔离失效。以下是一些可能的原因: 环境兼容性:qiankun和vite可能在不同的环境中表现不同。如果它们在同一个项目中一起使用,可能会因为环境差异而导致隔离失效。 资源加载顺序:qiankun和vite可能对资源的加载顺序有不同的要求。如果资源加载顺序不正确,可能会...