一:Vue2 改造主应用 创建方式:vue create vue2-master 1:在vue2项目src 下 撞见qiankun 文件夹 用于注册和启动子应用配置 创建index.js 创建app.js。注册。 name 要和子应用vite.config.js 配置相同。 container 要和 indexView 中id 相同 创建indexView.vue 。用于显示微应用容器 2:在应用main.js 中 引入...
const qiankun = createQiankun({ name: 'main', //主应用的名称 entry: '/', //主应用的入口路径 container: 'app', //主应用的挂载容器 hot: true, //启用热更新 }); ``` 3.在子应用中配置`qiankun`: ```javascript export default { name: 'child', //子应用的名称 entry: '/child', ...
import { registerMicroApps, start } from 'qiankun' registerMicroApps([ { name: 'vue-app', // 必须与微应用注册名字相同 entry: 'http://127.0.0.1:5174', // 入口路径,开发时为微应用所启本地服务,上线时为微应用线上路径 container: '#vue-app-container', // 微应用挂载的节点 activeRule: ...
qiankunWindow}from'vite-plugin-qiankun/dist/helper'// 通过renderWithQiankun导出import{mount,unmount,bootstrap,update}from'./qiankun'constinitQianKun=()=>{// QiankunLifeCyclerenderWithQiankun({mount,boot
首先我们得清楚 vite 为何不兼容 qiankun Qiankun 执行子应用 script 如下是 qiankun 执行子应用代码的地方,可以看到我们子应用的 script 是用 eval 执行的。 // import-html-entryexportfunctionevalCode(scriptSrc,code){constkey=scriptSrc;if(!evalCache[key]){constfunctionWrappedCode=`window.__TEMP_EVAL_FU...
乾坤子应用配置(vue3+vite) vite 接入 需要安装 "vite-plugin-qiankun": "^1.0.15", "qiankun": "^2.10.10", // vite.config.tsnpm install vite vite-plugin-qiankun qiankun --save-dev .env.development .env.production 开发环境读取配置文件路径修改VITE_BASE_URL = /xxx ...
qiankun是一个基于chameleon技术的微前端框架,它能够让多个前端应用共享同一个壳,从而实现了单页面应用的微服务化。通过qiankun,我们可以将一个大型的单页面应用拆分成多个独立的子应用,每个子应用都可以独立开发、部署和升级,而不需要影响整个应用。二、ViteVite是一个基于ES模块的构建工具,它提供了快速的热更新和...
vue(),qiankun('vue3', { useDevMode: true})], server: { ...,headers: {'Access-Control-Allow-Origin': '*', // 主应用获取子应用时跨域响应头}, } }) 3. 入口文件:main.ts中添加 导出生命周期配置以及qiankun环境变量判断 renderWithQiankun: 为子应用导出一些生命周期函数 供主应用在特殊的时...
子应用: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...
请注意,这个示例假定您正在构建一个作为 qiankun 子应用的 Vue 3 + Vite 项目,并且只在生产模式下启用 vite-plugin-qiankun。此外,build.lib 和build.rollupOptions 配置是为了确保子应用可以被 qiankun 正确加载。 请根据您的具体需求调整配置,比如入口文件的路径、库名、需要外部化的依赖等。如果您使用的是不同...