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

微前端qiankun架构 (基于vue2实现)使用教程

工具使用版本

  • node --> 16+
  • @vue/cli --> 5+

创建文件

创建文件夹qiankun-test。

使用vue脚手架创建主应用main和子应用dev

 

主应用

安装 qiankun:

yarn add qiankun 或者 
npm i qiankun -S

使用qiankun:

  1. 在 utils 内创建 微应用文件夹 microApp,在该文件夹内创建微应用出口文件 index.js,路由文件 microAppRouter,配置函数文件 microAppSetting。

  2. 路由文件 microAppRouter

    // 微应用路由
    const microAppRouter = [{name: "dev", //用于应用名   容器id   应用路由基地址url: "//localhost:8080", //应用路径(ip与端口)props: { propsName: "8080" }, //初始化时需要传递给微应用的数据// hidden: false,//是否启用该应用,默认falsemenuName: "dev",//自定义属性 根据需要自己配置(用在了菜单导航的名称)},];export default microAppRouter;
  3. 配置函数文件 microAppSetting

    // 引入路由
    import microAppRouter from "./microAppRouter";
    // 微应用配置
    const microAppSetting = {};
    export default microAppSetting;
    /*** @description: 配置子应用* @param {*}* @return {*}*/
    microAppSetting.microApps = () => {let apps = [];microAppRouter.map((item) => {if (!item.hidden) {apps.push({name: item.name, //应用名(不可重复)entry: item.url, //默认加载应用路径(ip与端口)container: `#${item.name}`, //容器idactiveRule: `/${item.name}`, //激活该应用的路径hash模式+#(子应用路由基地址)...item,});}}); return apps;
    };
  4. 微应用出口文件 index.js

    // 引入 qiankun  应用注册函数   开启函数
    import { registerMicroApps, start } from "qiankun";
    // 引入 微应用配置文件
    import microAppSetting from "./microAppSetting";
    //注册子应用
    registerMicroApps(microAppSetting.microApps());
    //开启
    start(sandbox: { strictStyleIsolation?: boolean, // 开启严格的样式隔离模式。这种模式下 qiankun 会为每个微应用的容器包裹上一个 [shadow dom]节点,从而确保微应用的样式不会对全局造成影响。experimentalStyleIsolation?: boolean// 设置实验性的样式隔离特性,即在子应用下面的样式都会包一个特殊的选择器规则来限定其影响范围
    });
  5. 在App.vue内配置微应用容器及跳转菜单

    <template><div id="fapp"><!-- 主应用路由出口 --><router-link to="/mian">主应用</router-link><router-linkv-for="(item,index) in microAppDom_Router":key="index":to="`/${item.name}`?${item.props?.propsName}">{{ item.menuName }}</router-link><router-view></router-view></div>
    </template><script>
    // 引入子应用路由
    import microAppRouter from "@/utils/microApp/microAppRouter";
    export default {name: 'App',data() {return {microAppDom_Router: microAppRouter,};}
    }
    </script>
  6. 在main.js文件内引入微应用出口文件 index.js
import "@/utils/microApp/index";

     7. 路由文件router.js

const router = new VueRouter({mode: "history",routes
})

子应用配置

  1. 在src中增加public-path.js文件
    //public-path.jsif (window.__POWERED_BY_QIANKUN__) {__webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__;
    }
  2. 在main.js文件内导出生命周期钩子
    import Vue from 'vue'
    import App from './App.vue'
    import './public-path'
    Vue.config.productionTip = falselet instance = null;
    function render(props = {}) {const { container } = props;// Vue.use(router)instance = new Vue({render: (h) => h(App),}).$mount(container ? container.querySelector('#app') : '#app');
    }// 独立运行时
    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;
    }
    
  3. 配置Webpack、跨域与端口号

    const { defineConfig } = require('@vue/cli-service')
    const { name } = require('./package');
    module.exports = defineConfig({devServer: {headers: {'Access-Control-Allow-Origin': '*',},},configureWebpack: {output: {library: `${name}-[name]`,libraryTarget: 'umd', // 把微应用打包成 umd 库格式//jsonpFunction: `webpackJsonp_${name}` // webpack5废弃jsonpFunctionchunkLoadingGlobal: `webpackJsonp_${name}`, },},
    });
  4. 路由文件router.js
const router = new VueRouter({mode: "history",base: "/dev",routes,
});

报 ____webpack_public_path__未定义的问题
解决:
根据创建项目时选择的配置,在package.json文件内添加全局配置

module.exports = {
---globals: {__webpack_public_path__: "writable",},
---
};

报子应用接口404问题
解决:

主应用vue.config.js配置代理

module.exports = defineConfig({
---devServer: {proxy: {'/api1': { // 匹配所有以'/api1' 开头的请求路径target: 'http://localhost:8080/', // 代理目标的基础路径changeOrigin: true,pathRewrite: {'^/api1':''}}},
},
---
})

相关文章:

微前端qiankun架构 (基于vue2实现)使用教程

工具使用版本 node --> 16vue/cli --> 5 创建文件 创建文件夹qiankun-test。 使用vue脚手架创建主应用main和子应用dev 主应用 安装 qiankun: yarn add qiankun 或者 npm i qiankun -S 使用qiankun&#xff1a; 在 utils 内创建 微应用文件夹 microApp,在该文件夹…...

记录robosense RS-LIDAR-16使用过程3

一、wireshark抓包保存pcap文件并解析ubuntu18安装wireshark&#xff0c;参考下面csdn教程&#xff0c;官网教程我看的一脸蒙&#xff08;可能英语太差&#xff09;https://blog.csdn.net/weixin_46048542/article/details/121730448?spm1001.2101.3001.6650.2&utm_medium…...

【博学谷学习记录】大数据课程-学习第七周总结

Hadoop配置文件修改 Hadoop安装主要就是配置文件的修改&#xff0c;一般在主节点进行修改&#xff0c;完毕后scp下发给其他各个从节点机器 文件中设置的是Hadoop运行时需要的环境变量。JAVA_HOME是必须设置的&#xff0c;即使我们当前的系统中设置了JAVA_HOME&#xff0c;它也…...

154、【动态规划】leetcode ——494. 目标和:回溯法+动态规划(C++版本)

题目描述 原题链接&#xff1a;494. 目标和 解题思路 &#xff08;1&#xff09;回溯法 本题的特点是nums中每个元素只能使用一次&#xff0c;分别试探加上nums[index]和减去nums[index]&#xff0c;然后递归的遍历下一个元素index 1。 class Solution { public:int res …...

MySQL-窗口函数

窗口函数概念常用窗口函数聚合窗口函数专用窗口函数语法OVER子句window_specwindow_name (命名窗口)partition_clause 分区order_clause 排序frame_clause 范围 &#xff08;指定窗口大小&#xff09;使用限制练习准备概念 窗口函数对一组查询执行类似于聚合的操作。然而&#…...

【C++设计模式】学习笔记(1):面向对象设计原则

目录 简介面向对象设计原则(1)依赖倒置原则(DIP)(2)开放封闭原则(OCP)(3)单一职责原则(SRP)(4)Liskov替换原则(LSP)(5)接口隔离原则(ISP)(6)优先使用对象组合,而不是类继承(7)封装变化点(8)针对接口编程,而不是针对实现编程结语简介 Hello! 非常感谢您阅读海…...

[测开篇]设计测试用例的方法如何正确描述Bug

​ 文章目录为什么测试人员要写测试用例&#xff1f;怎样设计测试用例&#xff1f;&#xff08;总的方面&#xff09;1.基于需求设计测试用例&#xff08;总的方面&#xff09; 2.页面&#xff08;总的方面&#xff09; 3.非功能性测试&#xff08;具体方面&#xff09; 4.1 等…...

设计模式学习笔记--单例、建造者、适配器、装饰、外观、组合

以下内容根据以下网址及相关视频整理&#xff1a;Android设计模式之单例模式_谬谬清不给我取名字的博客-CSDN博客_android 单例模式 Android设计模式--单例模式的六种实现和单例模式讲解Volatile与Synchronized相关的并发_龙腾腾的博客-CSDN博客_android 单例 volatile java …...

English Learning - Day5 L1考前复习 2023.2.10 周五

English Learning - Day5 L1考前复习 2023.2.10 周五1 单选题&#xff1a;She has the face _________.2 单选题&#xff1a; The goals ________ he fought all his life no longer seemed important to him.3 单选题&#xff1a;Sales director is a position ______ communi…...

C. Prepend and Append

time limit per test 1 second memory limit per test 256 megabytes input standard input output standard output Timur initially had a binary string†† s&#xfffd; (possibly of length 00). He performed the following operation several (possibly zero)…...

javassm超市在线配送管理系统

为了解决用户便捷地在网上购物&#xff0c;本文设计和开发了一个超市管理系统。本系统是基于web架构设计&#xff0c;SSM框架 &#xff0c;使用Mysql数据库管理&#xff0c;综合采用JSP模式来完成系统的相关功能。主要实现了管理员与用户的注册与登陆&#xff0c;个人中心、用户…...

Scratch少儿编程案例-多模式贪吃蛇(无尽和计时)

专栏分享 点击跳转=>Unity3D特效百例点击跳转=>案例项目实战源码点击跳转=>游戏脚本-辅助自动化点击跳转=>Android控件全解手册点击跳转=>Scratch编程案例👉关于作者...

谷歌蜘蛛池怎么搭建?Google蜘蛛池可以帮助谷歌排名吗?

本文主要分享关于谷歌蜘蛛池的搭建疑问&#xff0c;以及Google对谷歌排名的影响到底有多大。 本文由光算创作&#xff0c;有可能会被剽窃和修改&#xff0c;我们佛系对待这种行为吧。 谷歌蜘蛛池怎么搭建&#xff1f; 答案是&#xff1a;需要一个内链外链体系复杂的站群系统…...

Kubernetes集群-部署Java项目

Kubernetes集群-部署Java项目&#xff08;SSG&#xff09; k8s部署项目java流程图 第一步 打包制作镜像 打包 java源码&#xff1a; application.properties #在有pom.xml的路径下执行 mvn clean package制作镜像&#xff1a; 将刚才打包后的文件夹传到&#xff0c;装有dock…...

English Learning - Day54 作业打卡 2023.2.8 周三

English Learning - Day54 作业打卡 2023.2.8 周三引言1. 就算你不喜欢喝酒&#xff0c;也请尝一杯吧。2. 便纵有千种风情&#xff0c;更与何人说&#xff1f;——柳永《雨霖铃》 (来&#xff0c;挑战一下古诗词)3. 虽然忙&#xff0c;我也要参加会议。4. 无论发生什么&#xf…...

【Unity题】 1.矩阵旋转,欧拉旋转,四元数旋转各自的优缺点。2.StringBuilder和String的区别

1.矩阵旋转&#xff0c;欧拉旋转&#xff0c;四元数旋转各自的优缺点 矩阵旋转&#xff0c;欧拉旋转&#xff0c;四元数旋转是三种不同的旋转表示方法&#xff0c;下面是它们各自的优缺点&#xff1a; 矩阵旋转&#xff1a; 优点&#xff1a; 1.可以方便地实现复合旋转&…...

【C++面试问答】搞清楚深拷贝与浅拷贝的区别

问题 深拷贝和浅拷贝的区别是面试中的常见问题之一&#xff0c;对于不同的编程语言&#xff0c;这个问题的回答可能稍有差别&#xff0c;下面我们就来探索一下它们之间的异同吧。 先来看看在JavaScript对象的深拷贝与浅拷贝的区别&#xff1a; 浅拷贝&#xff1a;只是复制了…...

day10_面向对象基础

今日内容 零、 复习昨日 一、面向对象的概念 二、面向对象编程 三、内存图 零、 复习昨日 见晨考题 每日一数组题 写一个方法 用于合并两个int类型的数组 合并法则如下 {1,2,5,8,9}{1,3,0}---->{1,2,5,8,9,1,3,0} package com.qf.array;import java.util.Arrays;/*** --- 天…...

电影订票网站的设计与开发

技术&#xff1a;Java、JSP等摘要&#xff1a;随着科技的发展&#xff0c;时代的进步&#xff0c;互联网已经成为了人们生活中不可缺少的一部分&#xff0c;网上购物已然是一种时代的象征。纵观市场&#xff0c;电影行业的发展尤为迅速&#xff0c;电影种类和数量的增多导致客流…...

seata【SAGA模式】代码实践(细节未必完全符合saga的配置,仅参考)

seata SAGA模式&#xff1a; 代码仍然是上一篇AT模式的代码&#xff1a;AT模式 不需要undo_log表 下面开始&#xff1a; 首先&#xff0c;saga模式依靠状态机的json文件来执行整个流程&#xff0c;其中的开始节点的服务即TM&#xff0c;然后状态机需要依靠三张表&#xff0…...

网络编程(Modbus进阶)

思维导图 Modbus RTU&#xff08;先学一点理论&#xff09; 概念 Modbus RTU 是工业自动化领域 最广泛应用的串行通信协议&#xff0c;由 Modicon 公司&#xff08;现施耐德电气&#xff09;于 1979 年推出。它以 高效率、强健性、易实现的特点成为工业控制系统的通信标准。 包…...

基于服务器使用 apt 安装、配置 Nginx

&#x1f9fe; 一、查看可安装的 Nginx 版本 首先&#xff0c;你可以运行以下命令查看可用版本&#xff1a; apt-cache madison nginx-core输出示例&#xff1a; nginx-core | 1.18.0-6ubuntu14.6 | http://archive.ubuntu.com/ubuntu focal-updates/main amd64 Packages ng…...

【服务器压力测试】本地PC电脑作为服务器运行时出现卡顿和资源紧张(Windows/Linux)

要让本地PC电脑作为服务器运行时出现卡顿和资源紧张的情况&#xff0c;可以通过以下几种方式模拟或触发&#xff1a; 1. 增加CPU负载 运行大量计算密集型任务&#xff0c;例如&#xff1a; 使用多线程循环执行复杂计算&#xff08;如数学运算、加密解密等&#xff09;。运行图…...

涂鸦T5AI手搓语音、emoji、otto机器人从入门到实战

“&#x1f916;手搓TuyaAI语音指令 &#x1f60d;秒变表情包大师&#xff0c;让萌系Otto机器人&#x1f525;玩出智能新花样&#xff01;开整&#xff01;” &#x1f916; Otto机器人 → 直接点明主体 手搓TuyaAI语音 → 强调 自主编程/自定义 语音控制&#xff08;TuyaAI…...

Java + Spring Boot + Mybatis 实现批量插入

在 Java 中使用 Spring Boot 和 MyBatis 实现批量插入可以通过以下步骤完成。这里提供两种常用方法&#xff1a;使用 MyBatis 的 <foreach> 标签和批处理模式&#xff08;ExecutorType.BATCH&#xff09;。 方法一&#xff1a;使用 XML 的 <foreach> 标签&#xff…...

现有的 Redis 分布式锁库(如 Redisson)提供了哪些便利?

现有的 Redis 分布式锁库&#xff08;如 Redisson&#xff09;相比于开发者自己基于 Redis 命令&#xff08;如 SETNX, EXPIRE, DEL&#xff09;手动实现分布式锁&#xff0c;提供了巨大的便利性和健壮性。主要体现在以下几个方面&#xff1a; 原子性保证 (Atomicity)&#xff…...

MySQL 主从同步异常处理

阅读原文&#xff1a;https://www.xiaozaoshu.top/articles/mysql-m-s-update-pk MySQL 做双主&#xff0c;遇到的这个错误&#xff1a; Could not execute Update_rows event on table ... Error_code: 1032是 MySQL 主从复制时的经典错误之一&#xff0c;通常表示&#xff…...

实战三:开发网页端界面完成黑白视频转为彩色视频

​一、需求描述 设计一个简单的视频上色应用&#xff0c;用户可以通过网页界面上传黑白视频&#xff0c;系统会自动将其转换为彩色视频。整个过程对用户来说非常简单直观&#xff0c;不需要了解技术细节。 效果图 ​二、实现思路 总体思路&#xff1a; 用户通过Gradio界面上…...

【堆垛策略】设计方法

堆垛策略的设计是积木堆叠系统的核心&#xff0c;直接影响堆叠的稳定性、效率和容错能力。以下是分层次的堆垛策略设计方法&#xff0c;涵盖基础规则、优化算法和容错机制&#xff1a; 1. 基础堆垛规则 (1) 物理稳定性优先 重心原则&#xff1a; 大尺寸/重量积木在下&#xf…...

微服务通信安全:深入解析mTLS的原理与实践

&#x1f525;「炎码工坊」技术弹药已装填&#xff01; 点击关注 → 解锁工业级干货【工具实测|项目避坑|源码燃烧指南】 一、引言&#xff1a;微服务时代的通信安全挑战 随着云原生和微服务架构的普及&#xff0c;服务间的通信安全成为系统设计的核心议题。传统的单体架构中&…...