1、此实例包含有一个qiankun-main主应用和qiankun-vue-child子应用。【可以包含若干个子应用,这里只建立一个vue子应用进行演示】 2、主应用跨域访问子应用系统 3、qiankun-main主应用运行端口8085,qiankun-vue-child子应用运行端口8083。 STEP1:创建主应用【qiankun-main】 新建主应用 vuecreateqiankun-main 2. ...
vue(),qiankun('vue3', { useDevMode: true})], server: { ...,headers: {'Access-Control-Allow-Origin': '*', // 主应用获取子应用时跨域响应头}, } }) 3. 入口文件:main.ts中添加 导出生命周期配置以及qiankun环境变量判断 renderWithQiankun: 为子应用导出一些生命周期函数 供主应用在特殊的时...
// 在主应用中添加子应用路由页面,主应用router/index.ts的router中加入:{ path:'/child1/:pathMatch(.*)', name:'child1', component: () =>import('../views/app1.vue'), } // app1.vue<template></template>import{ onMounted }from'vue'import{ start }from'qiankun';onMounted(() =>{start...
importeventBusfrom'./eventBus/index'registerMicroApps([{name:'vue3-element-admin',entry:'//localhost:3001',container:'#container',activeRule:'/#/vue3-element-admin',props:{store,eventBus}}],) 第三步:在子应用的main.js文件中接收这个store,并通过createApp()的第二个参数props,将主应用的这个e...
简介: 微前端-qiankun:vue3-vite 接入 vue3-webpack 一、背景 主应用:vue3、vite 主项目接入qiankun 子应用:vue3、webpack 二、代码-接入子应用 2.1、src/public-path.js if (window.__POWERED_BY_QIANKUN__) { __webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__; } 2.2、...
在使用qiankun结合Vue3主项目和Umi4子项目时,遇到路由跳转至子项目后主项目提示 404 的问题,通常是由于路由配置或者qiankun的生命周期钩子没有正确处理导致的。以下是一些可能的解决步骤: 确保子应用的base配置正确 在Umi 中,可以通过配置base来设置应用的公共路径。当子应用作为微前端的一部分时,这个base应该设置为空...
通常,qiankun 的配置可能只需要访问 mode 来确定是否为生产环境或其他环境应用不同的配置。因此,您可以在现有的 export default 函数中处理 qiankun 相关的配置。 这里是一个合并后的 vite.config.ts 示例: // https://vitejs.dev/config/ import { defineConfig } from 'vite' import vue from '@vitejs/...
1、主应用:依然沿用之前Vue2搭建的主应用 2、子应用:Vue3+vite 直接使用qiankun改造的问题 无法正确加载子应用,这个主要和vite构建方式有关 子应用改造(通过vite-plugin-qiankun插件改造) 1、安装 npm i vite-plugin-qiankun --save 2、vite.config.ts 改造 ...
vue', // 当访问路由为 /micro-vue 时加载微应用 props: { msg: "我是来自主应用的值-vue" // 主应用向微应用传递参数 } }, { name: 'react-app', entry: 'http://127.0.0.1:5175', container: '#react-app-container', activeRule: '/micro-react', props: { msg: "我是来自主应用的值-...