当前位置： 首页 > news >正文

vue乾坤微前端项目

news 2026/4/27 5:54:24

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 注册微应用并启动&#xff1a; import { registerMicroApps, start } from qiankun;//设置两个微应用 registerMicroApps([{name: vue1, //要跟package.json中的name保持一致entry: //localhost:8081, //本地就这么写container: #cont…...

编程日记 2023/11/9 20:35:46

大语言模型比武

今年随着 ChatGPT 的流行&#xff0c;并在各个领域有一定程度生产级别的应用。国内外也掀起了一股大语言模型浪潮&#xff0c;各大厂商都推出了自己的大语言模型&#xff0c;阿里推出了 通义千问&#xff0c;腾讯推出了 Hunyuan&#xff0c;亚马逊云推出了 Titan&#xff0c;大…...

编程日记 2023/11/9 20:34:41

王道数据结构第五章二叉树的遍历第13题

目录 解题思路 宏定义 二叉树定义 栈定义 实现函数 测试代码 测试结果...

编程日记 2023/11/9 20:33:39

微服务的发展历程的详细说明及每个阶段主流的架构和组件

微服务的发展历程的详细说明及每个阶段主流的架构和组件如下&#xff1a; 一、微服务的发展历程&#xff1a; 起始阶段&#xff1a;这个阶段主要是面向服务的架构&#xff08;SOA&#xff09;的兴起。此时&#xff0c;企业开始尝试将单体应用拆分为多个服务&#xff0c;但此时…...

编程日记 2023/11/9 20:32:38

2023年眼镜行业分析（京东眼镜销量数据分析）：市场规模同比增长26%，消费需求持续释放

随着我国经济的不断发展&#xff0c;电子产品不断普及&#xff0c;低龄及老龄人口的用眼场景不断增多&#xff0c;不同年龄阶段的人群有不同的视力问题&#xff0c;因此&#xff0c;视力问题人口基数也随之不断加大&#xff0c;由此佩戴眼镜的人群也不断增多。 同时&#xff0c…...

编程日记 2023/11/9 20:31:37

基础课26——业务流程分析方法论

基础课25中我们提到业务流程分析方法包括以下几种&#xff1a; 价值链分析法&#xff1a;主要是找出或设计出哪些业务能够使得客户满意&#xff0c;实现客户价值最大化的业务流程。要进行价值链分析的时候可以从企业具体的活动进行细分&#xff0c;细分的具体方面可以从生产指…...

编程日记 2023/11/9 20:30:37

【数字图像处理-TUST】实验二-图像噪声生成与滤波降噪

一&#xff0c;题目 读入一幅图像使用两种以上的方法向图像中分别添加噪声输出一幅二值图像&#xff0c;背景为黑色&#xff0c;噪声区域为白色使用三种滤波方法对上述添加了噪声的图像进行降噪处理输出降噪处理后的结果图像 二&#xff0c;实验原理 采用了两种方法添加了噪…...

编程日记 2023/11/9 20:29:36

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"…...

编程日记 2023/11/9 20:27:33

Android 13.0 Settings主页面去掉FocusRecyclerView相关功能

1.前言 在13.0的系统rom产品定制化开发中，在系统Settings主页面的主菜单中，在测试某些功能的时候，比如开启护眼模式和改变系统密度会在主菜单第一项的网络菜单头部增加 自定义您的设备和设置护眼模式时间安排 等等相关的设置模块 这对于菜单布局显示相当不美观，所以根据系…...

编程日记 2023/11/9 20:26:30

Python（四）字符串

程序员的公众号&#xff1a;源1024&#xff0c;获取更多资料&#xff0c;无加密无套路&#xff01; 最近整理了一波电子书籍资料&#xff0c;包含《Effective Java中文版 第2版》《深入JAVA虚拟机》&#xff0c;《重构改善既有代码设计》&#xff0c;《MySQL高性能-第3版》&…...

编程日记 2023/11/9 20:25:29

WPF中ElementName与RelativeSource绑定的局限性以及对策

