如何在 Vue 3 中加载远程组件

方案二：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 上下文不兼容，它们需要共享相同的上下文才能正常工作。

即使方法名相同，变量也不一致，导致远程组件无法正常加载。

解决方案

最终的解决方案如下：

1. 将 import { reactive } from 'vue' 替换为 const { reactive } = vue，避免相对引用错误。
2. 在 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 中加载远程组件》的内容就介绍到这里了，是不是学起来一目了然！想要了解更多关于的内容请关注golang学习网公众号！