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'
// 下面就跟正常从文件夹导入就行

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

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

相关文章

【开源免费】基于SpringBoot+Vue.JS在线宠物用品交易网站(JAVA毕业设计)

本文项目编号 T 092 &#xff0c;文末自助获取源码 \color{red}{T092&#xff0c;文末自助获取源码} T092&#xff0c;文末自助获取源码 目录 一、系统介绍二、数据库设计三、配套教程3.1 启动教程3.2 讲解视频3.3 二次开发教程 四、功能截图五、文案资料5.1 选题背景5.2 国内…

【Git 常用操作:pull push】

Git 基本概念 Git 是一个先进的开源的分布式版本控制系统&#xff0c;常用于管理工作内容、项目代码等功能。 Git 工作流程 图片来源&#xff1a;https://www.runoob.com/git/git-basic-operations.html 说明&#xff1a; workspace&#xff1a;工作区staging area&#xff…

thinking claude从入门到精通

什么是thinking claude 简而言之就是一个提示工程,能够激发大模型类人类思考模式。 "Thinking Claude" 是一个由17岁高中生涂津豪开发的项目,旨在增强AI模型Claude-3.5的“深度思维”能力,使它的思考逻辑更加接近人类。这个工具通过引入所谓的“深度思考协议”和…

shell脚本的循环-----while和for循环

一、while 1.格式 while 条件表达式; do 命令 done 2.案例 &#xff1a; ping测试子网段的主机网段由用户输入&#xff0c;例如用户输入192.168.101 &#xff0c;则ping192.168.101.125 — 192.101.131 UP&#xff1a; /tmp/host_up.txt Down: /tmp/host_down.txt &#…

内容与资讯API优质清单

作为开发者&#xff0c;拥有一套API合集是必不可少的。这个开发者必备的API合集汇集了各种实用的API资源&#xff0c;为你的开发工作提供了强大的支持&#xff01;无论你是在构建网站、开发应用还是进行数据分析&#xff0c;这个合集都能满足你的需求。你可以通过这些免费API获…

maven-resources-production:ratel-fast: java.lang.IndexOutOfBoundsException

Maven生产环境中遇到java.lang.IndexOutOfBoundsException的问题&#xff0c;尝试了重启电脑、重启IDEA等常规方法无效&#xff0c;最终通过直接重建工程解决了问题。 Rebuild Project 再启动OK

[数据结构] 链表

目录 1.链表的基本概念 2.链表的实现 -- 节点的构造和链接 节点如何构造? 如何将链表关联起来? 3.链表的方法(功能) 1).display() -- 链表的遍历 2).size() -- 求链表的长度 3).addFirst(int val) -- 头插法 4).addLast(int val) -- 尾插法 5).addIndex -- 在任意位置…

深度学习0-前置知识

一、背景 AI最大&#xff0c;它的目的是通过让机器模仿人类进而超越人类&#xff1b; ML次之&#xff0c;它是AI的一个分支&#xff0c;是让机器模仿人类的一种方法。开发人员用大量数据和算法“训练”机器&#xff0c;让机器自行学会如何执行任务&#xff0c;它的成功取决于…

基于Python Scrapy的豆瓣Top250电影爬虫程序

Scrapy安装 Python实现一个简单的爬虫程序&#xff08;爬取图片&#xff09;_python简单扒图脚本-CSDN博客 创建爬虫项目 创建爬虫项目&#xff1a; scrapy startproject test_spider 创建爬虫程序文件&#xff1a; >cd test_spider\test_spider\spiders >scrapy g…

LabVIEW中的“Synchronize with Other Application Instances“

在LabVIEW中&#xff0c;“Synchronize with Other Application Instances”是一个常见的提示或错误&#xff0c;通常出现在尝试并行运行多个LabVIEW实例时&#xff0c;特别是当你打开多个VI或项目时。这个问题可能影响程序的执行流程&#xff0c;导致不同实例之间的数据同步或…

ResNet50(Residual Network 50 layers)卷积神经网络(CNN)架构。