完全来源于十月的寒流&#xff0c;感谢大佬讲解 <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…...

编程日记 2023/11/9 20:24:28

基于PHP语言的会员系统搭建（Docker版）

1、操作系统 准备&#xff1a; ubuntu22机器 基础&#xff1a;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/…...

编程日记 2023/11/9 20:22:24

文件改名：一次性解决文件名混乱，批量重命名技巧

在日常生活和工作中&#xff0c;我们经常会遇到文件名混乱的问题&#xff0c;例如文件名重复、格式不统一或者文件名错误等。这些问题不仅会给我们带来查找和使用上的困扰&#xff0c;还会影响我们的工作效率。为了解决这些问题&#xff0c;我们可以使用批量重命名技巧&#xf…...

编程日记 2023/11/9 20:21:23

app自动化测试——capability 配置参数解析

一、Capability 简介 功能&#xff1a;配置 Appium 会话&#xff0c;告诉 Appium 服务器需要自动化的平台的应用程序 形式&#xff1a;键值对的集合&#xff0c;键对应设置的名称&#xff0c;值对应设置的值 主要分为三部分 公共部分 ios 部分 android 部分 二、Session Appi…...

编程日记 2023/11/9 20:20:22

数仓面经大框架

1.计算机及编程基础&#xff1a; 操作系统&#xff1a;进程、线程等 数据结构&#xff1a;算法题 计算机网络&#xff1a;分层等 Linux&#xff1a;常用的指令 MySQL&#xff08;重点&#xff09; Java/Python基础 排序算法&#xff08;快排、归并等&#xff09; 2.大数…...

编程日记 2023/11/9 20:19:21

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…...

编程日记 2023/11/9 20:18:19

排序算法之-冒泡

顺序排序算法原理 从头开始遍历未排序数列&#xff0c;遍历时比较相邻的两个元素&#xff0c;前面的大于后面的&#xff0c;则双方交换位置&#xff0c;一直比较到末尾&#xff0c;这样最大的元素会出现在末尾&#xff0c;接着再依次从头开始遍历剩余未排序的元素&#xff0c;…...

编程日记 2023/11/9 20:17:18

【微服务】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…...

编程日记 2023/11/9 20:15:16

TikTok shop美国小店适合哪些人做？附常见运营问题解答

一、Tiktok shop小店分类 大家都知道&#xff0c;美国小店可以分为5 种&#xff1a; 美国本土个人店: 最灵活&#xff0c;有扶持政策&#xff1b;美国法人企业店&#xff1a;要求高&#xff0c;有扶持政策&#xff1b;美国公司中国人占股店 (ACCU店) : 权重相对低&#xff0c…...

编程日记 2023/11/9 20:14:15

[OS]11.9.2023 中断

中断向量表 CPU的设计者必须在中断信息和其处理程序的入口地址之间建立某种联系&#xff0c;使得CPU根据中断信息可以找到要执行的处理程序。 中断信息中包含有标识中断源的类型码。根据CPU的设计&#xff0c;中断类型码的作用就是用来定位中断处理程序。 比如CPU 根据中断类型…...

编程日记 2023/11/9 20:13:14

Linux 0.11源码深度解析：kernel/chr_drv/tty_io.c —— 终端I/O的控制中枢与行规约引擎

一、文件概述&#xff1a;用户与内核的交互桥梁tty_io.c​ 位于 /kernel/chr_drv目录&#xff0c;是Linux 0.11中终端&#xff08;Terminal/TTY&#xff09;输入输出的核心实现。在1991年的命令行时代&#xff0c;终端是用户与计算机交互的唯一窗口。这个文件负责管理键盘输入的…...

编程新知 2026/4/27 5:49:49

多语言语义匹配模型：量化部署的架构决策与性能优化实战

多语言语义匹配模型&#xff1a;量化部署的架构决策与性能优化实战 【免费下载链接】paraphrase-multilingual-MiniLM-L12-v2 项目地址: https://ai.gitcode.com/hf_mirrors/ai-gitcode/paraphrase-multilingual-MiniLM-L12-v2 【技术挑战分析】多语言AI模型的生产部署…...

