YukiGreen / module-federation-demo

使用webpack5的模块联邦实现vue2、vue3、React项目互通
10 stars 2 forks source link

你好,请问下vue2项目中使用其它项目的组件该怎么使用呢。有示例没啊 #1

Open iaminvictus1993 opened 3 years ago

YukiGreen commented 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页面内动态导入:

YukiGreen commented 3 years ago

上面的回复格式有些不好看,建议看下本项目README.md下面部分的说明,和app2这个小项目的简单使用