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

源代码 · 2024-9-26 07:01:22

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

npm install @originjs/vite-plugin-federation --save-dev1、新建两个vite+vue的项目（one,two项目名）

one项目中（主）----vite.config.js

留意： 上面图片中的shared这个内里要把你组件中使用到的插件举行添加，如组件中使用路由，vuex，ui框架等，在吸收的时候也要添加上，如许就不会举行报错了，假如你碰到跨域的题目，那就将长途的项目举行npm run preview后进使用用服务路径调试，生产的时候记得举行切换到你线上的路径就行

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

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

在App.vue中举行调用组件
在举行npm run build & npm run preview就可以了
在现实项目中碰到过一个题目，vue打包后在生产情况中提示ui组件个别的组件是undefined，找不到（现在还没有找到是什么缘故因由了）: 办理方法，用到的项目中将ui框架都举行下载到项目中，图片下选中的举行删除就可以了

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

所属分类: 问答交流

新帖推荐: 30日

推荐作品