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

vue乾坤微前端项目

news 2025/11/27 8:00:54

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

【第二十一章 SDIO接口(SDIO)】

第二十一章 SDIO接口 目录 第二十一章 SDIO接口(SDIO) 1 SDIO 主要功能 2 SDIO 总线拓扑 3 SDIO 功能描述 3.1 SDIO 适配器 3.2 SDIOAHB 接口 4 卡功能描述 4.1 卡识别模式 4.2 卡复位 4.3 操作电压范围确认 4.4 卡识别过程 4.5 写数据块 4.6 读数据块 4.7 数据流…...

编程新知 2025/11/26 7:23:33

（二）原型模式

原型的功能是将一个已经存在的对象作为源目标，其余对象都是通过这个源目标创建。发挥复制的作用就是原型模式的核心思想。 一、源型模式的定义 原型模式是指第二次创建对象可以通过复制已经存在的原型对象来实现，忽略对象创建过程中的其它细节。 📌 核心特点： 避免重复初…...

编程新知 2025/11/26 13:36:37

【android bluetooth 框架分析 04】【bt-framework 层详解 1】【BluetoothProperties介绍】

1. BluetoothProperties介绍 libsysprop/srcs/android/sysprop/BluetoothProperties.sysprop BluetoothProperties.sysprop 是 Android AOSP 中的一种 系统属性定义文件&#xff08;System Property Definition File&#xff09;&#xff0c;用于声明和管理 Bluetooth 模块相…...

编程新知 2025/11/22 12:02:51

ios苹果系统，js 滑动屏幕、锚定无效

现象&#xff1a;window.addEventListener监听touch无效&#xff0c;划不动屏幕&#xff0c;但是代码逻辑都有执行到。 scrollIntoView也无效。 原因&#xff1a;这是因为 iOS 的触摸事件处理机制和 touch-action: none 的设置有关。ios有太多得交互动作&#xff0c;从而会影响…...

编程新知 2025/11/26 5:38:11

深入浅出深度学习基础：从感知机到全连接神经网络的核心原理与应用

文章目录 前言一、感知机 (Perceptron)1.1 基础介绍1.1.1 感知机是什么&#xff1f;1.1.2 感知机的工作原理 1.2 感知机的简单应用&#xff1a;基本逻辑门1.2.1 逻辑与 (Logic AND)1.2.2 逻辑或 (Logic OR)1.2.3 逻辑与非 (Logic NAND) 1.3 感知机的实现1.3.1 简单实现 (基于阈…...

编程新知 2025/11/17 6:24:45

C++.OpenGL （20/64）混合（Blending）

混合（Blending） 透明效果核心原理 #mermaid-svg-SWG0UzVfJms7Sm3e {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-SWG0UzVfJms7Sm3e .error-icon{fill:#552222;}#mermaid-svg-SWG0UzVfJms7Sm3e .error-text{fill…...

编程新知 2025/9/24 22:51:29

【Linux系统】Linux环境变量：系统配置的隐形指挥官

。# Linux系列 文章目录 前言一、环境变量的概念二、常见的环境变量三、环境变量特点及其相关指令3.1 环境变量的全局性3.2、环境变量的生命周期 四、环境变量的组织方式五、C语言对环境变量的操作5.1 设置环境变量&#xff1a;setenv5.2 删除环境变量:unsetenv5.3 遍历所有环境…...

编程新知 2025/11/21 14:47:49

什么是VR全景技术

VR全景技术&#xff0c;全称为虚拟现实全景技术&#xff0c;是通过计算机图像模拟生成三维空间中的虚拟世界&#xff0c;使用户能够在该虚拟世界中进行全方位、无死角的观察和交互的技术。VR全景技术模拟人在真实空间中的视觉体验&#xff0c;结合图文、3D、音视频等多媒体元素…...

编程新知 2025/11/26 18:15:24

leetcode73-矩阵置零

leetcode 73 思路 记录 0 元素的位置&#xff1a;遍历整个矩阵&#xff0c;找出所有值为 0 的元素&#xff0c;并将它们的坐标记录在数组zeroPosition中置零操作&#xff1a;遍历记录的所有 0 元素位置&#xff0c;将每个位置对应的行和列的所有元素置为 0 具体步骤 初始化…...

编程新知 2025/11/22 1:10:29

SQL进阶之旅 Day 22：批处理与游标优化

【SQL进阶之旅 Day 22】批处理与游标优化 文章简述&#xff08;300字左右&#xff09; 在数据库开发中&#xff0c;面对大量数据的处理任务时&#xff0c;单条SQL语句往往无法满足性能需求。本篇文章聚焦“批处理与游标优化”&#xff0c;深入探讨如何通过批量操作和游标技术提…...

编程新知 2025/9/29 3:08:51