最近在开发一个 vue 3 低代码项目时，遇到了加载远程组件的需求。这些组件名称不固定，存储在数据库中，需要通过 api 获取组件信息来确定可用组件。本文将探讨两种解决方案，并重点分析在 vue 3 项目中加载 esm/umd 组件时遇到的问题及解决方案。
方案一：HTML 文件加载 UMD 组件
最简单的方案是将组件打包成 UMD 格式，然后在 HTML 文件中直接使用 标签加载。
// 加载组件 await loadscript('http://localhost/component/input/0.1.0/bundle.js'); app.component('testinput', window.testinput);
然而，这种方法效率较低，不适合大型项目。
方案二：Vue 3 项目加载 ESM/UMD 组件
立即学习“前端免费学习笔记（深入）”；
在低代码项目中，我采用了这种方案，并克服了两个主要挑战：
挑战一：相对引用错误
由于项目无需兼容 IE，组件可打包为 ESM 格式。例如：
import { reactive } from 'vue';// ...其他代码
在项目中使用：
const { default: testinput } = await import('http://localhost/component/input/0.1.0/bundle.mjs');
直接使用 import { reactive } from 'vue' 会导致“相对引用必须以 ‘/’、’./’ 或 ‘../’ 开头”的错误。这是因为浏览器不支持直接导入，需要将 ‘vue’ 替换为绝对路径或相对路径。通常构建工具会自动处理，但远程组件则需要特殊处理。
挑战二：Vue 3 上下文不兼容
最初尝试将组件及其依赖项一起打包，但仍然失败。原因是项目中的 Vue 3 上下文与 node_modules 中的 Vue 3 上下文不兼容，它们需要共享相同的上下文才能正常工作。
即使方法名相同，变量也不一致，导致远程组件无法正常加载。
解决方案
最终的解决方案如下：
将 import { reactive } from 'vue' 替换为 const { reactive } = vue，避免相对引用错误。在 main.js 中导入完整的 Vue 3 实例，而不是将其与组件代码一起打包，确保项目和远程组件使用相同的 Vue 上下文。
为了简化代码转换，我开发了一个 Rollup 插件 rollup-plugin-import-to-const (同时支持 Vite 和 Rollup)，它自动将 import { reactive } from 'vue' 转换为 const { reactive } = vue。
最终的组件加载代码：
const { default: testinput } = await import('http://localhost/component/input/0.1.0/bundle.mjs');
通过解决这两个问题，可以加载任何格式的远程组件 (ESM/UMD/CJS 等)。
总结
除了本文提到的两种方案，还可以使用 vue3-sfc-loader 或 Webpack 5 Module Federation 等技术加载远程组件。选择哪种方案取决于项目的具体需求。 加载远程组件通常用于低代码平台。
以上就是如何在 Vue 3 中加载远程组件的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1500736.html
微信扫一扫 
支付宝扫一扫 
