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

背景

我最近在一个 Vue 3 低代码项目中收到一个加载远程组件的需求。这些远程组件具有不可预测的名称并存储在数据库中。我需要通过 API 获取所有组件数据以确定哪些组件可用。经过研究，我找到了两个可行的解决方案来满足这个要求。

HTML 文件 UMD 组件

这是最简单的实施解决方案。我们只需要将组件封装成UMD格式，直接在HTML文件中使用即可。

<div>



<p>However, this solution is not suitable for large projects due to its low efficiency.</p>

<h2>
  
  
  Vue 3 Project + ESM/UMD Components
</h2>

<p>This is the solution I implemented in my low-code project. During my research, I encountered and solved two main problems. Here's how it works:</p>

<h3>
  
  
  Problem 1: Relative References
</h3>

<p>Since our project doesn't need to be compatible with IE, we can package the source code in ESM format. For example:<br>
</p>

<pre class="brush:php;toolbar:false">import { reactive } from 'vue'
// other code...

然后在项目中使用：

const { default: TestInput } = await import('http://localhost/component/input/0.1.0/bundle.mjs')

如上所示加载远程 TestInput 组件时，会导致“相对引用必须以 '/'、'./' 或 '../' 开头”错误。这是因为浏览器不支持直接使用 import {reactive } from 'vue' - 我们需要将 'vue' 更改为 https://..../vue.js 或 './vue.js'。通常，我们不需要担心这个，因为我们的构建工具会自动处理它。

问题 2：不同的 Vue 3 上下文

解决第一个问题的第一次尝试是将组件及其所有依赖项打包。虽然这删除了所有导入语句，但不幸的是它不起作用。这是因为我们项目中的 Vue 3 上下文和 node_modules 中的 Vue 3 上下文不兼容 - 它们需要共享相同的上下文才能正常工作。

尽管所有 Vue 3 方法名称在不同上下文中都是相同的，但它们的变量却不同。这会阻止远程组件正常加载。

解决方案

解决这些问题：

1. 我们可以将 import {reactive } from 'vue' 替换为 const {reactive } = Vue 以避免相对引用错误。
2. 我们可以在 main.js 中导入整个 Vue 3 实例，而不是将其与源代码一起打包。这确保我们的项目和远程组件使用相同的 Vue 上下文。

为了处理代码转换，我创建了一个名为 rollup-plugin-import-to-const 的 rollup 插件（同时支持 vite 和 rollup）。它会自动将代码从 import {reactive} 从 'vue' 转换为 const {reactive} = Vue。有了这些解决方案，我们就可以在项目中加载远程组件了：

const { default: TestInput } = await import('http://localhost/component/input/0.1.0/bundle.mjs')

其实只要解决了这两个问题，我们就可以加载任何格式的组件（ESM/UMD/CJS等）。

概括

加载远程组件不限于这两种解决方案。例如，我们还可以使用 vue3-sfc-loader 或 webpack5 Module Federation。选择取决于您项目的具体要求。

一般来说，加载远程组件最常用于低代码平台。