"@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_...
基于vite的优势,社区贡献了vite-plugin-federation,可以让我们在本地模块使用远程模块的纯js组件,用以抽取一些公共组件、小团队开发一些相对独立的功能,完成独立部署并提供给其他本地模块使用。 接下来以vue3为例,看一下如何开发、配置和使用vite-plugin-federation来达成我们的想法。 安装vite并创建vue3项目 vite-plugi...
基于vite的优势,社区贡献了vite-plugin-federation,可以让我们在本地模块使用远程模块的纯js组件,用以抽取一些公共组件、小团队开发一些相对独立的功能,完成独立部署并提供给其他本地模块使用。 接下来以vue3为例,看一下如何开发、配置和使用vite-plugin-federation来达成我们的想法。 安装vite并创建vue3项目 vite-plugi...
vite-plugin-federation vite&rollup 模块联邦插件,和webpack 的模块联邦插件兼容模块联邦是一个很不错的前端模块化机制,对于 微前端领域是一个很不错的选择,而且vite-plugin-federation 可以直接与webpack 的构建兼容,对于使用不同构建工具的团队是一个 不错的选择,有利于前端模块化开发,实际上我们同时结合组件仓库也...
webpack5的module-federation让我们看到了一些令人激动的功能,但是有个限制,你必须使用webpack5才能使用module-federation功能,但是你知道的,vite正在迅速发展,我们希望能在vite上使用module-federation,这就是创建vite-plugin-federation的原因。 示例 该示例位于以下位置,可以自由前往获取 ...
使用Vike 和 vite-plugin-federation 进行微前端 Vike 不能仅用于构建微前端;它必须与模块联合插件集成,该插件允许您在不同的应用程序之间共享组件和状态。在 Vite 生态系统中,一个流行的选项是 vite-plugin-federation。 要使用 vite-plugin-federation,我们需要设置至少两个项目,其中一个将充当主机,另一个将作为远...
npm install @originjs/vite-plugin-federation --save-dev 1、新建两个vite+vue的项目(one,two项目名) one项目中(主)---vite.config.js image.png 注意:上面图片中的shared这个里面要把你组件中使用到的插件进行添加,如组件中使用路由,vuex,ui框架等,在接收的时候也要添加上,这样就不会进行报错了,如果你遇...
vite-plugin-federation vite&rollup 模块联邦插件,和webpack 的模块联邦插件兼容模块联邦是一个很不错的前端模块化机制,对于 微前端领域是一个很不错的选择,而且vite-plugin-federation 可以直接与webpack 的构建兼容,对于使用不同构建工具的团队是一个
webpack5的module-federation让我们看到了一些令人激动的功能,但是有个限制,你必须使用webpack5才能使用module-federation功能,但是你知道的,vite正在迅速发展,我们希望能在vite上使用module-federation,这就是创建vite-plugin-federation的原因。 示例 该示例位于以下位置,可以自由前往获取 ...
// vite.config.jsimportfederationfrom"@originjs/vite-plugin-federation";exportdefault{plugins:[federation({name:'host-app',remotes:{remote_app:"http://localhost:5001/assets/remoteEntry.js",},shared:['vue']})]} for a rollup project, modifyrollup.config.js: ...