ResNet50&#xff08;Residual Network 50 layers&#xff09;是深度学习领域中一种非常经典的卷积神经网络&#xff08;CNN&#xff09;架构。它是由微软研究院的Kaiming He等人于2015年提出的&#xff0c;并且在ImageNet图像分类任务上获得了显著的突破。ResNet系列网络的一个…

linux作 samba 服务端,linux windows文件互传,免账号密码

一 ubuntu 安装 sudo apt install samba二 修改samba 配置文件 1 路径 ls -l /etc/samba/smb.conf2 修改文件 a&#xff1a;配置成 匿名用户&#xff0c;无需输入账号 b&#xff1a;注意配置可读写且文件可创建可删除 [global] workgroup SAMBA security user passdb back…

【Linux】AlmaLinux 9.5虚拟机安装过程记录分享

关于AlmaLinux系统感兴趣的&#xff0c;可以去我之前写的另外一篇博客里面看看&#xff1a; https://blog.csdn.net/cnskylee/article/details/143142690 语言&#xff0c;选择【简体中文&#xff08;中国&#xff09;】&#xff0c;点击【继续】&#xff0c;进入后续设置 在…

深度学习——现代卷积神经网络(七)

深度卷积神经网络 学习表征 观察图像特征的提取⽅法。在合理地复杂性前提下&#xff0c;特征应该由多个共同学习的神经⽹络层组成&#xff0c;每个层都有可学习的参数。 当年缺少数据和硬件支持 AlexNet AlexNet⽐相对较⼩的LeNet5要深得多。 AlexNet由⼋层组成&#xff1a…

时间管理系统|Java|SSM|JSP|

【技术栈】 1⃣️&#xff1a;架构: B/S、MVC 2⃣️&#xff1a;系统环境&#xff1a;Windowsh/Mac 3⃣️&#xff1a;开发环境&#xff1a;IDEA、JDK1.8、Maven、Mysql5.7 4⃣️&#xff1a;技术栈&#xff1a;Java、Mysql、SSM、Mybatis-Plus、JSP、jquery,html 5⃣️数据库可…

linux 合并uboot dtb kernel rootfs 文件制作nor flash 烧录镜像

一&#xff1a;需求 将uboot dtb_image rootfs 根据对应的flash地址合并为一个文件方便批量烧录&#xff0c;也适用其他文件的合并 二&#xff1a;制作命令 以uboot (u-boot-with-spl.img): flash 地址 &#xff1a;0x0 dtb_image (zImage-dtb): flash 地址&#xff1…

20241217使用M6000显卡在WIN10下跑whisper来识别中英文字幕

20241217使用M6000显卡在WIN10下跑whisper来识别中英文字幕 2024/12/17 17:21 缘起&#xff0c;最近需要识别法国电影《地下铁》的法语字幕&#xff0c;使用 字幕小工具V1.2【whisper套壳/GUI封装了】 无效。 那就是直接使用最原始的whisper来干了。 当你重装WIN10的时候&#…

PostgreSQL技术内幕21:SysLogger日志收集器的工作原理

0.简介 在前面文章中介绍了事务模块用到的事务日志结构和其工作原理&#xff0c;本文将介绍日志的另一个部分&#xff0c;操作日志&#xff0c;主要去描述SysLogger日志的工作原理&#xff0c;流程以及其中关键的实现&#xff1a;日志轮转&#xff0c;刷盘性能问题等&#xff…

算法题型整理—双指针

整理双指针算法题型 两数之和 II - 输入有序数组 给你一个下标从 1 开始的整数数组 numbers &#xff0c;该数组已按 非递减顺序排列 &#xff0c;请你从数组中找出满足相加之和等于目标数 target 的两个数。如果设这两个数分别是 numbers[index1] 和 numbers[index2] &#…

2025前端面试热门题目——计算机网络篇

计算机网络篇——面试 1. 到底什么是 TCP 连接? TCP 连接的定义 TCP&#xff08;传输控制协议&#xff09;是一个面向连接的传输层协议。TCP 连接是通过 三次握手 确立的可靠数据通信链路&#xff0c;保证了在不可靠网络&#xff08;如互联网&#xff09;上的数据传输的准确…