在vite+vue中使用@originjs/vite-plugin-federation模块联邦

• 参考链接https://github.com/originjs/vite-plugin-federation/blob/main/README-zh.md，里面也有dome可以进行查看
• webpack也有这个插件，比vite好用，vite不支持本地，必须要打包后开启服务才可以
• 先下载(只要用到的项目都需要进行下载)

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

最后编辑于 ： 2023.05.08 16:42:02 © 著作权归作者所有,转载或内容合作请联系作者