模組聯邦-vite-plugin-federation

主應用

"@originjs/vite-plugin-federation": "^1.3.6"

vite.config.ts

build: {
      emptyOutDir: false,
      chunkSizeWarningLimit: 1000,
      minify: false,
      cssCodeSplit: !pluginOption.isUnionSub, // scc scoped
      target: ["chrome89", "edge89", "firefox89", "safari15"]
    }

外掛

federation({
	name: "tpco_app",
	remotes: {
		"sale": `${option.webUrl}/sale/assets/remoteEntry.js`,
		"product": `${option.webUrl}/product/assets/remoteEntry.js`,
	},
	shared: ["vue", "pinia", "vue-router"]
})

路由載入元件

import {
  __federation_method_setRemote,
  __federation_method_getRemote,
  __federation_method_unwrapDefault
} from "virtual:__federation__";
__federation_method_getRemote("sale", "sale/index.vue")
	.then(moduleWrapped => __federation_method_unwrapDefault(moduleWrapped))
	.then(module => {
	module.name = componentName;
	resolve(module);
});

子應用

const pages = await axios.get(option.webApi + "/base/sysMenu/getMenus");
addPages(pages.data.data.map(item => item.component), option);
// exposePages = { "sale/index.vue": "./src/sale/index.vue" }
vitePlugins.push(federation({
	name: "remote-app",
	filename: "remoteEntry.js",
	// 需要暴露的模組
	exposes: exposePages,
	shared: ["vue", "pinia", "vue-router", "@jhlc/common-core"]
}));