如何在 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。選擇取決於您專案的特定要求。

一般來說，載入遠端元件最常用於低程式碼平台。