@ueba/mf-config

用于生成 Module Federation 配置

使用方法

1.安装yarn add -D @ueba/mf-config
2.项目根目录中创建 mf.config.js 配置文件
3.配置 port ModuleFederationPlugin 及 proxy

// vue.config.js
const { generateConfig } = require("@ueba/mf-config");
const mfConfig = generateConfig();

module.exports = {
  //...
  configureWebpack: {
    plugins: [
      new ModuleFederationPlugin({
        ...mfConfig.plugin,
      }),
    ],
  },
  devServer: {
    port: mfConfig.port,
    proxy: {
      ...mfConfig.proxy,
    },
  },
};

mf.config.js 配置参数

| 参数 | 说明 | 类型 | 必填 | 可选值 | 默认值 | | -------------------- | --------------------------------------------------------------- | ------ | ---- | ------------ | ------ | | name | 服务的唯一名称，会使用 name 作为微服务名称，及代理/部署路径 | string | Y | - | - | | moduleName | 指定微服务暴露名称，默认会使用 name 的小驼峰写名称 | string | N | - | - | | port | 服务本地运行端口，建议微服务项目指定端口号 | number | N | - | 8080 | | exposes | 微服务导出的文件 | object | N | - | - | | services | 引入的微服务 | array | N | - | - | | services.name | 微服务的名称，同上面的 name | string | Y | - | - | | services.mode | 微服务引入模式，对应 target 下的 dev prod | string | N | dev prod | dev | | services.target | 微服务请求地址 | object | Y | - | - | | services.target.dev | 对应 mode 为 dev 的地址 | string | Y | - | - | | services.target.prod | 对应 mode 为 prod 的地址 | string | Y | - | - |

// 示例主机配置文件 ueba
module.exports = {
  name: "ueba",
  port: 8080,
  exposes: {
    "./components": "./src/components/expose",
    "./utils": "./src/utils/expose",
  },
  services: [
    {
      name: "dashboard",
      mode: "dev",
      target: {
        dev: "http://localhost:9001",
        prod: "http://10.10.26.129",
      },
    },
  ],
};

// 示例微服务配置文件 dashboard
module.exports = {
  name: "dashboard",
  port: 9001,
  exposes: {
    "./register": "./src/views/dynamic-dashboard/dashboard.js",
    "./router/routers": "./src/router/routers",
    "./router/exportRoute": "./src/router/exportRoute",
    "./Store/dashboard": "./src/store/modules/dynamic-dashboard.js",
    "./dashboard/Components": "./src/expose",
  },
  services: [],
};