vite + vue3+ts 模块联邦的使用总结

434 阅读1分钟

主要使用@originjs/vite-plugin-federation vite插件使用,其中具体的使用方式查看相关文档

问题一

在使用过程中当引用项目的或者被引用的项目中的跟目录html文件中有style样式或者引入的css文件,则会报一个类似的错误,可将要全局引入的样式文件放到main.js中处理

image.png

问题二

当暴露的组件有组件内样式且 scoped 只用于组件内时,当作为远程组件时该样式无法生效,主要是因为如果时组件内的样式,在打包后class会加上属性标识,而当作为远程组件引入时,元素的class则没有该标识,导致无法加载相应的样式,所以需求去掉scoped ,要注意样式覆盖问题

问题三

当组件作为远程组件时一定要将组件所引用到的插件在share中共享,否则在导入远程组件时可以导入,也可以注册组件,但是无法显示,组件加载时会报一系列的错误(调试了很久,没有仔细查看文档)

问题四 当有多个组件需要导出时,可以将多个组件映入一个出口文件,然后将这个出口文件导出,在引入时通过import()导入这个出口文件,然后获取其中的组件module,当然也可以单个导出,组件引入可以使用defineAsyncComponent(), js/ts/json等文件用import()导入