【微前端乾坤】 vue2主应用、vue2+webpack子应用，vue3+webpack子应用、vue3+vite子应用的配置

因公司需求 需要将原本vue2+iframe 形式的项目改成微前端乾坤的方式。

之前iframe都是直接嵌套到vue2项目的二级目录或者三级目录下的(反正就是要随处可嵌)

用乾坤的原因：

        1、iframe嵌套的方式存在安全隐患；

        2、项目是联合开发的， 乾坤的方便多团队开发

        3、乾坤方便后续增加子应用继续开发

注意使用场景：原本vue2+iframe 形式的项目改成微前端乾坤的方式，将vue2改成微服务的主应用（基座），之前iframe嵌套在vue2项目中的其他页面的系统改成微服务的子应用，嵌套的只是子应用路由中的一个页面 ， 也就是 主应用 的一个 路由页面 对应 子应用 的一个 路由页面 ， 不是那种常规的一个出口包含了整个子应用，一下主应用的配置主要是针对我这种需求弄的， 子应用大部分都是通用的

一、乾坤介绍

1、简介

简单：无论你使用什么技术栈，都可以轻松地将子应用接入到主应用中，就像使用 iframe 一样简单。
完备：qiankun 提供了丰富的功能，包括样式隔离、沙箱、预加载等，为开发者解决微前端架构中的各种问题。
生产可用：qiankun 已经在蚂蚁金服内部和外部的 200+ 应用中得到验证，是一个值得信赖的生产可用解决方案。


2、qiankun 的设计理念

qiankun 的设计理念主要体现在两个方面：技术栈无关和技术栈无关。技术栈无关：qiankun 不限制子应用的技术栈，无论是 React、Vue 还是 Angular，都可以轻松地接入到主应用中。这样可以消除应用之间的隐性依赖，实现真正的技术栈无关。
接入简单：qiankun 的目标是让接入微前端的过程就像使用 iframe 一样简单，从而尽可能减少对旧应用的改造工作量。


3、qiankun 的技术实现与选择

qiankun 在技术实现上主要解决了两个问题：应用的加载与切换和应用的隔离与通信。应用的加载与切换：qiankun 通过使用 single-spa，实现了应用的懒加载、路由处理和应用入口选择等功能。
应用的隔离与通信：qiankun 使用 JS 沙箱和样式隔离技术，确保子应用之间的 JS 和 CSS 不会发生冲突。同时，qiankun 提供了父子应用和子子应用之间的通信机制，实现了应用之间的数据传递和交互。

二、项目改造

我的项目目录格式

 1、主应用（base）

        1）、安装乾坤

yarn add qiankun -S / npm i qiankun -S 

       2）、在需要嵌套子应用页面的页面（主应用指定菜单下，之前iframe页面的地方）添加如下内容：在文件中准备子应用出口容器， 然后script中引入loadMicroApp方法加载子应用

