ホームページ > ウェブフロントエンド > jsチュートリアル > Vue 3 でリモート コンポーネントをロードする方法

Vue 3 でリモート コンポーネントをロードする方法

Mary-Kate Olsen
リリース: 2025-01-15 06:16:47
オリジナル
491 人が閲覧しました

背景

私は最近、Vue 3 ローコード プロジェクトでリモート コンポーネントをロードするという要件を受け取りました。これらのリモート コンポーネントは予測できない名前を持ち、データベースに保存されます。どのコンポーネントが利用可能であるかを判断するには、API を介してすべてのコンポーネント データを取得する必要があります。調査の結果、この要件を満たす 2 つの実行可能なソリューションを見つけました。

HTML ファイル UMD コンポーネント

これは実装するのが最も簡単なソリューションです。コンポーネントを UMD 形式でパッケージ化し、HTML ファイルで直接使用するだけです。

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

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

ログイン後にコピー

その後、プロジェクトで使用します:

1

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 コンテキスト

最初の問題を解決するための最初の試みは、コンポーネントをすべての依存関係とともにパッケージ化することでした。これによりすべての import ステートメントが削除されましたが、残念ながら機能しませんでした。これは、プロジェクトの Vue 3 コンテキストと、node_modules の Vue 3 コンテキストに互換性がないためです。正しく動作するには、同じコンテキストを共有する必要があります。

How to Load Remote Components in Vue 3

すべての Vue 3 メソッド名は異なるコンテキスト間で同じですが、変数は同じではありません。これにより、リモート コンポーネントが正常にロードされなくなります。

解決

これらの問題を解決するには:

  1. 相対参照エラーを避けるために、'vue' の import { reactive } を const { reactive } = Vue に置き換えることができます。
  2. ソース コードと一緒にパッケージ化する代わりに、Vue 3 インスタンス全体を main.js にインポートできます。これにより、プロジェクトとリモート コンポーネントが同じ Vue コンテキストを使用するようになります。

コード変換を処理するために、rollup-plugin-import-to-const というロールアップ プラグインを作成しました (vite と rollup の両方をサポート)。コードを import { reactive } から 'vue' から const { reactive } = Vue に自動的に変換します。これらのソリューションを導入すると、プロジェクトにリモート コンポーネントを読み込むことができます。

1

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

ログイン後にコピー
ログイン後にコピー

実際には、これら 2 つの問題を解決できれば、任意の形式 (ESM/UMD/CJS など) でコンポーネントを読み込むことができます。

まとめ

リモート コンポーネントのロードは、これら 2 つのソリューションに限定されません。たとえば、vue3-sfc-loader または webpack5 モジュール フェデレーションを使用することもできます。選択はプロジェクトの特定の要件によって異なります。

一般に、リモート コンポーネントのロードは、ローコード プラットフォームで最も一般的に使用されます。

以上がVue 3 でリモート コンポーネントをロードする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:dev.to
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート