vue+webpack子应用嵌入乾坤框架

首先!不建议用vite,改了两天,无果。

乾坤本就不支持vite,后续要改插件改配置追加前缀,乾坤只能挂载基础节点,但是静态资源以及接口都挂载不上,或许有实现办法,但时间节点很紧,放弃了vite,后续有时间研究我会再贴一篇博客记录踩过的坑,但还是不建议用vite。

后来改造了项目,转而用webpack。

官网:项目实践 - qiankun

照官网配置三五分钟就搞定了,页面正常挂载,api也能正常访问。

值得注意的是render函数:

function render(props = {}) {const { container } = props;router = new VueRouter({base: window.__POWERED_BY_QIANKUN__ ? '/app-vue/' : '/',mode: 'history',routes,});instance = new Vue({router,store,render: (h) => h(App),}).$mount(container ? container.querySelector('#app') : '#app');
}

VueRouter不必要在这里引用,一般来说,项目都会在router文件夹下重新创建一个index.js来处理路由守卫以及拦截的问题,还有一个router.js来专门记录路由,视情况引用即可。

贴出的router只是为了配置base地址,mode以及所有的路由,既而挂载到Vue()上。

还有就是因为三个钩子函数已暴露,所以贴出的base:/app-vue/,可替代成props.routerBase,具体看主应用向子应用发送的键名,这样base配置更为灵活,当然沟通好写死base也同样可以挂载。

以下是main.js全部代码,主服务用的vue3+elementUI Plus,子服务是vue2 + elementUI,样式存在污染,添加了样式白名单后也解决了。

import Vue from 'vue';
import App from '@/App.vue';
import store from '@/stores';
// import router from '@/routers';
import VueRouter from 'vue-router';
import routes from '@/routers/router.js';
import element from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import '@/style/index.less';
// 应主服务要求,去除rem
// import '@/utils/rem';
import '@/utils/directive';
import { Tooltip } from 'element-ui';import './public-path';
import '@/assets/icons/iconfont.css';element.Tooltip.props.openDelay.default = 1000;Vue.config.productionTip = false;let instance = null;
// 初始的document.body.appendChild事件
const originFn = document.body.appendChild.bind(document.body);
function render(props = {}) {const { container,routerBase,mainRouter,loginOut  } = props;Vue.prototype.$baseMainRouter = mainRouterVue.prototype.$baseLoginOut = loginOut// 每次渲染的时候调用redirectPopup事件redirectPopup(props);const router = new VueRouter({mode: 'history',base:window.__POWERED_BY_QIANKUN__ ? routerBase : '/',routes})instance = new Vue({router,store,render: h => h(App),}).$mount(container ? container.querySelector('#app') : '#app');
}// 独立运行时
if (!window.__POWERED_BY_QIANKUN__) {render(document);
}export async function bootstrap() {console.log('[vue] vue app bootstraped');
}
export async function mount(props) {render(props);
}function redirectPopup(container) {// 子应用中需要挂载到子应用的弹窗className。样式class白名单,用子应用的样式。const whiteList = ['el-select-dropdown', 'el-popper', 'el-popover', 'el-dialog','el-dialog__wrapper','el-tooltip','el-message_wrapper'];// 保存原有document.body.appendChild方法const originFn = document.body.appendChild.bind(document.body);// 重写appendChild方法document.body.appendChild = (dom) => {// 根据标记,来区分是否用新的挂载方式let count = 0;whiteList.forEach((x) => {if (dom.className.includes(x)) count++;});if (count > 0 && container.container) {// 有弹出框的时候,挂载的元素挂载到子应用上,而不是主应用的body上container.container.querySelector('#app').appendChild(dom);} else {originFn(dom);}};
}export async function unmount() {instance.$destroy();instance.$el.innerHTML = '';instance = null;instance?.unmount?.()history?.destroy?.()document.body.appendChild = originFn;
}Vue.use(element);
Vue.use(Tooltip);
// new Vue({
//   router,
//   store,
//   render: h => h(App)
// }).$mount('#app')

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/29917.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【AI学习】LLaMA 系列模型的进化(一)

一直对LLaMA 名下的各个模型关系搞不清楚,什么羊驼、考拉的,不知所以。幸好看到两篇综述,有个大致了解,以及SEBASTIAN RASCHKA对LLaMa 3的介绍。做一个记录。 一、文章《Large Language Models: A Survey》中对LLaMa的介绍 论文…

❤【纯干货】Matplotlib总结,任何项目都用得到❤

. . . . . . . . . . . 纯 干 货 . . . . . . . . .Matplotlib 在很多人眼里是无敌的存在,而且可以说是无敌的存在。 走过数据科学的路,路上必然有Matplotlib 的风景在你周围。 如果同一个项目,你的用了matplotlib …

vue脚手架 笔记08

目录 01 vuex的四大辅助函数的使用 mapState使用方式: mapMutations的使用方式: mapGetters的使用方式: mapActions的使用方式: 02 vuex中的模块化 vuex的modules模块化的使用: modules模块化的使用: 01 vuex的四大辅助函数的使用 帮助我们把vuex里面的数据映射到当前组件里…

资料合集|SmartX 虚拟化特性解读、迁移实践与用户案例

面对 VMware 的种种变动,不少用户开始探索新的出路。但对于虚拟化平台这一核心组件的替换,一些用户仍处于观望状态,主要是出于以下担忧: 新的虚拟化平台是否具备与 VMware 虚拟化相当的能力?替代 VMware 虚拟化平台涉…

【微服务网关——负载均衡】

