最近在开发一个 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 上下文不兼容,它们需要共享相同的上下文才能正常工作。
即使方法名相同,变量也不一致,导致远程组件无法正常加载。
解决方案
最终的解决方案如下:
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 等技术加载远程组件。选择哪种方案取决于项目的具体需求。 加载远程组件通常用于低代码平台。