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

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

news 来源：原创 2025/5/22 19:48:16

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

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

模块联邦概念

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

实现思路

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

配置

我是vue-cli 接入webpack应用,vue-cli接vue-cli用vue-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’),不引入就没有这个问题

解决方法:

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

问题2.ScriptExternalLoadError: Loading script failed

解决方法:

检查splitChunks是否已经设置成false
检查生产者的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应用共享代码片段.模块联邦分为两个角色,一个是生产者,一个是消费者.生产者暴露代码供消费者消费 (用一个…...

编程日记 2025/5/22 19:48:16

[前端]mac安装nvm（node.js）多版本管理

NVM功能简介 NVM（Node Version Manager）是一个用于管理多个Node.js版本的命令行工具，它允许开发者在同一台机器上安装、切换和卸载不同版本的Node.js，从而解决版本不兼容的问题。以下是NVM的一些主要功能和用途： 安装和…...

编程日记 2025/5/22 19:39:55

thinkphp8+layui分页

前端 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>demo</title><link href"//unpkg.com/layui2.9.20/dist/css/layui.css" rel"stylesheet"> </head> <…...

编程日记 2025/5/16 17:43:48

【NLP高频面题 - Transformer篇】Transformer的位置编码是如何计算的？

【NLP高频面题 - Transformer篇】Transformer的位置编码是如何计算的？ 重要性：★★★ NLP Github 项目： NLP 项目实践：fasterai/nlp-project-practice 介绍：该仓库围绕着 NLP 任务模型的设计、训练、优化、部署和应用…...

编程日记 2025/5/22 19:38:14

VSCode搭建Java开发环境 2024保姆级安装教程（Java环境搭建+VSCode安装+运行测试+背景图设置）

名人说：一点浩然气，千里快哉风。—— 苏轼《水调歌头》创作者：Code_流苏(CSDN) 目录一、Java开发环境搭建二、VScode下载及安装三、VSCode配置Java环境四、运行测试五、背景图设置很高兴你打开了这篇博客，更多详细的安装教程&…...

编程日记 2025/5/22 19:25:36

计算机网络压缩版

计算机网络到现在零零散散也算过了三遍，一些协议大概了解，但总是模模糊糊的印象，现在把自己的整体认识总结一下，（本来想去起名叫《看这一篇就够了》，但是发现网上好的文章太多了，还是看这篇吧&a…...

编程日记 2025/5/22 19:34:14

大语言模型中的Agent；常见的Agent开发工具或框架

大语言模型中的Agent 大语言模型中的Agent是指以大语言模型为核心驱动，具有自主理解、感知、规划、记忆和使用工具等能力，能够自动化执行复杂任务的系统.以下是一些例子： AutoGPT：它相当于一个完整的工具包，可以为各种项目构建和运行自定义AI Agent。使用OpenAI的GPT-4和…...

编程日记 2025/5/19 22:00:19

设计模式-备忘录模式

背景游戏角色恢复问题：角色有攻击力和防御力，在Boss站前保存攻击力和防御力，大战之后，攻击力和防御力下降，从备忘录恢复到大战前的状态。传统思路： 一个游戏对象，对应一个保存状态对象。 …...

编程日记 2025/5/15 9:41:02

重温设计模式--状态模式

文章目录状态模式（State Pattern）概述状态模式UML图作用：状态模式的结构环境（Context）类：抽象状态（State）类：具体状态（Concrete State）类&#x…...

编程日记 2025/5/19 14:28:48

道可云人工智能元宇宙每日资讯｜2024（GIAC）智能视听大会在青岛举行

道可云元宇宙每日简报（2024年12月23日）讯，今日元宇宙新鲜事有： 2024（GIAC）智能视听大会在青岛举行 12月22日，2024（GIAC）智能视听大会在青岛举行。大会以“数字文化智能…...

编程日记 2025/5/22 15:43:06

理解神经网络

神经网络是一种模拟人类大脑工作方式的计算模型，是深度学习和机器学习领域的基础。基本原理神经网络的基本原理是模拟人脑神经系统的功能，通过多个节点（也叫神经元）的连接和计算，实现非线性模型的组合和输出。每个…...

编程日记 2025/5/20 23:47:53

初学stm32 --- NVIC中断

目录 STM32 NVIC 中断优先级管理 NVIC_Type: ISER[8]： ICER[8]： ISPR[8]： ICPR[8]： IABR[8]： IP[240]： STM32 的中断分组： 中断优先级分组函数 NVIC_PriorityGroupConfig 中断初始化函…...

编程日记 2025/5/20 7:47:48

机器人角度参考方式

机器人的角度可以根据需求和系统设计来决定。通常情况下，机器人角度（如航向角或偏航角）有两种常见的参考方式： 参考开机时的 0：这是最常见的方式，机器人在开机时会将当前的方向作为 0（即参考方向…...

编程日记 2025/5/19 15:38:57

不同路径

不同路径一个机器人位于一个 m x n 网格的左上角 （起始点在下图中标记为 “Start” ）。机器人每次只能向下或者向右移动一步。机器人试图达到网格的右下角（在下图中标记为 “Finish” ）。问总共有多少条不同的路径&#xff…...

编程日记 2025/5/17 20:47:46

WPS工具栏灰色怎么办

WPS离线不登录，开启工具栏等相关功能当你在使用WPS的过程中，若因网络问题或其他特殊原因，导致无法登录使用WPS时，可根据以下步骤开启离线兼容模式，开启此模式后，可在未登录的状态下，激活并使用…...

编程日记 2025/5/22 13:44:55

js的节流与防抖方法封装

简介节流（Throttling）和防抖（Debouncing） 是防止频繁触发函数执行的两种技术，它们的目标都是减少函数的执行次数。区别防抖（Debouncing） ：当用户停止触发事件后，经…...

编程日记 2025/5/22 16:29:10

深信服企业级数据备份与恢复系统（整机裸机恢复）

概述深信服企业级数据备份与恢复系统可实现无需搭建目标环境，目标机可以是没有操作系统的物理主机或虚拟机，实现异构环境下的裸机恢复。深信服企业级数据备份与恢复系统支持的多种连接恢复方式： 1. PXE连接恢复：PXE连接需要做…...

编程日记 2025/5/19 8:44:09

uniapp 微信小程序页面部分截图实现

uniapp 微信小程序页面部分截图实现原理都是将页面元素画成canvas 然后将canvas转化为图片，问题是我页面里边本来就有一个canvas，ucharts图画的canvas我无法画出这块。想了一晚上，既然canvas最后能转化为图片，那我直接…...

编程日记 2025/5/19 3:47:34

Sequelize ORM sql 语句工具

Sequelize ORM sql 语句工具 sequelize orm中文网视频学习长乐未央初始化配置 Sequelize orm 配置文章落日沉溺于海在命令行中全局安装 npm i -g sequelize-clisequelize 执行需要匹配 mysql2 对应的依赖（安装 mysql2） npm i sequelize mysql2初始化…...

编程日记 2025/5/22 10:36:26

搭建Nacos注册中心

Nacos介绍目前开源的注册中心框架有很多，国内比较常见的有： Eureka：Netflix公司出品，目前被集成在SpringCloud当中，一般用于Java应用 Nacos：Alibaba公司出品，目前被集成在SpringCloudAlibaba中…...

编程日记 2025/5/21 21:07:44

Linux 下SVN新手操作手册

下面来介绍Linux 下 SVN操作方法： 1、SVN的安装 Centos 7 安装Subversion sudo yum -y install subversion Ubuntu 安装Subversion sudo apt-get install subversion 自定义安装，官方地址：https://subversion.apache.org/ 2、SVN的使用…...

编程日记 2025/5/22 8:21:56

解释下什么是面向对象？面向对象和面向过程的区别？

看着很基础是吧，你还真不一定会 4-Java 中创建对象的几种方式？ 1、使用new关键字，最常见的创建方式，通过调用类的构造方法（构造器）来创建对象。 2、使用反射，通过java的反射API可以动态的创建对…...

编程日记 2025/5/21 0:52:17

【CDN】快速了解CDN是什么？以及工作原理和应用场景

快速了解CDN是什么？以及工作原理和应用场景一、什么是CDN？CDN相关的术语解释二、CDN工作原理三、CDN与传统网站的区别四、CDN的作用和意义五、CDN的应用场景一、什么是CDN？ CDN英文全称Content Delivery Network，中文翻译即为内…...

编程日记 2025/5/21 7:02:09

【计算机视觉基础CV-图像分类】05 - 深入解析ResNet与GoogLeNet：从基础理论到实际应用

引言在上一篇文章中，我们详细介绍了ResNet与GoogLeNet的网络结构、设计理念及其在图像分类中的应用。本文将继续深入探讨如何在实际项目中应用这些模型，特别是如何保存训练好的模型、加载模型以及使用模型进行新图像的预测。通过这些步骤，读…...

编程日记 2025/5/21 6:28:40

WPF+MVVM案例实战与特效（四十五）- 打造优雅交互：ListBox 的高级定制与行为触发（侧边菜单交互面板）

文章目录 1、引言2、案例效果3、案例实现1、依赖安装2、文件创建3、代码实现1、依赖引用与上下文2、个性化视觉效果：自定义 ItemContainerStyle3、页面样式与布局完整代码4、ViewModel 逻辑实现5、子界面代码：3、实现效果4、源代码获取5、总结1、引言在WPF应用程序开发中，…...

编程日记 2025/5/16 0:28:26

Git进阶：本地或远程仓库如何回滚到之前的某个commit

在Git的使用过程中，我们经常会遇到需要回滚到之前某个commit的情况。无论是为了修复错误、撤销更改，还是为了重新组织代码，回滚到特定commit都是一个非常有用的技能。本文将介绍几种常用的回滚方法，帮助读者更好地掌握Git版本控制…...

编程日记 2025/5/6 22:21:36

Django 后端数据传给前端

Step 1 创建一个数据库 Step 2 在Django中点击数据库连接 Step 3 连接成功 Step 4 settings中找DATABASES Step 5 将数据库挂上面将数据库引擎和数据库名改成自己的 Step 6 在_init_.py中加上数据库的支持语句 import pymysql pymysql.install_as_MySQLdb()Step7 简单创建两列…...

编程日记 2025/5/19 9:27:55

Docker 技术系列之安装多版本Mysql5.6和Mysql5.7

image 大家好，后面的就不是关于MAC专有的内容，基本是跟Java环境，基础技术方面有关。所以这个教程对于在linux系统还是macOS都是通用的，不用担心。上一篇，我们安装好对应的Docker之后，感受到了它的便利。接…...

编程日记 2025/5/19 2:45:33

C# 范围判断函数

封装范围函数 public static class CommonUtil {/// <summary>/// 范围判断函数，检查给定的值是否在指定的最小值和最大值之间。/// 例如，可以用来判断当前日期是否在开始日期和结束日期之间。/// 该方法适用于任何实现了 IComparable 接口的类型…...

编程日记 2025/5/21 19:11:18

技术速递｜使用 Dependabot 管理 .NET SDK 更新

作者：Jamie Magee - 高级软件工程师排版：Alan Wang 保持 .NET SDK 版本的更新对于维护安全高效的应用程序至关重要。现在 Dependabot 可以在 global.json 中更新 .NET SDK 版本，这使您可以比以往更轻松地确保自己的应用程序始终运行最新的安…...

编程日记 2025/5/16 21:05:52

笔记本通过HDMI转VGA线连接戴尔显示器，wifi不可用或网速变慢

早上开开心心的来使用我的分屏显示器，结果winP开拓展，我的wifi就断掉了，琢磨了好一阵我以为是wifi的问题，发现不进行拓展，网络又好了，一上午就研究这个了，说是hdmi信号干扰了wifi信号啥的额&…...

编程日记 2025/5/22 16:21:09

Excel中match（）函数

函数功能概述 MATCH 函数是 Excel 中用于在指定区域中查找特定值的位置的函数。它返回指定数值在指定数组区域中的位置。这个位置是相对于查找区域的相对位置，而不是绝对的单元格位置。语法结构 MATCH(lookup_value, lookup_array, match_type)lookup_value&#xf…...

编程日记 2025/5/17 13:44:58

ACl访问控制列表

ACL的原理 ACL也称为访问控制列表，主要有包过滤的功能，同时也是包过滤防火前的本质其方式主要是定立规则，这些规则控制着数据包的允许或者通过 ACL的场景如下图，在全网互通的情况下，控制特定的数据包走向例如控…...

编程日记 2025/5/17 10:40:46

android 用户空间切换流程

在Android开发中，创建和切换用户是一个重要的功能，特别是在需要多用户支持的应用中，下面讲述一下用户切换的流程。一、CarUserManager.java 准备创建新用户，可以减少真正创建用户的时间 @RequiresPermission(anyOf = {Manifest.permission.MANAGE_USERS,Manifest.permis…...

编程日记 2025/5/22 14:06:08

突破续航瓶颈：数字样机技术引领新能源汽车复合制动新方向

随着我国经济快速发展和人民生活水平不断提升，汽车保有量截至2023年9月底就已达到了3.3亿，同比增长6.32%。庞大的汽车保有量对我国的环境和能源都产生了巨大的压力，具备节能环保优势的新能源汽车对于有效解决环境恶化和能源危机问题具有重要意…...

编程日记 2025/5/16 7:33:18

51单片机仿真摇号抽奖机源程序 12864液晶显示

资料下载地址：51单片机仿真摇号抽奖机源程序12864液晶显示仿真程序一、功能介绍单片机连接12864（st7920）液晶显示器和1个按键接INT0，模拟一个抽奖机。实现效果： 1、液晶初始显示“祝你好运！”&#xff…...

编程日记 2025/5/16 17:33:39

路由器的原理

✍作者：柒烨带你飞 💪格言：生活的情况越艰难，我越感到自己更坚强；我这个人走得很慢，但我从不后退。 📜系列专栏：网路安全入门系列目录路由器的原理一，路由器基础及相关…...

编程日记 2025/5/17 10:35:17

Vue（四）

1.Vuex 1.1 Vuex是什么 Vuex 是一个插件，可以帮我们管理 Vue 通用的数据。例如：购物车数据、个人信息数据。 1.2 vuex的使用 1.安装 vuex 安装 vuex 与 vue-router 类似，vuex 是一个独立存在的插件，如果脚手架初始化没有选 v…...

编程日记 2025/5/18 17:48:25

今日总结 2024-12-23

项目初始化拉取代码与环境配置： 难点：Git 命令不熟悉，依赖文件定位不准，启动脚本含义不明。解决办法：系统学习 Git 基础操作，如通过官方文档、优质的 Git 教程视频，反复练习克隆、分支切换等常…...

编程日记 2025/5/20 15:58:50

Vue常用指令

1. 插值表达式 {{}} <script setup> let msg="hello vue!" </script> <template> <h1>{{ msg }}--{{ 1+1 }}--{{ msg+sb }}</h1> </template> 2. Vue 常用指令 (以v- 开头) 2.1 v-html 替换标签元素内容，包含标签…...

编程日记 2025/5/21 14:04:28

欢乐力扣1-10

文章目录前言1、合并两个有序数组1.1.描述 2、移除元素2.1.描述2.2.思路 3、删除有序数组中的重复元素3.1.描述3.2.思路 4、输出有序数组中的重复项二4.1.描述4.2.思路 5、多数元素5.1.描述5.2.思路 6、轮转数组6.1.描述6.2.思路 7、买卖股票最佳时机一7.1.思路 8、买卖股票最…...

编程日记 2025/5/20 19:59:30

[创业之路-204]：《华为战略管理法-DSTE实战体系》- 5-平衡记分卡绩效管理

目录一、平衡计分卡概述 1、平衡计分卡的基本概念 2、平衡计分卡的发展阶段 3、平衡计分卡在华为的应用 4、平衡计分卡的优缺点五、财务（股东）、顾客（用户）、内部运营（内部）及学习与发展&#xff0…...

编程日记 2025/5/21 20:27:38

算法设计期末复习

文章目录 1. 什么是算法，算法有哪些特征，算法设计的基本步骤，算法的时间复杂度的确定2. 什么是算法分析，算法分析的主要内容是什么？怎么确定算法的时间复杂度？3. 什么是分治算法，分治算法通常用…...

编程日记 2025/5/17 17:55:54

芝法酱学习笔记（2.2）——sql性能优化2

一、前言在上一节中，我们使用实验的方式，验证了销售单报表的一些sql性能优化的猜想。但实验结果出乎我们的意料，首先是时间查询使用char和datetime相比，char可能更快，使用bigint（转为秒）和cha…...

编程日记 2025/5/19 2:15:35

Linux 安装 nvm 网上用curl命令安装的方式都下载不成功，直接使用压缩包安装 ####### wget https://github.com/nvm-sh/nvm/archive/refs/tags/v0.39.1.tar.gz mkdir -p /root/.nvm tar xvf nvm-0.39.1.tar.gz -C /root/.nvm#######vi ~/.bashrc,在~/.bashrc的末尾…...

编程日记 2025/5/18 12:57:29

图像处理基础 | 查看两张图像的亮度差异,Y通道相减

两张图像的Y通道相减通常用于图像差异分析或比较，尤其是在亮度方面。具体来说，这一操作是基于YCbCr颜色空间中的Y通道进行的，其中Y通道代表图像的亮度信息（亮度成分），而Cb和Cr通道分别代表色度成分&#xf…...

编程日记 2025/5/21 2:24:34

机器学习-43-可解释性机器学习库LIME

文章目录 1 LIME1.1 LIME的特点1.2 LIME的步骤2 应用LIME2.1 分类模型2.1.1 创建模型和解释器2.1.2 解释样本2.2 回归模型2.2.1 创建模型和解释器2.2.2 解释样本2.3 文本模型2.3.1 创建模型和解释器2.3.2 解释样本2.4 图像模型2.4.1 创建模型和解释器2.4.2 解释样本3 附录3.1 l…...

编程日记 2025/5/16 10:03:32

RestTemplate关于https的使用详解

RestTemplate关于https的使用详解一、restTemplate注入到bean里面。 Configuration public class RestTempleConfig {BeanPrimarypublic RestTemplate restTemplate() {return new RestTemplate();}/*** https 请求的 restTemplate* return* throws Exception*/Beanpublic R…...

编程日记 2025/5/14 10:29:56

【23种设计模式·全精解析 | 行为型模式篇】11种行为型模式的结构概述、案例实现、优缺点、扩展对比、使用场景、源码解析

Hiヽ(゜▽゜　)－欢迎来到蓝染Aizen的CSDN博客~ 🔥 博客主页： 【✨蓝染の Blog😘】 💖感谢大家点赞👍 收藏⭐ 评论✍ 文章目录行为型模式1、模板方法模式（1）概述（2&…...

编程日记 2025/5/21 10:53:34

CNN、RNN、LSTM和Transformer之间的区别和联系

文章目录 CNN、RNN、LSTM和Transformer之间的区别和联系前言CNN（卷积神经网络）RNN（循环神经网络）LSTM（长短期记忆网络）Transformer四者之间的联系与区别Yolo算法简介Yolo和CNN的关系YOLO各版本 CNN、RNN、L…...

编程日记 2025/5/20 13:21:12

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

模块联邦概念

实现思路

配置

遇到的问题:

相关文章：