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

vue-cli 5接入模块联邦 module federation

vue-cli 5接入模块联邦 module federation

  • 模块联邦概念
  • 实现思路
  • 配置
  • 遇到的问题:

模块联邦概念

模块联邦由webpack 5最先推出的,让应用加载远程的代码模块来实现不同的Web应用共享代码片段.模块联邦分为两个角色,一个是生产者,一个是消费者.生产者暴露代码供消费者消费
(用一个不太精准的比喻 这个就是webpack内置的cdn)

实现思路

  1. 首先要先将vue-cli升级到5 具体在上一篇
  2. 针对模块联邦进行配置

配置

我是vue-cli 接入webpack应用,vue-clivue-clivue-cli的配置就好了
webpack生产者 webpack.config.js

const { ModuleFederationPlugin } = require("webpack").container;
const path = require("path");module.exports = {entry: "./index.js",mode: "development",output: {publicPath: "http://localhost:6780/",clean: true,},devServer: {static: {directory: path.join(__dirname, "dist"),},compress: true,port: 6780,},optimization: {splitChunks: false,//splitChunks和mf冲突不能用},plugins: [new ModuleFederationPlugin({name: "moduleFederationLib",filename: "remoteEntry.js",library: { type: "window", name: "moduleFederationLib" },exposes: {"./react": "react","./react-dom": "react-dom",'./apiUrl':"./src/utils/apiUrl"},}),],
};

vue-cli生产者 vue.config.js

// vue.config.js
module.exports = {publicPath: "http://localhost:4567/",chainWebpack: (config) => {/* module federation plugin import */config.optimization.delete("splitChunks");config.plugin("module-federation-plugin").use(require("webpack").container.ModuleFederationPlugin, [{name: "home", // 模块名称(必须唯一)filename: "remoteEntry.js",//加载的文件名library: { type: "window", name: "home" },//type:指定如何将远程模块暴露给其他应用 设置成window才能找到exposes: {// 对外暴露的组件"./HelloWorld": "./src/components/HelloWorld.vue",},},]);},// devSever 一定要设置跨域 能够跨域是整个mf的基础devServer: {port: 4567,hot: true,headers: {"Access-Control-Allow-Origin": "*","Access-Control-Allow-Methods": "GET, POST, PUT, DELETE, PATCH, OPTIONS","Access-Control-Allow-Headers":"X-Requested-With, content-type, Authorization",},},
};

vue-cli消费者 webpack.config.js

module.exports = {configureWebpack: {resolve: {fallback: {//禁止webpack在找不到引入的文件的时候用fs模块去查找//模块联邦的模块就是找不到的 webpack尝试在/src下找 在不到再报错 根本就不到远程fs: false }},},chainWebpack: (config) => {/* module federation plugin import */config.optimization.delete("splitChunks");//splitChunks和mf冲突不能用config.plugin("module-federation-plugin").use(require("webpack").container.ModuleFederationPlugin, [{name: "app",remotes: {// 导入 home: "home@http://localhost:4567/remoteEntry.js","moduleFederationLib"://remote模块的module Name是不能带 - 不然会导致导入失败"moduleFederationLib@http://localhost:6780/remoteEntry.js",},},]);},
};

消费者使用:

<script>
export default {name: 'App',components: {HelloWorld: () => import('home/HelloWorld')},mounted() {//采用异步导入import('moduleFederationLib/apiUrl').then(({default: apiUrl}) =>{console.log('apiUrl!',apiUrl)})}
}
</script>

遇到的问题:

问题1.引入远程模块后Uncaught TypeError: Cannot read properties of undefined (reading ‘call’),不引入就没有这个问题

解决方法:

  1. 检查生产者的remoteEntry.js是否正确启动
  2. 检查config中library是否已经设置成window,如果成功设置成window在控制台可以检查

问题2.ScriptExternalLoadError: Loading script failed

解决方法:

  1. 检查splitChunks是否已经设置成false
  2. 检查生产者的remoteEntry.js是否正确启动

问题3.不能够像webpack示例一样 使用静态导入远程模块

原因:
mf提供的模块是远程模块,必须要先加载远程模块才能够像静态模块一样使用

解决方法:
使用动态加载远程模块,再加载消费者
注意:import 静态导入的模块会提升至顶层,所以必须使用动态导入
bootstrap.js

//bootstrap.js
import Vue from 'vue';
Vue.config.productionTip = false;const loadRemoteAndInitApp = async () => {try {//先动态导入远程模块const remote = await import('moduleFederationLib/apiUrl');console.log('Successfully loaded remote component:', remote);//导入成功之后再加载App.vue(消费模块的页面) 一定要确保先加载模块再导入消费者const App = (await import('./App.vue')).default;//创建并挂载 Vue 实例new Vue({render: h => h(App),}).$mount('#app');console.log('Vue app has been mounted.');} catch (error) {console.error('Error loading remote component or initializing Vue app:', error);}
};loadRemoteAndInitApp();

main.js

import './bootstrap'

远程模块消费者App.vue

import APIURl from 'moduleFederationLib/apiUrl'
// 下面就跟正常从文件夹导入就行

相关文章:

vue-cli 5接入模块联邦 module federation

vue-cli 5接入模块联邦 module federation 模块联邦概念实现思路配置遇到的问题: 模块联邦概念 模块联邦由webpack 5最先推出的,让应用加载远程的代码模块来实现不同的Web应用共享代码片段.模块联邦分为两个角色,一个是生产者,一个是消费者.生产者暴露代码供消费者消费 (用一个…...

【Rust自学】3.6. 控制流:循环

3.6.0. 写在正文之前 欢迎来到Rust自学的第三章&#xff0c;一共有6个小节&#xff0c;分别是: 变量与可变性数据类型&#xff1a;标量类型数据类型&#xff1a;复合类型函数和注释控制流&#xff1a;if else控制流&#xff1a;循环&#xff08;本文&#xff09; 通过第二章…...

【第八节】git与github

目录 前言 一、 远程仓库概述 二、 创建、配置、连接推送远程仓库 2.1 在 GitHub 上创建仓库 2.2 生成 SSH Key 2.3 验证 SSH 连接 2.4 本地初始化仓库 2.5 推送本地仓库到远程 三、 管理远程仓库 3.1 查看远程仓库 3.2 提取远程仓库更新 3.3 推送更新到远程仓库 …...

win如何访问Linux数据库(本地)

对于数据库的学习&#xff0c;我们都是在localhost主机上进行操作&#xff0c;当我们在Linux系统上安装数据库时&#xff0c;我们就有了尝试在win上去访问Linux上的数据库的想法。 数据库中的用户&#xff1a; 我们都知道数据库中顶级的用户为root&#xff0c;在做创建用户的联…...

Windows设置所有软件默认以管理员身份运行

方法一、修改注册表 winr打开运行&#xff0c;输入“regedit”打开注册表&#xff1b; 打开此路径“计算机HKEY_LOCAL_MACHINESOFTWAREMicrosoftWindowsCurrentVersionPoliciesSystem”&#xff1b; 在右侧找到“EnableLUA”&#xff0c;将其值改为0&#xff0c;重启电脑。 …...

前端 计算发布时间(如“1小时前”、“3天前”等)

这样效果&#xff0c;在c端比较常见&#xff0c;通过前端也可以处理 代码如下&#xff1a; // 计算 小时timeAgo(createTime) {// 将 createTime 字符串转换为 Date 对象 const createDate new Date(createTime);const now new Date();const diffInSeconds Math.floor((now…...

shardingjdbc 4.0.0 seata分布式事务Failed to fetch schema问题

报错 12-18 15:18:35.931 [ERROR] [i.s.r.d.s.s.cache.AbstractTableMetaCache:63 ] [traceId:][spanId:] - get table meta of the table wh_stock_log error: Failed to fetch schema of xxx java.sql.SQLException: Failed to fetch schema of wh_stock_logat io.seata.r…...

罗德与施瓦茨NRT2功率反射仪,NRT2通过式功率计

罗德与施瓦茨NRT2功率反射仪NRT2 通过式功率计 描述 定向/通过式功率传感器在线测量正向和反向功率。在安装、维修和监控发射机、天线和射频发生器时&#xff0c;需要进行这些测量。R&SNRT系列由R&SNRT2功率反射计及各种R&SNRT Zxx定向功率传感器。 由于其测量功…...

QLineEdit限制输入固定字节数(UTF-8编码)

setMaxLength(int)只能用来限制输入的字符个数 QLineEdit *editor new QLineEdit(parent); editor->setMaxLength(32); 1、如果是单字节字符&#xff0c;如数字&#xff0c;字母等&#xff0c;字符数正好等于字节数 2、如果是多字节字符&#xff0c;UTF8编码时&#xff0…...

基于ubuntu的mysql 8.0安装教程

文章目录 1.查看版本2.切换到root账户3.下载安装包4.问题的解决5.查看是否解压成功6.安装我们的发布包7.更新包的内容8.下载mysql9.查看mysql的状态10.设置开机自启动11.登录mysql 公司里面的mysql根本不会出现在windows操作系统上面&#xff0c;下面我们演示的就是如何在ubunt…...

K8s ConfigMap的基础功能介绍

在 Kubernetes 中&#xff0c;ConfigMap 是一种用于管理配置信息的资源对象&#xff0c;它允许你将 配置信息与代码解耦&#xff0c;方便管理和更新应用配置&#xff0c;而无需重新构建镜像或重启服务。 ConfigMap 的功能 存储配置信息&#xff1a; 可以以 键值对 的形式存储配…...

Linux——Shell

if 语句 格式&#xff1a;if list; then list; [ elif list; then list; ] ... [ else list; ] fi 单分支 if 条件表达式; then 命令 fi 示例&#xff1a; #!/bin/bash N10 if [ $N -gt 5 ]; then echo yes fi # bash test.sh yes 双分支 if 条件表达式; then 命令 else 命令…...

armsom产品编译烧录Linux固件

1、开发环境及工具准备 Rockchip Linux 软件包&#xff1a;linux-5.10-gen-rkr4 主机&#xff1a; 安装VMware搭建虚拟机&#xff0c;版本为Ubuntu 20.04 (硬盘容量大于100G&#xff09; 安装远程连接工具MobaXterm&#xff08;可连接虚拟机方便文件传输&#xff09; 2、S…...

VSCode:Markdown插件安装使用 -- 最简洁的VSCode中Markdown插件安装使用

VSCode&#xff1a;Markdown插件安装使用 1.安装Marktext2.使用Marktext 本文&#xff0c;将在Visual Studio Code中&#xff0c;安装和使用Markdown插件&#xff0c;以Marktext插件为例。 1.安装Marktext 打开VSCode&#xff0c;侧边栏中找到扩展模块(或CtrlShiftX快捷键)&am…...

AI 行业发展趋势:科技创新引领未来变革

在当今数字化时代,人工智能(AI)行业正以前所未有的速度蓬勃发展,深刻地改变着我们的生活、工作和社会格局。从基础技术的突破到广泛的应用场景拓展,AI 展现出了一系列令人瞩目的发展趋势,预示着一个充满无限可能的未来。 一、技术创新持续突破 模型规模与性能提升 AI 模…...

FB爆款打法实操经验总结

在进行Facebook广告投放时&#xff0c;有效的预算控制、素材测试、广告效果评估和lookalike受众的管理是至关重要的。通过科学的方法和策略&#xff0c;您可以在竞争激烈的市场中实现更好的业绩。 01 预算控制 测试阶段的广告不稳定性&#xff1a;在投放广告的初期&#xff0c…...

微信小程序TTS解决方案

微信小程序原生语音合成 API&#xff08;基础且简单&#xff09; 介绍&#xff1a;微信小程序提供了基础的语音合成能力。通过wx.createInnerAudioContext()等相关API&#xff0c;可以实现简单的语音播放功能。不过它主要是用于音频播放&#xff0c;对于完整的文本到语音&#…...

centos stream 8下载安装遇到的坑

早在2020年12月。CentOS 官方发文宣称&#xff1a;“CentOS项目的未来是 CentOS Stream 明年我们会将重点从CentOS Linux 转移到CentOS Stream 它紧随当前 RHEL 版本之前。CentOS Linux 8 作为 RHEL 8 的重建&#xff0c;将于 2021 年底结束。CentOS Stream 在该日期之后继续&a…...

计算机网络——期末复习(1)背诵

背诵 交换机与路由器&#xff1a;交换机连接同一子网&#xff0c;利用帧中的目的物理地址转发帧&#xff0c;工作在数据链路层&#xff1b;路由器连接不同子网&#xff0c;利用IP数据报中的目的IP地址转发IP数据报&#xff0c;工作在网络层。五层的任务&#xff1a;&#xff0…...

AORO M6 Pro单北斗防爆终端全面国产化,关键技术不再“卡脖子”

全球科技竞争日益激烈&#xff0c;核心技术自主创新已成为国家发展的战略基石。面对关键技术被“卡脖子”的风险&#xff0c;中国科技企业正加速推进信息技术应用创新战略&#xff0c;力求在关键领域实现自主可控。遨游通讯推出的一款融合单北斗、鸿蒙系统、5G国产芯片的防爆终…...

OpenLayers 可视化之热力图

注&#xff1a;当前使用的是 ol 5.3.0 版本&#xff0c;天地图使用的key请到天地图官网申请&#xff0c;并替换为自己的key 热力图&#xff08;Heatmap&#xff09;又叫热点图&#xff0c;是一种通过特殊高亮显示事物密度分布、变化趋势的数据可视化技术。采用颜色的深浅来显示…...

Cursor实现用excel数据填充word模版的方法

cursor主页&#xff1a;https://www.cursor.com/ 任务目标&#xff1a;把excel格式的数据里的单元格&#xff0c;按照某一个固定模版填充到word中 文章目录 注意事项逐步生成程序1. 确定格式2. 调试程序 注意事项 直接给一个excel文件和最终呈现的word文件的示例&#xff0c;…...

51c自动驾驶~合集58

我自己的原文哦~ https://blog.51cto.com/whaosoft/13967107 #CCA-Attention 全局池化局部保留&#xff0c;CCA-Attention为LLM长文本建模带来突破性进展 琶洲实验室、华南理工大学联合推出关键上下文感知注意力机制&#xff08;CCA-Attention&#xff09;&#xff0c;…...

【WiFi帧结构】

文章目录 帧结构MAC头部管理帧 帧结构 Wi-Fi的帧分为三部分组成&#xff1a;MAC头部frame bodyFCS&#xff0c;其中MAC是固定格式的&#xff0c;frame body是可变长度。 MAC头部有frame control&#xff0c;duration&#xff0c;address1&#xff0c;address2&#xff0c;addre…...

【入坑系列】TiDB 强制索引在不同库下不生效问题

文章目录 背景SQL 优化情况线上SQL运行情况分析怀疑1:执行计划绑定问题?尝试:SHOW WARNINGS 查看警告探索 TiDB 的 USE_INDEX 写法Hint 不生效问题排查解决参考背景 项目中使用 TiDB 数据库,并对 SQL 进行优化了,添加了强制索引。 UAT 环境已经生效,但 PROD 环境强制索…...

Java如何权衡是使用无序的数组还是有序的数组

在 Java 中,选择有序数组还是无序数组取决于具体场景的性能需求与操作特点。以下是关键权衡因素及决策指南: ⚖️ 核心权衡维度 维度有序数组无序数组查询性能二分查找 O(log n) ✅线性扫描 O(n) ❌插入/删除需移位维护顺序 O(n) ❌直接操作尾部 O(1) ✅内存开销与无序数组相…...

vscode(仍待补充)

写于2025 6.9 主包将加入vscode这个更权威的圈子 vscode的基本使用 侧边栏 vscode还能连接ssh&#xff1f; debug时使用的launch文件 1.task.json {"tasks": [{"type": "cppbuild","label": "C/C: gcc.exe 生成活动文件"…...

前端开发面试题总结-JavaScript篇(一)

文章目录 JavaScript高频问答一、作用域与闭包1.什么是闭包&#xff08;Closure&#xff09;&#xff1f;闭包有什么应用场景和潜在问题&#xff1f;2.解释 JavaScript 的作用域链&#xff08;Scope Chain&#xff09; 二、原型与继承3.原型链是什么&#xff1f;如何实现继承&a…...

html-<abbr> 缩写或首字母缩略词

定义与作用 <abbr> 标签用于表示缩写或首字母缩略词&#xff0c;它可以帮助用户更好地理解缩写的含义&#xff0c;尤其是对于那些不熟悉该缩写的用户。 title 属性的内容提供了缩写的详细说明。当用户将鼠标悬停在缩写上时&#xff0c;会显示一个提示框。 示例&#x…...

基于Java Swing的电子通讯录设计与实现:附系统托盘功能代码详解

JAVASQL电子通讯录带系统托盘 一、系统概述 本电子通讯录系统采用Java Swing开发桌面应用&#xff0c;结合SQLite数据库实现联系人管理功能&#xff0c;并集成系统托盘功能提升用户体验。系统支持联系人的增删改查、分组管理、搜索过滤等功能&#xff0c;同时可以最小化到系统…...