当前位置: 首页 > 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…...

在 Nginx Stream 层“改写”MQTT ngx_stream_mqtt_filter_module

1、为什么要修改 CONNECT 报文&#xff1f; 多租户隔离&#xff1a;自动为接入设备追加租户前缀&#xff0c;后端按 ClientID 拆分队列。零代码鉴权&#xff1a;将入站用户名替换为 OAuth Access-Token&#xff0c;后端 Broker 统一校验。灰度发布&#xff1a;根据 IP/地理位写…...

【Go语言基础【12】】指针:声明、取地址、解引用

文章目录 零、概述&#xff1a;指针 vs. 引用&#xff08;类比其他语言&#xff09;一、指针基础概念二、指针声明与初始化三、指针操作符1. &&#xff1a;取地址&#xff08;拿到内存地址&#xff09;2. *&#xff1a;解引用&#xff08;拿到值&#xff09; 四、空指针&am…...

git: early EOF

macOS报错&#xff1a; Initialized empty Git repository in /usr/local/Homebrew/Library/Taps/homebrew/homebrew-core/.git/ remote: Enumerating objects: 2691797, done. remote: Counting objects: 100% (1760/1760), done. remote: Compressing objects: 100% (636/636…...

k8s从入门到放弃之HPA控制器

k8s从入门到放弃之HPA控制器 Kubernetes中的Horizontal Pod Autoscaler (HPA)控制器是一种用于自动扩展部署、副本集或复制控制器中Pod数量的机制。它可以根据观察到的CPU利用率&#xff08;或其他自定义指标&#xff09;来调整这些对象的规模&#xff0c;从而帮助应用程序在负…...

CSS3相关知识点

CSS3相关知识点 CSS3私有前缀私有前缀私有前缀存在的意义常见浏览器的私有前缀 CSS3基本语法CSS3 新增长度单位CSS3 新增颜色设置方式CSS3 新增选择器CSS3 新增盒模型相关属性box-sizing 怪异盒模型resize调整盒子大小box-shadow 盒子阴影opacity 不透明度 CSS3 新增背景属性ba…...

命令行关闭Windows防火墙

命令行关闭Windows防火墙 引言一、防火墙:被低估的"智能安检员"二、优先尝试!90%问题无需关闭防火墙方案1:程序白名单(解决软件误拦截)方案2:开放特定端口(解决网游/开发端口不通)三、命令行极速关闭方案方法一:PowerShell(推荐Win10/11)​方法二:CMD命令…...

高效的后台管理系统——可进行二次开发

随着互联网技术的迅猛发展&#xff0c;企业的数字化管理变得愈加重要。后台管理系统作为数据存储与业务管理的核心&#xff0c;成为了现代企业不可或缺的一部分。今天我们要介绍的是一款名为 若依后台管理框架 的系统&#xff0c;它不仅支持跨平台应用&#xff0c;还能提供丰富…...

Win系统权限提升篇UAC绕过DLL劫持未引号路径可控服务全检项目

应用场景&#xff1a; 1、常规某个机器被钓鱼后门攻击后&#xff0c;我们需要做更高权限操作或权限维持等。 2、内网域中某个机器被钓鱼后门攻击后&#xff0c;我们需要对后续内网域做安全测试。 #Win10&11-BypassUAC自动提权-MSF&UACME 为了远程执行目标的exe或者b…...

统计学(第8版)——统计抽样学习笔记(考试用)

一、统计抽样的核心内容与问题 研究内容 从总体中科学抽取样本的方法利用样本数据推断总体特征&#xff08;均值、比率、总量&#xff09;控制抽样误差与非抽样误差 解决的核心问题 在成本约束下&#xff0c;用少量样本准确推断总体特征量化估计结果的可靠性&#xff08;置…...

用js实现常见排序算法

以下是几种常见排序算法的 JS实现&#xff0c;包括选择排序、冒泡排序、插入排序、快速排序和归并排序&#xff0c;以及每种算法的特点和复杂度分析 1. 选择排序&#xff08;Selection Sort&#xff09; 核心思想&#xff1a;每次从未排序部分选择最小元素&#xff0c;与未排…...