背景
最近的項目有一個加載遠程組件的需求?；诖宋覍?Vue 加載遠程組件的方案進行了研究，并且整理了兩個可行的解決方案。
HTML 文件 umd 組件
這個方案是最簡單、最容易實現的。組件以 umd 的格式進行打包，然后在 HTML 文件中直接使用。
<div id="app"> <test-input></test-input></div><script src="https://unpkg.com/vue@3/dist/vue.global.js"></script><script> // 將組件 URL 掛載到 script 標簽上，然后通過 window 獲取這個組件 await lodaScript('http://localhost/component/input/0.1.0/bundle.js') app.component('TestInput', window.TestInput)</script>
但是這個方案不適合在大型項目中使用，效率比較低。
Vue 工程項目 esm /umd 組件
vue 工程項目 esm /umd 組件是我目前在使用的方案，但是在研究的過程中遇到了兩個問題，逐一解決后，才把這個方案趟通了。
第一個問題 Relative references must start with either "/", "./", or "../"
由于我們的項目不需要兼容 IE，所以打包組件采用的是 esm 格式。打包后的組件源碼如下：
import { reactive } from 'vue'// other code...
然后在主項目中進行引用：
const { default: TestInput } = await import('http://localhost/component/input/0.1.0/bundle.mjs')
在動態導入遠程組件到項目時，提示報錯 Relative references must start with either "/", "./", or "../"。這是因為在瀏覽器中不支持以 import { reactive } from 'vue' 的方式進行導入，得把 'vue' 改成 https://…./vue.js 或者 './vue.js' 的形式才可以。平時我們這樣用沒問題是因為有 vite、webpack 等構建工具幫忙解決了這個問題。
第二個問題 Vue 上下文環境不同
產生上面的問題是因為要引入依賴，如果打包組件時把相關依賴都打在一起，那不就沒有 import 語句了。結果試了一下還是不行，因為當前的 Vue 主項目和打包好的 Vue 組件存在兩個不同的 Vue 上下文。導致在加載組件時報錯，比如提示 xxx 變量找不到 這種問題。
雖然主項目和遠程組件使用的 Vue 方法都是一樣的，但由于各自的 Vue 上下文不一樣，導致主項目無法正常使用遠程組件。
以上兩個問題困擾了我一天的時間，但是睡醒一覺后，終于想到了如何解決這兩個問題。首先在瀏覽器上不能直接使用 import { reactive } from 'vue' 這種語句，那把它改成 const { reactive } = Vue 就能解決這個問題了。至于第二個問題，打包時不把依賴打在一起，而是在 main.js 文件中直接把整個 Vue 引進來：
import * as Vue from 'vue'window.Vue = Vue
這樣就能確保主項目和遠程組件使用的是同一個 Vue 上下文。
為了解決代碼轉換問題，我寫了一個 rollup-plugin-import-to-const 插件（支持 rollup、vite），打包 esm 組件時，它會自動的把 import { reactive } from 'vue' 轉換成 const { reactive } = Vue 。
至此，就可以在主項目中加載遠程 esm 組件了：
const { default: TestInput } = await import('http://localhost/component/input/0.1.0/bundle.mjs')
其實只要能解決上面的兩個問題，不管是 esm 還是 umd、cjs 等格式，都能夠實現加載遠程組件的方案。比如換成 umd 的格式來打包組件，就不需要引入 rollup 插件去轉換代碼了，并且還能支持 webpack。唯一要做的只是在 main.js 上把 Vue 全引進來掛到 window 下。
import * as Vue from 'vue'window.Vue = Vue
總結
遠程組件的方案其實不止上面兩種，比如還有直接加載 .vue 文件的方案，有個現成的 vue3-sfc-loader 插件能用。 一般來說，加載遠程組件的應用場景比較少，所以網上能搜到的討論也比較少。目前比較常見的應用場景應該就是在低代碼平臺中加載遠程組件了。
Vue 加載遠程組件的解決方案
原文鏈接：https://juejin.cn/post/7258850748149219384
版權聲明：本文內容由互聯網用戶自發貢獻，該文觀點僅代表作者本人。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。如發現本站有涉嫌抄襲侵權/違法違規的內容， 請發送郵件至 舉報，一經查實，本站將立刻刪除。