So laden Sie Remote-Komponenten in Vue 3

Hintergrund

Ich habe kürzlich in einem Vue 3 Low-Code-Projekt die Anforderung erhalten, Remote-Komponenten zu laden. Diese Remote-Komponenten haben unvorhersehbare Namen und werden in einer Datenbank gespeichert. Ich muss alle Komponentendaten über eine API abrufen, um festzustellen, welche Komponenten verfügbar sind. Nach Recherchen habe ich zwei praktikable Lösungen gefunden, um diese Anforderung zu erfüllen.

UMD-Komponenten für HTML-Dateien

Dies ist die am einfachsten umzusetzende Lösung. Wir müssen die Komponente lediglich im UMD-Format packen und direkt in der HTML-Datei verwenden.

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

dann im Projekt verwenden:

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

Wenn die Remote-TestInput-Komponente wie oben gezeigt geladen wird, wird der Fehler „Relative Referenzen müssen entweder mit ‚/‘, ‚./‘ oder ‚../‘ beginnen“ verursacht. Dies liegt daran, dass Browser die direkte Verwendung von import { reactive } aus „vue“ nicht unterstützen – wir müssen „vue“ in https://..../vue.js oder „./vue.js“ ändern. Normalerweise müssen wir uns darüber keine Sorgen machen, da unsere Build-Tools dies automatisch erledigen.

Problem 2: Unterschiedliche Vue 3-Kontexte

Mein erster Versuch, das erste Problem zu lösen, bestand darin, die Komponente mit all ihren Abhängigkeiten zu packen. Dadurch wurden zwar alle Importanweisungen entfernt, es funktionierte jedoch leider nicht. Dies liegt daran, dass der Vue 3-Kontext in unserem Projekt und der Vue 3-Kontext von node_modules nicht kompatibel sind – sie müssen denselben Kontext teilen, um ordnungsgemäß zu funktionieren.

Auch wenn alle Vue 3-Methodennamen in verschiedenen Kontexten gleich sind, ist dies bei ihren Variablen nicht der Fall. Dies verhindert, dass Remote-Komponenten normal geladen werden.

Lösung

Um diese Probleme zu lösen:

1. Wir können import { reactive } from 'vue' durch const { reactive } = Vue ersetzen, um den relativen Referenzfehler zu vermeiden.
2. Wir können die gesamte Vue 3-Instanz in main.js importieren, anstatt sie mit dem Quellcode zu verpacken. Dadurch wird sichergestellt, dass unser Projekt und unsere Remote-Komponenten denselben Vue-Kontext verwenden.

Um die Codetransformation zu handhaben, habe ich ein Rollup-Plugin namens rollup-plugin-import-to-const erstellt (das sowohl Vite als auch Rollup unterstützt). Es wandelt Code automatisch von import { reactive } from 'vue' in const { reactive } = Vue um. Mit diesen Lösungen können wir Remote-Komponenten in unser Projekt laden:

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

Eigentlich können wir Komponenten in jedem Format (ESM/UMD/CJS usw.) laden, solange wir diese beiden Probleme lösen.

Zusammenfassung

Das Laden von Remote-Komponenten ist nicht auf diese beiden Lösungen beschränkt. Beispielsweise können wir auch vue3-sfc-loader oder webpack5 Module Federation verwenden. Die Wahl hängt von den spezifischen Anforderungen Ihres Projekts ab.

Im Allgemeinen wird das Laden von Remote-Komponenten am häufigsten auf Low-Code-Plattformen verwendet.

Das obige ist der detaillierte Inhalt vonSo laden Sie Remote-Komponenten in Vue 3. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!