<!--* @Description: ------------ fileDescription -----------* @Author: snows_l snows_l@163.com* @Date: 2023-09-13 18:02:20* @LastEditors: snows_l snows_l@163.com* @LastEditTime: 2024-02-27 12:19:54* @FilePath: /digital-qiankun-common/base/src/views/machineRoom/index.vue
--><template><div id="microAppContainer"></div>
</template><script>
import { loadMicroApp } from "qiankun";export default {data() {return {microApp: null,};},mounted() {this.microApp = loadMicroApp({name: "cmdb",entry: "//localhost:8991/",  // 子应用部署的服务地址、这里因为都是本地开所以是localhost,到时候部署到那个服务器就是那个服务器地址container: "#microAppContainer",// props 传参props: {token: sessionStorage.getItem("token"),localLogin: sessionStorage.getItem("local_login"),roleNamesStr: sessionStorage.getItem("roleNamesStr"),},},{// 是否开启沙箱样式隔离sandbox: {// experimentalStyleIsolation: false, // 沙箱隔离// strictStyleIsolation: false,  // 样式隔离（处于实验阶段）， 是导致主应用的样子错乱， 用的话请检查主应用的样式是否被影响},// 是否为单实例场景，单实例指的是同一时间只会渲染一个微应用。默认为 false。singular: true,});},updated() {if (this.microApp) {this.microApp.update();}},beforeDestroy() {if (this.microApp) {this.microApp.unmount();}},
};
</script>

        3）、路由：由于是主应用与子应用的页面是多对多， 主应用需要包含菜单，头部logo、头像等title组件， 所以需要包含在layout组件内， 因此主应用与子应用的路由需要一样（相当于主应用与子应用使用同一个路由），路由的component都指定同一个vue文件，因为只有子应用的出口就只有这个一个文件。如下

// 主应用：
{path: "/operations/machineRoom",redirect: { name: "MachineRoom" },component: Layout,meta: { title: "多云现场设备管理", icon: "资源展示" },children: [{path: "machineRoom",name: "MachineRoom",component: () => import("@/views/machineRoom/index"), // 同一个页面},{path: "hardware",name: "Hardware",component: () => import("@/views/machineRoom/index"), // 同一个页面},],
},// 子应用路由：
{name: 'resource',path: '/operations/machineRoom/:code',component: () => import('@/pages/resource/index')
}

这样主应用就搭建好了， 给子应用留了出口

2、vue2子应用

        我这里子应用用的histor模式的路由， 子应用用的都是

        1）、在src目录下添加public-path.js文件， 并在main.js入口文件中引入， public-path.js的内容如下：


if (window.__POWERED_BY_QIANKUN__) {__webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__;
}

        2）、改造mian.j入口文件，如下：

        在入口文件中添加乾坤子应用的渲染方式， 并导出乾坤使用的三个生命周期钩子函数，改造成如下：----- 根据自己应用参考配置

import Vue from 'vue';
import VueRouter from 'vue-router';
import App from './App.vue';
import './public-path';
import routes from './router';Vue.config.productionTip = false;let router = null;
let instance = null;function render(props = {}) {const { container } = props;router = new VueRouter({base: window.__POWERED_BY_QIANKUN__ ? '/#/' : '/', //  如果在乾坤环境， 由于主应用是hash模式的路由所以需要加/#/， 独立运行，子应用是history, 所以是/mode: 'history',routes});instance = new Vue({router,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;router = null;
}

        3）、路由：主应用的路由于微应用的路由保持一直（主应用中已经提到）

        4）、在webpack.config.js 或者 vue.config.js中添加如下内容：

const { name } = require("./package");
devServer: {port: 8031,headers: {"Access-Control-Allow-Origin": "*", },
},configureWebpack: {output: {library: `${name}-[name]`,libraryTarget: "umd", // 把微应用打包成 umd 库格式// webpack5 使用chunkLoadingGlobal: `webpackJsonp_${packageName}`,jsonpFunction: `webpackJsonp_${packageName}`,},
},

        5）、打包，需要打包成umd库格式，配置如下

        webpack5打包 添加如下内容：
const packageName = require('./package.json').name;
module.exports = {output: {library: `${packageName}-[name]`,libraryTarget: 'umd',chunkLoadingGlobal: `webpackJsonp_${packageName}`,},
};
        webpack4打包 添加如下内容
const packageName = require('./package.json').name;module.exports = {output: {library: `${packageName}-[name]`,libraryTarget: 'umd',jsonpFunction: `webpackJsonp_${packageName}`,},
};

3、vue3子应用（webpack打包）

        1)、在入口文件中添加乾坤子应用的渲染方式， 并导出乾坤使用的三个生命周期钩子函数，改造成如下：----- 根据自己应用参考配置

/** @Description: ------------ fileDescription -----------* @Author: snows_l snows_l@163.com* @Date: 2023-09-26 09:05:04* @LastEditors: snows_l snows_l@163.com* @LastEditTime: 2024-03-01 16:04:40* @FilePath: /digital-qiankun-common/cmdb_vue/src/main.js*/
import Antd from 'ant-design-vue';
import 'ant-design-vue/dist/reset.css';
import { createApp } from 'vue';
import { createRouter, createWebHistory } from 'vue-router';
import App from './App.vue';
import './public-path';
import routers from './routers/index.js';
import myPinia from './store';let app = null;
let router = null;const render = container => {app = createApp(App);// 如果是在主应用的环境下就挂载主应用的节点，否则挂载到本地router = createRouter({history: createWebHistory(window.__POWERED_BY_QIANKUN__ ? '/#/' : '/'),routes: routers});const appDom = container ? container.querySelector('#app') : '#app';app.use(router);app.use(Antd);app.use(myPinia);app.mount(appDom);
};// 独立运行
if (!window.__POWERED_BY_QIANKUN__) {render(null);
}export async function bootstrap() {console.log('[vue] vue app bootstraped');
}export async function mount(props) {render(props.container);
}export async function unmount() {app.unmount();app = null;router = null;
}

        2)、在main.js同级目录添加public-path.js文件， 并在main.js中引入

if (window.__POWERED_BY_QIANKUN__) {__webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__;
}

        3)、在vue.config.js的server添加如下内容

headers: {'Access-Control-Allow-Origin': '*' // 主应用获取子应用时跨域响应头
}

        4)、固定端口，主应用中会用到(开发环境用，发布的时候用的子应用部署的服务器地址)

4、vue3子应用（vite）

        1）、安装vite的乾坤插件

yarn add vite-plugin-qiankun -D / npm i vite-plugin-qiankun -D

        2）、在入口文件中添加乾坤子应用的渲染方式， 并导出乾坤使用的三个生命周期钩子函数，改造成如下：----- 根据自己应用参考配置

/** @Description: ------------ fileDescription -----------* @Author: snows_l snows_l@163.com* @Date: 2023-09-26 09:05:04* @LastEditors: snows_l snows_l@163.com* @LastEditTime: 2024-02-27 10:36:31* @FilePath: /digital-qiankun-common/CMDB/src/main.js*/import { qiankunWindow, renderWithQiankun } from 'vite-plugin-qiankun/dist/helper';
import { createApp } from 'vue';
import { createRouter, createWebHistory } from 'vue-router';
import App from './App.vue';
import routers from './routers/index.js';import Antd from 'ant-design-vue';
import 'ant-design-vue/dist/reset.css';
import ElementPlus from 'element-plus';
import 'element-plus/dist/index.css';
import zhCn from 'element-plus/dist/locale/zh-cn.mjs';
import myPinia from './store';let app = null;
let router = null;const render = container => {app = createApp(App);// 如果是在主应用的环境下就挂载主应用的节点，否则挂载到本地router = createRouter({history: createWebHistory(qiankunWindow.__POWERED_BY_QIANKUN__ ? '/#/' : '/'),routes: routers // `routes: routes` 的缩写});const appDom = container ? container.querySelector('#app') : '#app';app.use(router);app.use(Antd);app.use(ElementPlus, {locale: zhCn});app.use(myPinia);app.mount(appDom);
};if (!qiankunWindow.__POWERED_BY_QIANKUN__) {render(null);
} else {renderWithQiankun({// bootstrap 只会在微应用初始化的时候调用一次，下次微应用重新进入时会直接调用 mount 钩子，不会再重复触发 bootstrap// 通常我们可以在这里做一些全局变量的初始化，比如不会在 unmount 阶段被销毁的应用级别的缓存等bootstrap() {},// 应用每次进入都会调用 mount 方法，通常我们在这里触发应用的渲染方法，也可以接受主应用传来的参数mount(_props) {console.log('-------- 子应用 mount --------', _props);_props.localLogin && sessionStorage.setItem('localLogin', _props.localLogin);_props.roleNamesStr && sessionStorage.setItem('roleNamesStr', _props.roleNamesStr);_props.token && sessionStorage.setItem('token', _props.token);render(_props.container);},// 应用每次 切出/卸载 会调用的unmount方法，通常在这里我们会卸载微应用的应用实例unmount(_propsy) {app.unmount();app = null;router = null;},update: function (_props) {render(_props.container);}});
}

        3）、在vite.config.js中plugins中配置乾坤插件以及其他配置，参考配置如下：

import qiankun from 'vite-plugin-qiankun';base:’/’，// 静态资源访问路径。 发布到线上的时候需要改成线上服务器完整的地址， 不然访问主应用的域名导致拿不到资源
plugins: [vue(),qiankun('cmdb', {useDevMode: true})
],server:{headers: {'Access-Control-Allow-Origin': '*' // 主应用获取子应用时跨域响应头},origin: 'http://localhost:8991/' 
}

        4）、打包

// 修改在vite.config.js
base:’http://localhost:8991’ // 应用部署的服务器地址// 在output中添加format: 'umd',打包成库格式
build:{rollupOptions:{output:{format: 'umd'}}
}

三、觉得重要的地方提醒一下

        1、子应用推荐 history 模式的路由；

        2、只有主应用需要安装乾坤；

        3、注意本地开发与部署到线上的子应用的地址；

        4、子应用需要导出bootstrap、mount、unmount钩子函数工乾坤调用， 并在mount中拿到container去渲染子应用；

        5、子应用必须打包成 umd 格式；

        6、子应用部署的时候需要开启允许跨域访问，配置如下：                

# 允许跨域请求的域, * 表示所有
add_header 'Access-Control-Allow-Origin' *;# 允许携带Cookie
add_header 'Access-Control-Allow-Credentials' 'true';# 允许请求的方式 比如常用的Restful GET/PUT/POST/DELETE
add_header 'Access-Control-Allow-Methods' *;# 允许请求的header
add_header 'Access-Control-Allow-Headers' *;

        7、乾坤导出三个api，registerMicroApps, start以及loadMicroApp， registerMicroApps, start是搭配使用的， 使用registerMicroApps, start的时候需要添加activeRule去匹配路由（当匹配到activeRule值开头的路由的时候就会自动加载子应用）， loadMicroApp是单独使用的， 不需要activeRule去匹配路由的

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/729699.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

Hack The Box-Crafty

Hack The Box-Crafty

目录 信息收集 rustscan whatweb WEB 漏洞利用 漏洞说明 漏洞验证 提权 get user.txt get Administrator 总结 信息收集 rustscan ┌──(root㉿ru)-[~/kali/hackthebox] └─# rustscan -a 10.10.11.249 --range0-65535 --ulimit5000 -- -A -sC [~] Automatically…
阅读更多...
NLP:自定义模型训练

NLP:自定义模型训练

书接上文&#xff0c;为了完成指定的任务&#xff0c;我们需要额外训练一个特定场景的模型 这里主要参考了这篇博客&#xff1a;大佬的博客 我这里就主要讲一下我根据这位大佬的博客一步一步写下时&#xff0c;遇到的问题&#xff1a; 文中的cfg在哪里下载&#xff1f; 要不…
阅读更多...
Fastjson漏洞利用合集

Fastjson漏洞利用合集

0x01 Fastjson 概述 1.应用场景 接口返回数据 Ajax异步访问数据RPC远程调用前后端分离后端返回的数据开放API(一些公司开放接口的时候&#xff0c;我们点击请求&#xff0c;返回的数据是JSON格式的)企业间合作接口(数据对接的时候定义的一种规范&#xff0c;确定入参&#x…
阅读更多...
BUUCTF-MISC-[HDCTF2019]信号分析1

BUUCTF-MISC-[HDCTF2019]信号分析1

题目链接&#xff1a;BUUCTF在线评测 (buuoj.cn) 下载附件是一个WAV的文件&#xff0c;题目又叫做信号分析&#xff0c;用Adobe Audition 打开分析了 发现有很多长短不一样的信号&#xff0c;只需要分析一段 猜测长的是一短的为0 最后得到0101010101010101000000110 百度得知…
阅读更多...
vscode如何远程到linux python venv虚拟环境开发？（python虚拟环境、vscode远程开发、vscode远程连接）

vscode如何远程到linux python venv虚拟环境开发？（python虚拟环境、vscode远程开发、vscode远程连接）

文章目录 1. 安装VSCode2. 安装扩展插件3. 配置SSH连接4. 输入用户名和密码5. 打开远程文件夹6. 创建/选择Python虚拟环境7. 安装Python插件 Visual Studio Code (VSCode) 提供了一种称为 Remote Development 的功能&#xff0c;允许用户在远程系统、容器或甚至 Windows 子系统…
阅读更多...
【致逝去的青春】《龙珠》作者鸟山明逝世，享年68岁

【致逝去的青春】《龙珠》作者鸟山明逝世，享年68岁

鸟山明工作室&#xff08;BIRD STUDIO&#xff09;于3月8日发布讣告&#xff1a;鸟山明已于2024年3月1日因急性硬膜下血肿逝世&#xff0c;享年68岁。 《龙珠》从 1984 年开始于《周刊少年Jump》连载&#xff0c;过后曾改编曾多部动画、剧场版、游戏&#xff0c;相关周边商品也…
阅读更多...
opengl 学习(二)-----你好，三角形

opengl 学习(二)-----你好，三角形

你好&#xff0c;三角形 分类demo效果解析 分类 opengl c demo #include "glad/glad.h" #include "glfw3.h" #include <iostream> #include <cmath> #include <vector>using namespace std;/** * 在学习此节之前&#xff0c;建议将这…
阅读更多...
Alveo 概念拓扑结构

Alveo 概念拓扑结构

在 Alveo 加速卡中，涉及到的概念拓扑结构主要包括 Alveo 卡上的各个关键组件以及与主机系统之间的通信结构。以下是对这些概念拓扑结构的简要介绍： 1.DDR 即双数据率内存（Double Data Rate memory），是一种常见的计算机内存类型，用于存储和提供处理器所需的数据和指令。…
阅读更多...
macos m1 arm芯片 使用jpype报错 FileNotFoundError: [Errno 2] JVM DLL not found

macos m1 arm芯片 使用jpype报错 FileNotFoundError: [Errno 2] JVM DLL not found

startJVM(jpype.getDefaultJVMPath()) 报错 Traceback (most recent call last):File "/Users/thomas990p/PycharmProjects/tuya/volcano-biz-scripts/WenKongFa/FinalCode/java2python/CallJavaAPI.py", line 12, in <module>startJVM(jpype.getDefaultJVMPa…
阅读更多...
基于springboot实现大学生兼职网站系统项目【项目源码+论文说明】计算机毕业设计

基于springboot实现大学生兼职网站系统项目【项目源码+论文说明】计算机毕业设计

基于springboot实现大学生兼职系统演示 摘要 现代化的市场中&#xff0c;人们日常的工作、生活都在不断的提速&#xff0c;而人们在工作与生活中与互联网的结合也越来越紧密&#xff0c;通过与互联网紧密的结合可以更好地实现日常工作的线上化、信息化、便捷化。现如今的各行各…
阅读更多...
ebpf入门---监听所有新进程

ebpf入门---监听所有新进程

什么是ebpf eBPF 全称 extended Berkeley Packet Filter&#xff0c;中文意思是 扩展的伯克利包过滤器。一般来说&#xff0c;要向内核添加新功能&#xff0c;需要修改内核源代码或者编写 内核模块 来实现。而 eBPF 允许程序在不修改内核源代码&#xff0c;或添加额外的内核模…
阅读更多...
鸿蒙App基础

鸿蒙App基础

像素单位 .1、基础单位 为开发者提供4种像素单位&#xff0c;框架采用vp为基准数据单位。 PS&#xff1a;个人建议使用lpx&#xff0c;配置好配置文件&#xff0c;这里就可以按照UI设计稿实际的来&#xff0c;可以更好的实现设计效果 名称描述px屏幕物理像素单位vp屏幕密度相…
阅读更多...
一拖二快充线独特优势

一拖二快充线独特优势

在现代社会&#xff0c;手机已成为我们生活中不可或缺的一部分。随着科技的不断进步&#xff0c;手机的功能越来越强大&#xff0c;从通讯工具逐渐转变为工作、学习和娱乐的得力助手。然而&#xff0c;手机的电量问题一直是困扰着我们的难题。为了解决这个问题&#xff0c;市场…
阅读更多...
3•8向女同胞致敬|营销枢纽SaaS厂商乐通达(ltd.com)正式更名枢纽云

3•8向女同胞致敬|营销枢纽SaaS厂商乐通达(ltd.com)正式更名枢纽云

为了向女同胞致敬&#xff0c;我们特地选择3月8日女神节变更公司名称&#xff0c;因为《如果SaaS有性别&#xff0c;那 TA一定是女性 》。 2024年3月8日&#xff0c;“杭州乐通达网络有限公司”名称正式变更为“杭州枢纽云计算有限公司”&#xff08;简称&#xff1a;营销枢纽&…
阅读更多...
测试常用的Linux命令

测试常用的Linux命令

前言 直接操作硬件 将把操作硬件的代码封装成系统调用&#xff0c;供程序员使用 虚拟机软件 可以模拟的具有完整硬件系统的功能 可以在虚拟机上安装不同的操作系统 Linux内核只有一个&#xff0c;发行版有很多种 内核来运行程序和管理像磁盘和打印机等硬件设备的核心程序 终端…
阅读更多...
积鼎科技两款国产流体仿真软件入选《上海市工业软件推广目录》！

积鼎科技两款国产流体仿真软件入选《上海市工业软件推广目录》！

为落实《上海市促进工业软件高质量发展行动计划(2021-2023年)》&#xff0c;聚焦重点行业和领域痛点问题&#xff0c;提升关键软件技术创新和供给能力&#xff0c;推动工业软件产品应用和产业生态建设更好支撑全市制造业数字化转型&#xff0c;《2023年上海市工业软件推荐目录》…
阅读更多...
YOLOv8改进 | 独家创新篇 | 利用DCNv3集合DLKA形成全新的注意力机制（全网独家创新）

YOLOv8改进 | 独家创新篇 | 利用DCNv3集合DLKA形成全新的注意力机制（全网独家创新）

一、本文介绍 本文给大家带来的机制是由我独家创新结合Deformable Large Kernel Attention (D-LKA) 注意力机制和DCNv3可变形卷积的全新注意力机制模块（算是二次创新），D-LKA的基本原理是结合了大卷积核和可变形卷积的注意力机制，通过采用大卷积核来模拟类似自我关注的感受…
阅读更多...
Linux安全--为Nginx加上PHP解析功能

Linux安全--为Nginx加上PHP解析功能

yum install php-fpm -y安装php进程管理器 找到Nginx安装的路径 编辑Nginx配置文件
阅读更多...
数学建模【主成分分析】

数学建模【主成分分析】

一、主成分分析简介 主成分分析&#xff08;Principal Component Analysis&#xff0c;PCA&#xff09;是一种降维算法&#xff0c;它能将多个指标转换为少数几个主成分&#xff0c;这些主成分是原始变量的线性组合&#xff0c;且彼此之间互不相关&#xff0c;其能反映出原始数…
阅读更多...
基于springboot的家庭装修报价系统设计与实现

基于springboot的家庭装修报价系统设计与实现

目 录 摘 要 I Abstract II 引 言 1 1 相关技术 3 1.1 SpringBoot框架 3 1.2 ECharts 3 1.3 Vue框架 3 1.4 Bootstrap框架 3 1.5 JQuery技术 4 1.6 Ajax技术 4 1.7 本章小结 4 2 系统分析 5 2.1 需求分析 5 2.2 非功能需求 7 2.3 本章小结 8 3 系统设计 9 3.1 系统总体设计 9 …
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023