vue乾坤微前端项目
1、主应用
- 安装乾坤
npm i qiankun -S- 注册微应用并启动：
import { registerMicroApps, start } from 'qiankun';//设置两个微应用
registerMicroApps([{name: 'vue1', //要跟package.json中的name保持一致entry: '//localhost:8081', //本地就这么写container: '#container', //主应用idactiveRule: '/app-vue1', //这个值必须跟子应用中路由的base一致},{name: 'vue2',entry: '//localhost:8082',container: '#container2', //可以在主应用的其他div上挂在微应用activeRule: '/app-vue2',}
]);
// 启动 qiankun
start();2、微应用
- 在
src目录新增public-path.js
//public-path.jsif (window.__POWERED_BY_QIANKUN__) {__webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__;
}- 设置
history模式路由的base
//router.jsconst router = new VueRouter({base: window.__POWERED_BY_QIANKUN__ ? '/app-vue1' : '', //base中的'/app-vue1'要和主应用中的activeRule一致mode: 'history', //建议使用history模式routes: baseRoutes //子应用路由地址
}) 修改main.js入口文件
//main.jsimport './public-path';
import Vue from 'vue';
import VueRouter from 'vue-router';
import App from './App.vue';
import routes from './router';
import store from './store';Vue.config.productionTip = false;let router = null;
let instance = null;
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('#datacenter') : '#datacenter'); //此处的#datacenter要跟index.html中的id保持一致
}// 独立运行时
if (!window.__POWERED_BY_QIANKUN__) {render();
}export async function bootstrap() {console.log('[vue] vue app bootstraped');
}
export async function mount(props) {console.log('[vue] props from main framework', props);render(props);
}
export async function unmount() {instance.$destroy();instance.$el.innerHTML = '';instance = null;router = null;
}修改index.html中的#app
<!DOCTYPE html>
<html lang=""><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1.0"><link rel="icon" href="<%= BASE_URL %>favicon.ico"><title><%= htmlWebpackPlugin.options.title %></title></head><body><noscript><strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><!-- 避免id冲突，修改#app --><div id="datacenter"></div></body>
</html>
修改vue.config.js配置
//vue.config.jsconst { name } = require('./package'); //从package.json中获取name
module.exports = {devServer: {headers: {'Access-Control-Allow-Origin': '*',},},configureWebpack: {output: {library: `${name}-[name]`, // 微应用的包名，这里与主应用中注册的微应用名称一致libraryTarget: 'umd', // 把微应用打包成 umd 库格式jsonpFunction: `webpackJsonp_${name}`, // 按需加载相关，设置为 webpackJsonp_微应用名称 即可},},
};相关文章：
vue乾坤微前端项目
1、主应用 安装乾坤 npm i qiankun -S 注册微应用并启动： import { registerMicroApps, start } from qiankun;//设置两个微应用 registerMicroApps([{name: vue1, //要跟package.json中的name保持一致entry: //localhost:8081, //本地就这么写container: #cont…...
大语言模型比武
今年随着 ChatGPT 的流行，并在各个领域有一定程度生产级别的应用。国内外也掀起了一股大语言模型浪潮，各大厂商都推出了自己的大语言模型，阿里推出了 通义千问，腾讯推出了 Hunyuan，亚马逊云推出了 Titan，大…...
王道数据结构第五章二叉树的遍历第13题
目录 解题思路 宏定义 二叉树定义 栈定义 实现函数 测试代码 测试结果...
微服务的发展历程的详细说明及每个阶段主流的架构和组件
微服务的发展历程的详细说明及每个阶段主流的架构和组件如下： 一、微服务的发展历程： 起始阶段：这个阶段主要是面向服务的架构（SOA）的兴起。此时，企业开始尝试将单体应用拆分为多个服务，但此时…...
2023年眼镜行业分析（京东眼镜销量数据分析）：市场规模同比增长26%，消费需求持续释放
随着我国经济的不断发展，电子产品不断普及，低龄及老龄人口的用眼场景不断增多，不同年龄阶段的人群有不同的视力问题，因此，视力问题人口基数也随之不断加大，由此佩戴眼镜的人群也不断增多。 同时，…...
基础课26——业务流程分析方法论
基础课25中我们提到业务流程分析方法包括以下几种： 价值链分析法：主要是找出或设计出哪些业务能够使得客户满意，实现客户价值最大化的业务流程。要进行价值链分析的时候可以从企业具体的活动进行细分，细分的具体方面可以从生产指…...
【数字图像处理-TUST】实验二-图像噪声生成与滤波降噪
一，题目 读入一幅图像使用两种以上的方法向图像中分别添加噪声输出一幅二值图像，背景为黑色，噪声区域为白色使用三种滤波方法对上述添加了噪声的图像进行降噪处理输出降噪处理后的结果图像 二，实验原理 采用了两种方法添加了噪…...
bilibili快速升满级(使用Docker 容器脚本)
部署bilibili升级运行容器脚本 docker run --name"bili" -v /bili/Logs:/app/Logs -e Ray_DailyTaskConfig__Cron"30 9 * * *" -e Ray_LiveLotteryTaskConfig__Cron"40 9 * * *" -e Ray_UnfollowBatchedTaskConfig__Cron"…...
Android 13.0 Settings主页面去掉FocusRecyclerView相关功能
1.前言 在13.0的系统rom产品定制化开发中，在系统Settings主页面的主菜单中，在测试某些功能的时候，比如开启护眼模式和改变系统密度会在主菜单第一项的网络菜单头部增加 自定义您的设备和设置护眼模式时间安排 等等相关的设置模块 这对于菜单布局显示相当不美观，所以根据系…...
Python（四）字符串
程序员的公众号：源1024，获取更多资料，无加密无套路！ 最近整理了一波电子书籍资料，包含《Effective Java中文版 第2版》《深入JAVA虚拟机》，《重构改善既有代码设计》，《MySQL高性能-第3版》&…...
WPF中ElementName与RelativeSource绑定的局限性以及对策
完全来源于十月的寒流，感谢大佬讲解 <Window x:Class"Test_01.MainWindow"xmlns"http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x"http://schemas.microsoft.com/winfx/2006/xaml"xmlns:d"http://schem…...
基于PHP语言的会员系统搭建（Docker版）
1、操作系统 准备： ubuntu22机器 基础：docker:【精选】Docker微服务-基础_v2/_catalog-CSDN博客 2、安装Docker # Add Dockers official GPG key: sudo apt-get update sudo apt-get install ca-certificates curl gnupg sudo install -m 0755 -d /etc/…...
文件改名：一次性解决文件名混乱，批量重命名技巧
在日常生活和工作中，我们经常会遇到文件名混乱的问题，例如文件名重复、格式不统一或者文件名错误等。这些问题不仅会给我们带来查找和使用上的困扰，还会影响我们的工作效率。为了解决这些问题，我们可以使用批量重命名技巧…...
app自动化测试——capability 配置参数解析
一、Capability 简介 功能：配置 Appium 会话，告诉 Appium 服务器需要自动化的平台的应用程序 形式：键值对的集合，键对应设置的名称，值对应设置的值 主要分为三部分 公共部分 ios 部分 android 部分 二、Session Appi…...
数仓面经大框架
1.计算机及编程基础： 操作系统：进程、线程等 数据结构：算法题 计算机网络：分层等 Linux：常用的指令 MySQL（重点） Java/Python基础 排序算法（快排、归并等） 2.大数…...
C++ explicit关键字的作用
explicit关键字只针带一个参数的构造函数有效 #include <iostream> using namespace std;class A { public:A(int temp) //普通构造函数{a temp;cout << "普通构造函数: a " << a << endl;}A(const A &temp) //拷贝构造函数{a temp.a…...
排序算法之-冒泡
顺序排序算法原理 从头开始遍历未排序数列，遍历时比较相邻的两个元素，前面的大于后面的，则双方交换位置，一直比较到末尾，这样最大的元素会出现在末尾，接着再依次从头开始遍历剩余未排序的元素，…...
【微服务】API治理发展历史与未来趋势
目录 一、前言 二、API治理的价值和意义 2.1 API治理概念 2.2 API治理价值和意义 2.2.1 提升团队协同效率 2.2.2 降低产品运维成本 2.2.3 识别和降低系统的外部风险 2.2.4 提供更多的拓展性 三、API生命周期管理 编辑 3.1 规划阶段 3.2 开发阶段 3.3 测试阶段 3…...
TikTok shop美国小店适合哪些人做？附常见运营问题解答
一、Tiktok shop小店分类 大家都知道，美国小店可以分为5 种： 美国本土个人店: 最灵活，有扶持政策；美国法人企业店：要求高，有扶持政策；美国公司中国人占股店 (ACCU店) : 权重相对低，…...
[OS]11.9.2023 中断
中断向量表 CPU的设计者必须在中断信息和其处理程序的入口地址之间建立某种联系，使得CPU根据中断信息可以找到要执行的处理程序。 中断信息中包含有标识中断源的类型码。根据CPU的设计，中断类型码的作用就是用来定位中断处理程序。 比如CPU 根据中断类型…...
AI驱动的高可控性3D资产生成：从扩散模型到实战应用
1. 项目概述：从“模拟”到“创造”的AI新范式最近在AI生成内容领域，一个名为“sim”的项目在开发者社区里引起了不小的讨论。这个由simstudioai团队开源的项目，其核心定位并非我们通常理解的“仿真模拟”，而是一个专注于高质量、高…...
导航参数的精细化管理
在React Native应用中，导航是用户体验的一个关键部分，尤其是在处理多屏幕数据传递时，如何管理和区分不同的数据源显得尤为重要。本文将通过一个实际的例子来展示如何通过精细化管理导航参数，解决数据源区分的问题。 问题背景 假设我们有一个应用，包含四个屏幕：Home、Se…...
LLM应用开发工具全景指南：从RAG到智能体的高效选型与实践
1. 项目概述与核心价值最近在折腾大语言模型（LLM）应用开发时，我遇到了一个非常典型的问题：想法很多，工具很杂。想给模型加个联网搜索功能，发现 LangChain 和 LlamaIndex 都能做，但哪个更适合我的…...
Python单变量函数优化方法与工程实践
1. 单变量函数优化基础概念 单变量函数优化是数值计算中最基础也最常用的技术之一，它指的是在给定区间内寻找使目标函数取得极值（最大值或最小值）的输入值。在实际工程和科研中，约60%的参数调优问题都可以转化为单变量优化问题。 …...
LizzieYzy：你的AI围棋教练，让复盘学习变得如此简单
LizzieYzy：你的AI围棋教练，让复盘学习变得如此简单 【免费下载链接】lizzieyzy LizzieYzy - GUI for Game of Go 项目地址: https://gitcode.com/gh_mirrors/li/lizzieyzy 还在为围棋复盘找不到问题而烦恼吗？还在为提升棋力缺乏专业指…...
Flask模板引擎 Jinja2 进阶：宏定义、过滤器与模板继承的复用
更多内容请见： 《Python Web项目集锦》 - 专栏介绍和目录 文章目录 第一章：打破复制的诅咒——为什么我们需要模板复用？ 第二章：组件化思维的萌芽——深入理解宏 2.1 宏的基础语法 2.2 宏的进阶：处理动态属性与默认值 2.3 宏的终极形态：导入与跨文件共享 第三章：数据整容…...
【2024边缘部署黄金标准】：为什么92%的IoT平台已弃用传统容器，全面转向Docker WASM？
更多请点击： https://intelliparadigm.com 第一章：Docker WASM边缘部署的演进逻辑与核心价值 随着边缘计算场景日益复杂，传统容器运行时在资源开销、启动延迟和沙箱安全性方面面临瓶颈。WASM（WebAssembly）凭借其轻量级…...
终极指南：3步免费解锁Cursor AI编程工具的完整Pro功能
终极指南：3步免费解锁Cursor AI编程工具的完整Pro功能 【免费下载链接】cursor-free-vip [Support 0.45]（Multi Language 多语言）自动注册 Cursor Ai ，自动重置机器ID ， 免费升级使用Pro 功能: Youve reached your tri…...
告别视频质量损失：LosslessCut如何用无损剪辑技术重塑视频处理体验
告别视频质量损失：LosslessCut如何用无损剪辑技术重塑视频处理体验 【免费下载链接】lossless-cut The swiss army knife of lossless video/audio editing 项目地址: https://gitcode.com/gh_mirrors/lo/lossless-cut 在数字内容创作蓬勃发展的今天…...
闪电网络通道余额验证：TEE与zkTLS的联合解决方案
1. 闪电网络通道余额验证的技术挑战在闪电网络（Lightning Network）生态中，通道余额验证一直是个棘手的问题。作为比特币的第二层扩容方案，闪电网络通过建立双向支付通道实现近乎即时、低成本的交易。但这也带来了一个根本性矛盾&a…...