私は最近、Vue 3 ローコード プロジェクトでリモート コンポーネントをロードするという要件を受け取りました。これらのリモート コンポーネントは予測できない名前を持ち、データベースに保存されます。どのコンポーネントが利用可能であるかを判断するには、API を介してすべてのコンポーネント データを取得する必要があります。調査の結果、この要件を満たす 2 つの実行可能なソリューションを見つけました。
これは実装するのが最も簡単なソリューションです。コンポーネントを 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 |
|
その後、プロジェクトで使用します:
1 |
|
上記のようにリモート TestInput コンポーネントをロードすると、「相対参照は '/'、'./'、または '../' のいずれかで始まる必要があります」エラーが発生します。これは、ブラウザが import { reactive } from 'vue' の直接使用をサポートしていないためです。'vue' を https://..../vue.js または './vue.js' に変更する必要があります。通常、ビルド ツールが自動的に処理するため、これについて心配する必要はありません。
最初の問題を解決するための最初の試みは、コンポーネントをすべての依存関係とともにパッケージ化することでした。これによりすべての import ステートメントが削除されましたが、残念ながら機能しませんでした。これは、プロジェクトの Vue 3 コンテキストと、node_modules の Vue 3 コンテキストに互換性がないためです。正しく動作するには、同じコンテキストを共有する必要があります。
すべての Vue 3 メソッド名は異なるコンテキスト間で同じですが、変数は同じではありません。これにより、リモート コンポーネントが正常にロードされなくなります。
これらの問題を解決するには:
コード変換を処理するために、rollup-plugin-import-to-const というロールアップ プラグインを作成しました (vite と rollup の両方をサポート)。コードを import { reactive } から 'vue' から const { reactive } = Vue に自動的に変換します。これらのソリューションを導入すると、プロジェクトにリモート コンポーネントを読み込むことができます。
1 |
|
実際には、これら 2 つの問題を解決できれば、任意の形式 (ESM/UMD/CJS など) でコンポーネントを読み込むことができます。
リモート コンポーネントのロードは、これら 2 つのソリューションに限定されません。たとえば、vue3-sfc-loader または webpack5 モジュール フェデレーションを使用することもできます。選択はプロジェクトの特定の要件によって異なります。
一般に、リモート コンポーネントのロードは、ローコード プラットフォームで最も一般的に使用されます。
以上がVue 3 でリモート コンポーネントをロードする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。