当前位置: 首页 > 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国产芯片的防爆终…...

RestClient

什么是RestClient RestClient 是 Elasticsearch 官方提供的 Java 低级 REST 客户端&#xff0c;它允许HTTP与Elasticsearch 集群通信&#xff0c;而无需处理 JSON 序列化/反序列化等底层细节。它是 Elasticsearch Java API 客户端的基础。 RestClient 主要特点 轻量级&#xff…...

Android Wi-Fi 连接失败日志分析

1. Android wifi 关键日志总结 (1) Wi-Fi 断开 (CTRL-EVENT-DISCONNECTED reason3) 日志相关部分&#xff1a; 06-05 10:48:40.987 943 943 I wpa_supplicant: wlan0: CTRL-EVENT-DISCONNECTED bssid44:9b:c1:57:a8:90 reason3 locally_generated1解析&#xff1a; CTR…...

CVPR 2025 MIMO: 支持视觉指代和像素grounding 的医学视觉语言模型

CVPR 2025 | MIMO&#xff1a;支持视觉指代和像素对齐的医学视觉语言模型 论文信息 标题&#xff1a;MIMO: A medical vision language model with visual referring multimodal input and pixel grounding multimodal output作者&#xff1a;Yanyuan Chen, Dexuan Xu, Yu Hu…...

椭圆曲线密码学(ECC)

一、ECC算法概述 椭圆曲线密码学&#xff08;Elliptic Curve Cryptography&#xff09;是基于椭圆曲线数学理论的公钥密码系统&#xff0c;由Neal Koblitz和Victor Miller在1985年独立提出。相比RSA&#xff0c;ECC在相同安全强度下密钥更短&#xff08;256位ECC ≈ 3072位RSA…...

R语言AI模型部署方案:精准离线运行详解

R语言AI模型部署方案:精准离线运行详解 一、项目概述 本文将构建一个完整的R语言AI部署解决方案,实现鸢尾花分类模型的训练、保存、离线部署和预测功能。核心特点: 100%离线运行能力自包含环境依赖生产级错误处理跨平台兼容性模型版本管理# 文件结构说明 Iris_AI_Deployme…...

前端倒计时误差!

提示:记录工作中遇到的需求及解决办法 文章目录 前言一、误差从何而来?二、五大解决方案1. 动态校准法(基础版)2. Web Worker 计时3. 服务器时间同步4. Performance API 高精度计时5. 页面可见性API优化三、生产环境最佳实践四、终极解决方案架构前言 前几天听说公司某个项…...

深入浅出:JavaScript 中的 `window.crypto.getRandomValues()` 方法

深入浅出&#xff1a;JavaScript 中的 window.crypto.getRandomValues() 方法 在现代 Web 开发中&#xff0c;随机数的生成看似简单&#xff0c;却隐藏着许多玄机。无论是生成密码、加密密钥&#xff0c;还是创建安全令牌&#xff0c;随机数的质量直接关系到系统的安全性。Jav…...

对WWDC 2025 Keynote 内容的预测

借助我们以往对苹果公司发展路径的深入研究经验&#xff0c;以及大语言模型的分析能力&#xff0c;我们系统梳理了多年来苹果 WWDC 主题演讲的规律。在 WWDC 2025 即将揭幕之际&#xff0c;我们让 ChatGPT 对今年的 Keynote 内容进行了一个初步预测&#xff0c;聊作存档。等到明…...

反射获取方法和属性

Java反射获取方法 在Java中&#xff0c;反射&#xff08;Reflection&#xff09;是一种强大的机制&#xff0c;允许程序在运行时访问和操作类的内部属性和方法。通过反射&#xff0c;可以动态地创建对象、调用方法、改变属性值&#xff0c;这在很多Java框架中如Spring和Hiberna…...

WebRTC从入门到实践 - 零基础教程

WebRTC从入门到实践 - 零基础教程 目录 WebRTC简介 基础概念 工作原理 开发环境搭建 基础实践 三个实战案例 常见问题解答 1. WebRTC简介 1.1 什么是WebRTC&#xff1f; WebRTC&#xff08;Web Real-Time Communication&#xff09;是一个支持网页浏览器进行实时语音…...