1. 四大负载均衡策略 随机负载 随机挑选目标服务器IP 轮询负载 ABC三台服务器,ABCABC依次轮询 加权负载 给目标设置访问权重,按照权重轮询 一致性hash负载 请求固定URL访问指定IP 2.随机负载均衡 可以通过random函数来随机选择一个ip 2.1 代码实现 …

陶建辉入选 2023 年度“中国物联网行业卓越人物榜”

在这个技术飞速发展的时代,物联网行业作为推动社会进步的重要力量,正在不断地演化和革新。近日,中国智联网生态大会暨“2023 物联之星”年度榜单颁奖典礼在上海浦东举行。现场公布了拥有物联网行业奥斯卡奖之称的 ——“物联之星 2023 中国物…

「51媒体」上海电视台媒体邀约专访怎么做?

传媒如春雨,润物细无声,大家好,我是51媒体网胡老师。 电视台专访通常会对一些热门话题,行业热点,或者新闻焦点,邀请嘉宾进行访谈。企业如果想要在电视台进行专访,通常要有合适的时机和选题。 下…

【面试干货】Java方法重写的规则

【面试干货】Java方法重写的规则 1、Java方法重写的规则2、示例代码3、总结 💖The Begin💖点点关注,收藏不迷路💖 在Java中,方法重写(Overriding)是面向对象编程中的一个核心概念,它…

结硬寨:联想服务器的向前之路

曾国藩曾经将自己的战略思想,总结为“结硬寨,打呆仗”。 这种稳健的策略,往往在真实的产业发展中能收获奇效。我们喜欢听颠覆性的产业创新,却往往忽视稳扎稳打,把每一个优势聚集起来形成整体优势,可能才是市…

在Python项目中自定义日志工具

在Python项目中自定义日志工具 日志记录是软件开发中的一个关键部分,它可以帮助开发人员调试代码、监控运行状况以及记录重要事件。在Python中,logging 模块提供了强大的日志记录功能。本文将介绍如何创建一个日志工具,使其能够同时将日志输…

通义灵码使用笔记

通义灵码使用笔记 通义灵码使用指南代码智能生成⾏级/函数级实时续写自然语言生成代码生成单元测试、代码优化建议、代码注释、代码解释选中代码后,一键触发功能 通义灵码使用指南 通义灵码是一种智能编码助手,可以在你进行编码工作时,为你提…

【ajax基础02】URL详解

目录 一:什么是URL 二:URL组成 协议 ​编辑 域名(在url中必须写) 资源路径 三:URL查询参数 定义: 语法格式: 如何利用axios实现特定数据查询: 语法格式: 案例&#xff1a…

springboot-自动配置

一、自动配置的原理 Spring Boot 的自动配置基于以下几个核心概念: 条件注解 (Conditional Annotations):Conditional 系列注解用于根据特定条件判断是否加载某个配置类或 Bean。 自动配置类 (Auto-configuration Classes):这些类通过 META-…

【耐水好】强耐水UV胶水它的粘接强度和普通UV胶水比如何呢

【耐水好】强耐水UV胶水它的粘接强度和普通UV胶水比如何呢 强耐水UV胶水的粘接强度与普通UV胶水相比,具有显著的优势。以下是详细的比较和归纳: 固化方式: 两者都是通过紫外线(UV)照射进行固化,但强耐水UV…

2024年全球架构师峰会(ArchSummit深圳站)

前言 ArchSummit全球架构师峰会是极客邦科技旗下InfoQ中国团队推出的重点面向高端技术管理者、架构师的技术会议,54%参会者拥有8年以上工作经验。 ArchSummit聚焦业界强大的技术成果,秉承“实践第一、案例为主”的原则,展示先进技术在行业中的…

程序员学CFA——经济学(三)

经济学(三) 总产出、价格水平和经济增长总产出、总收入和总支出总产出、总收入和总支出的概念及联系国内生产总值国内生产总值(GDP)的定义GDP的衡量方法GDP的相关概念GDP的核算方法 总需求、总供给和市场均衡总需求总需求及其假设…

React.FC`<ChildComponentProps>`解释

代码场景 ParentComponent.tsx import React, { useState } from react; import ChildComponent from ./ChildComponent;function ParentComponent() {const [childData, setChildData] useState<string>();const handleChildData (data: string) > { // 可以直接…

MyBatis的缓存功能总结

MyBatis的缓存功能总结 大家好&#xff0c;我是免费搭建查券返利机器人省钱赚佣金就用微赚淘客系统3.0的小编&#xff0c;也是冬天不穿秋裤&#xff0c;天冷也要风度的程序猿&#xff01; 1. 缓存概述 MyBatis的缓存功能是为了提高数据库访问效率而设计的。通过缓存&#xff…

Netty中Reactor线程的运行逻辑

Netty中的Reactor线程主要干三件事情&#xff1a; 轮询注册在Reactor上的所有Channel感兴趣的IO就绪事件。 处理Channel上的IO就绪事件。 执行Netty中的异步任务。 正是这三个部分组成了Reactor的运行框架&#xff0c;那么我们现在来看下这个运行框架具体是怎么运转的~~ 这…

【八股系列】怎么处理项目中的异常捕获行为?(js)

文章目录 1. 基本的try-catch-finally结构2. 全局异常处理3. 自定义错误类4. 使用Promise的catch5. 异步函数中的try-catch6. 记录日志7. 用户友好的错误提示 在 JavaScript项目中&#xff0c;合理地处理异常捕获对于提高程序的健壮性和用户体验至关重要。以下是一些关键实践和…