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

最近在开发一个 Vue 3 低代码项目时，遇到了加载远程组件的需求。这些组件名称不固定，存储在数据库中，需要通过 API 获取组件信息来确定可用组件。本文将探讨两种解决方案，并重点分析在 Vue 3 项目中加载 ESM/UMD 组件时遇到的问题及解决方案。

方案一：HTML 文件加载 UMD 组件

最简单的方案是将组件打包成 UMD 格式，然后在 HTML 文件中直接使用 <script> 标签加载。

<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>

然而，这种方法效率较低，不适合大型项目。

方案二：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 等技术加载远程组件。选择哪种方案取决于项目的具体需求。 加载远程组件通常用于低代码平台。