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

1. const { ModuleFederationPlugin } = require("webpack").container;
2. const path = require("path");
4. module.exports = {
5.   entry: "./index.js",
6.   mode: "development",
7.   output: {
8.     publicPath: "http://localhost:6780/",
9.     clean: true,
10.   },
11.   devServer: {
12.     static: {
13.       directory: path.join(__dirname, "dist"),
14.     },
15.     compress: true,
16.     port: 6780,
17.   },
18.   optimization: {
19.     splitChunks: false,//splitChunks和mf冲突不能用
20.   },
21.   plugins: [
22.     new ModuleFederationPlugin({
23.       name: "moduleFederationLib",
24.       filename: "remoteEntry.js",
25.       library: { type: "window", name: "moduleFederationLib" },
26.       exposes: {
27.         "./react": "react",
28.         "./react-dom": "react-dom",
29.         './apiUrl':"./src/utils/apiUrl"
30.       },
31.     }),
32.   ],
33. };

复制代码

vue-cli生产者 vue.config.js

1. // vue.config.js
2. module.exports = {
3.   publicPath: "http://localhost:4567/",
5.   chainWebpack: (config) => {
6.     /* module federation plugin import */
7.     config.optimization.delete("splitChunks");
8.     config
9.       .plugin("module-federation-plugin")
10.       .use(require("webpack").container.ModuleFederationPlugin, [
11.         {
12.           name: "home", // 模块名称(必须唯一)
13.           filename: "remoteEntry.js",//加载的文件名
14.           library: { type: "window", name: "home" },//type:指定如何将远程模块暴露给其他应用 设置成window才能找到
15.           exposes: {
16.             // 对外暴露的组件
17.             "./HelloWorld": "./src/components/HelloWorld.vue",
18.           },
19.         },
20.       ]);
21.   },
22.   // devSever 一定要设置跨域 能够跨域是整个mf的基础
23.   devServer: {
24.     port: 4567,
25.     hot: true,
26.     headers: {
27.       "Access-Control-Allow-Origin": "*",
28.       "Access-Control-Allow-Methods": "GET, POST, PUT, DELETE, PATCH, OPTIONS",
29.       "Access-Control-Allow-Headers":
30.         "X-Requested-With, content-type, Authorization",
31.     },
32.   },
33. };

复制代码

vue-cli斲丧者 webpack.config.js

1. module.exports = {
2.   configureWebpack: {
3.     resolve: {
4.       fallback: {
5.         //禁止webpack在找不到引入的文件的时候用fs模块去查找
6.         //模块联邦的模块就是找不到的 webpack尝试在/src下找 在不到再报错 根本就不到远程
7.         fs: false
8.       }
9.     },
10.   },
11.   chainWebpack: (config) => {
12.     /* module federation plugin import */
13.     config.optimization.delete("splitChunks");//splitChunks和mf冲突不能用
14.     config
15.       .plugin("module-federation-plugin")
16.       .use(require("webpack").container.ModuleFederationPlugin, [
17.         {
18.           name: "app",
19.           remotes: {
20.             // 导入
21.             home: "home@http://localhost:4567/remoteEntry.js",
22.             "moduleFederationLib"://remote模块的module Name是不能带 - 不然会导致导入失败
23.             "moduleFederationLib@http://localhost:6780/remoteEntry.js",
24.           },
25.         },
26.       ]);
27.   },
28. };

复制代码

斲丧者使用:

1. <script>
2. export default {
3.   name: 'App',
4.   components: {
5.     HelloWorld: () => import('home/HelloWorld')
6.   },
7.   mounted() {
8.     //采用异步导入
9.     import('moduleFederationLib/apiUrl').then(({default: apiUrl}) =>{
10.       console.log('apiUrl!',apiUrl)
11.     })
12.   }
13. }
14. </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

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

复制代码

main.js

1. import './bootstrap'

复制代码

长途模块斲丧者App.vue

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

复制代码