编程新知 2026/4/27 5:14:40

UE5新手避坑指南：手把手教你从零集成Cesium for Unreal插件（含离线数据配置思路）

UE5实战&#xff1a;Cesium for Unreal插件深度集成与避坑手册 第一次打开UE5引擎时&#xff0c;那个闪烁着金属光泽的启动器界面总让人充满期待——直到你尝试集成Cesium for Unreal插件时遇到各种报错窗口。作为地理空间可视化领域的黄金标准&#xff0c;Cesium与虚幻引擎的结…...

编程新知 2026/4/27 4:04:53

量子纠缠与贝尔态：原理、实验验证与应用

1. 量子纠缠与贝尔态基础解析 量子纠缠是量子力学最令人着迷的现象之一&#xff0c;它描述了两个或多个量子系统之间存在的非经典关联。这种关联超越了经典物理的范畴&#xff0c;即使将纠缠粒子分隔到宇宙两端&#xff0c;对一个粒子的测量仍会瞬间影响另一个粒子的状态。 1…...

编程新知 2026/4/27 3:09:07

2026大学生学习数据分析的价值分析

一、数据分析在2026年大学生职业发展中的重要性数据驱动决策成为各行业核心趋势企业对数据分析人才的需求持续增长数据分析技能提升跨行业竞争力二、2026年数据分析领域的核心技能需求编程语言&#xff1a;Python、R、SQL的掌握程度数据可视化工具&#xff1a;Tableau、Power B…...

编程新知 2026/4/27 2:50:00

2.7 受保护进程：那些连 Sysinternals 都“不好惹”的进程

&#x1f525;个人主页&#xff1a;杨利杰YJlio❄️个人专栏&#xff1a;《Sysinternals实战教程》《Windows PowerShell 实战》《WINDOWS教程》《IOS教程》《微信助手》《锤子助手》 《Python》 《Kali Linux》 《那些年未解决的Windows疑难杂症》&#x1f31f; 让复杂的事情更…...

编程新知 2026/4/27 2:47:58

终极指南：如何用AB Download Manager提升5倍下载效率

终极指南&#xff1a;如何用AB Download Manager提升5倍下载效率 【免费下载链接】ab-download-manager A Download Manager that speeds up your downloads 项目地址: https://gitcode.com/GitHub_Trending/ab/ab-download-manager 你是否经常遇到下载速度慢如蜗牛&…...

编程新知 2026/4/27 0:55:59

Cherry MX键帽3D模型库：解决个性化键盘制造的标准化方案

Cherry MX键帽3D模型库&#xff1a;解决个性化键盘制造的标准化方案 【免费下载链接】cherry-mx-keycaps 3D models of Chery MX keycaps 项目地址: https://gitcode.com/gh_mirrors/ch/cherry-mx-keycaps 想象一下这样的场景&#xff1a;你正在设计一款特殊布局的机械键…...

编程新知 2026/4/27 0:18:53

卷积风格布局器：突破内存墙的硬件加速技术

1. 卷积风格布局器&#xff1a;突破内存墙的硬件加速关键技术在视觉语言模型(VLM)和卷积神经网络加速领域&#xff0c;内存访问效率一直是制约性能提升的关键瓶颈。传统解决方案通常采用数据复制或输入重排序来避免存储体冲突&#xff0c;但这会导致高达8倍的内存开销。我们团队…...

编程新知 2026/4/27 0:14:50

营业执照识别OCR API实战：1行代码完成企业信息自动提取（附Python/Java/PHP/JS完整示例）

导读&#xff1a;在企业资质管理、金融风控、商家入驻审核等场景中&#xff0c;营业执照信息的手动录入一直是效率瓶颈。本文将手把手教您用1行核心代码调用营业执照识别OCR API&#xff0c;自动提取企业名称、统一社会信用代码、法定代表人等全部关键字段&#xff0c;附4种主流…...

编程新知 2026/4/27 0:10:43