在vite+vue中使用@originjs/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框架等,在接收的时候也要添加上,这样就不会进行报错了,如果你遇到跨域的问题,那就将远程的项目进行npm run preview后进行使用服务路径调试,生产的时候记得进行切换到你线上的路径就行

image.png

  • 完事之后,进行npm run build & npm run preview 此时将这个打包后的服务链接拿上

2、two项目中(调用主项目中的组件)---vite.config.js

image.png
  • 在App.vue中进行调用组件


    image.png
  • 在进行npm run build & npm run preview就可以了

  • 在实际项目中遇到过一个问题,vue打包后在生产环境中提示ui组件个别的组件是undefined,找不到(目前还没有找到是什么原因了): 解决方法,用到的项目中将ui框架都进行下载到项目中,图片下选中的进行删除就可以了


    image.png
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容