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

vue乾坤微前端项目

news 2026/2/10 23:05:21

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

第19节 Node.js Express 框架

Express 是一个为Node.js设计的web开发框架&#xff0c;它基于nodejs平台。 Express 简介 Express是一个简洁而灵活的node.js Web应用框架, 提供了一系列强大特性帮助你创建各种Web应用&#xff0c;和丰富的HTTP工具。 使用Express可以快速地搭建一个完整功能的网站。 Expre…...

编程新知 2026/2/8 6:37:43

相机Camera日志实例分析之二：相机Camx【专业模式开启直方图拍照】单帧流程日志详解

【关注我&#xff0c;后续持续新增专题博文&#xff0c;谢谢&#xff01;&#xff01;&#xff01;】 上一篇我们讲了&#xff1a; 这一篇我们开始讲&#xff1a; 目录 一、场景操作步骤 二、日志基础关键字分级如下 三、场景日志如下&#xff1a; 一、场景操作步骤 操作步…...

编程新知 2026/1/30 10:10:55

如何在看板中体现优先级变化

在看板中有效体现优先级变化的关键措施包括&#xff1a;采用颜色或标签标识优先级、设置任务排序规则、使用独立的优先级列或泳道、结合自动化规则同步优先级变化、建立定期的优先级审查流程。其中&#xff0c;设置任务排序规则尤其重要&#xff0c;因为它让看板视觉上直观地体…...

编程新知 2026/1/23 12:42:28

【Zephyr 系列 10】实战项目：打造一个蓝牙传感器终端 + 网关系统（完整架构与全栈实现）

🧠关键词：Zephyr、BLE、终端、网关、广播、连接、传感器、数据采集、低功耗、系统集成 📌目标读者：希望基于 Zephyr 构建 BLE 系统架构、实现终端与网关协作、具备产品交付能力的开发者 📊篇幅字数：约 5200 字 ✨ 项目总览 在物联网实际项目中，**“终端 + 网关”**是…...

编程新知 2026/1/31 6:12:22

云原生安全实战：API网关Kong的鉴权与限流详解

&#x1f525;「炎码工坊」技术弹药已装填&#xff01; 点击关注 → 解锁工业级干货【工具实测|项目避坑|源码燃烧指南】 一、基础概念 1. API网关&#xff08;API Gateway&#xff09; API网关是微服务架构中的核心组件&#xff0c;负责统一管理所有API的流量入口。它像一座…...

编程新知 2026/2/1 6:24:16

Bean 作用域有哪些？如何答出技术深度？

导语&#xff1a; Spring 面试绕不开 Bean 的作用域问题&#xff0c;这是面试官考察候选人对 Spring 框架理解深度的常见方式。本文将围绕“Spring 中的 Bean 作用域”展开&#xff0c;结合典型面试题及实战场景&#xff0c;帮你厘清重点&#xff0c;打破模板式回答&#xff0c…...

编程新知 2025/11/12 21:44:33

日常一水C

多态 言简意赅&#xff1a;就是一个对象面对同一事件时做出的不同反应 而之前的继承中说过&#xff0c;当子类和父类的函数名相同时&#xff0c;会隐藏父类的同名函数转而调用子类的同名函数&#xff0c;如果要调用父类的同名函数&#xff0c;那么就需要对父类进行引用&#…...

编程新知 2025/9/30 22:37:58

十九、【用户管理与权限 - 篇一】后端基础：用户列表与角色模型的初步构建

【用户管理与权限 - 篇一】后端基础：用户列表与角色模型的初步构建 前言准备工作第一部分：回顾 Django 内置的 `User` 模型第二部分：设计并创建 `Role` 和 `UserProfile` 模型第三部分：创建 Serializers第四部分：创建 ViewSets第五部分：注册 API 路由第六部分：后端初步测…...

编程新知 2026/1/9 3:08:54

[论文阅读]TrustRAG: Enhancing Robustness and Trustworthiness in RAG

TrustRAG: Enhancing Robustness and Trustworthiness in RAG [2501.00879] TrustRAG: Enhancing Robustness and Trustworthiness in Retrieval-Augmented Generation 代码&#xff1a;HuichiZhou/TrustRAG: Code for "TrustRAG: Enhancing Robustness and Trustworthin…...

编程新知 2026/2/4 17:33:27

LLaMA-Factory 微调 Qwen2-VL 进行人脸情感识别（二）

在上一篇文章中，我们详细介绍了如何使用LLaMA-Factory框架对Qwen2-VL大模型进行微调，以实现人脸情感识别的功能。本篇文章将聚焦于微调完成后，如何调用这个模型进行人脸情感识别的具体代码实现，包括详细的步骤和注释。 模型调用步骤 环境准备：确保安装了必要的Python库。…...

编程新知 2025/11/4 0:47:29