最近在开发一个 vue 3 低代码项目时，遇到了加载远程组件的需求。这些组件名称不固定，存储在数据库中，需要通过 api 获取组件信息来确定可用组件。本文将探讨两种解决方案，并重点分析在 vue 3 项目中加载 esm/umd 组件时遇到的问题及解决方案。
方案一：HTML 文件加载 UMD 组件
最简单的方案是将组件打包成 UMD 格式，然后在 HTML 文件中直接使用 <script> 标签加载。
<code class="html"><div id="app">
<test-input></test-input>
</div>
<script>
// 加载组件
await loadscript('http://localhost/component/input/0.1.0/bundle.js');
app.component('testinput', window.testinput);
</script></code>
然而，这种方法效率较低，不适合大型项目。
方案二：Vue 3 项目加载 ESM/UMD 组件
立即学习“前端免费学习笔记（深入）”；
在低代码项目中，我采用了这种方案，并克服了两个主要挑战：
挑战一：相对引用错误
由于项目无需兼容 IE，组件可打包为 ESM 格式。例如：
<code class="javascript">import { reactive } from 'vue';
// ...其他代码</code>
在项目中使用：
<code class="javascript">const { default: testinput } = await import('http://localhost/component/input/0.1.0/bundle.mjs');</code>
直接使用 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。
最终的组件加载代码：
<code class="javascript">const { default: testinput } = await import('http://localhost/component/input/0.1.0/bundle.mjs');</code>
通过解决这两个问题，可以加载任何格式的远程组件 (ESM/UMD/CJS 等)。
总结
除了本文提到的两种方案，还可以使用 vue3-sfc-loader 或 Webpack 5 Module Federation 等技术加载远程组件。选择哪种方案取决于项目的具体需求。 加载远程组件通常用于低代码平台。
