Open iaminvictus1993 opened 3 years ago
两个Vue2.x项目之间共享模块 app1和app2均是vue2.x的小项目,
app1中暴露出可以共享的模块:
const Mfp = require('webpack').container.ModuleFederationPlugin;
// webpack的基本配置 module.exports = { plugins: [ new Mfp({ name: 'app1', filename: "remoteEntry1.js", exposes: { "./appHome": "./src/views/Home.vue", "./myHome": "./src/views/MyHome.vue", "./storeAppOne": "./src/store/index.js", } }) ], }; app2中使用app1的方式有两种:
一种是在配置文件中导入
... const Mfp = require('webpack').container.ModuleFederationPlugin;
// webpack的基本配置 module.exports = { ...... plugins: [ new Mfp({ name: 'app2', filename: "remoteEntry2.js", exposes: { "./appHome": "./src/App.vue" }, remotes: { // app1: 'app1@http://localhost:8889/dist/remoteEntry1.js', app1: 'app1@http://localhost:8888/remoteEntry1.js', }, }) ], }; 另一种是在app2vue页面内动态导入:
上面的回复格式有些不好看,建议看下本项目README.md下面部分的说明,和app2这个小项目的简单使用
两个Vue2.x项目之间共享模块 app1和app2均是vue2.x的小项目,
app1中暴露出可以共享的模块:
const Mfp = require('webpack').container.ModuleFederationPlugin;
// webpack的基本配置 module.exports = { plugins: [ new Mfp({ name: 'app1', filename: "remoteEntry1.js", exposes: { "./appHome": "./src/views/Home.vue", "./myHome": "./src/views/MyHome.vue", "./storeAppOne": "./src/store/index.js", } }) ], }; app2中使用app1的方式有两种:
一种是在配置文件中导入
... const Mfp = require('webpack').container.ModuleFederationPlugin;
// webpack的基本配置 module.exports = { ...... plugins: [ new Mfp({ name: 'app2', filename: "remoteEntry2.js", exposes: { "./appHome": "./src/App.vue" }, remotes: { // app1: 'app1@http://localhost:8889/dist/remoteEntry1.js', app1: 'app1@http://localhost:8888/remoteEntry1.js', }, }) ], }; 另一种是在app2vue页面内动态导入: