HTML 文件 + umd 組件

這個方案是最簡單、最容易實現(xiàn)的。組件以 umd 的格式進(jìn)行打包，然后在 HTML 文件中直接使用。

<div id="app">
    <test-input></test-input>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
    // 將組件 URL 掛載到 script 標(biāo)簽上，然后通過 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...

然后在主項目中進(jìn)行引用：

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

在動態(tài)導(dǎo)入遠(yuǎn)程組件到項目時，提示報錯 Relative references must start with either "/", "./", or "../"。這是因為在瀏覽器中不支持以 import { reactive } from 'vue' 的方式進(jìn)行導(dǎo)入，得把 'vue' 改成 https://..../vue.js 或者 './vue.js' 的形式才可以。平時我們這樣用沒問題是因為有 vite、webpack 等構(gòu)建工具幫忙解決了這個問題。

第二個問題 Vue 上下文環(huán)境不同

產(chǎn)生上面的問題是因為要引入依賴，如果打包組件時把相關(guān)依賴都打在一起，那不就沒有 import 語句了。結(jié)果試了一下還是不行，因為當(dāng)前的 Vue 主項目和打包好的 Vue 組件存在兩個不同的 Vue 上下文。導(dǎo)致在加載組件時報錯，比如提示 xxx 變量找不到 這種問題。

雖然主項目和遠(yuǎn)程組件使用的 Vue 方法都是一樣的，但由于各自的 Vue 上下文不一樣，導(dǎo)致主項目無法正常使用遠(yuǎn)程組件。

以上兩個問題困擾了我一天的時間，但是睡醒一覺后，終于想到了如何解決這兩個問題。首先在瀏覽器上不能直接使用 import { reactive } from 'vue' 這種語句，那把它改成 const { reactive } = Vue 就能解決這個問題了。至于第二個問題，打包時不把依賴打在一起，而是在 main.js 文件中直接把整個 Vue 引進(jìn)來：

import * as Vue from 'vue'
window.Vue = Vue

這樣就能確保主項目和遠(yuǎn)程組件使用的是同一個 Vue 上下文。

為了解決代碼轉(zhuǎn)換問題，我寫了一個 rollup-plugin-import-to-const 插件（支持 rollup、vite），打包 esm 組件時，它會自動的把 import { reactive } from 'vue' 轉(zhuǎn)換成 const { reactive } = Vue 。

至此，就可以在主項目中加載遠(yuǎn)程 esm 組件了：

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

其實只要能解決上面的兩個問題，不管是 esm 還是 umd、cjs 等格式，都能夠?qū)崿F(xiàn)加載遠(yuǎn)程組件的方案。比如換成 umd 的格式來打包組件，就不需要引入 rollup 插件去轉(zhuǎn)換代碼了，并且還能支持 webpack。唯一要做的只是在 main.js 上把 Vue 全引進(jìn)來掛到 window 下。

import * as Vue from 'vue'
window.Vue = Vue

總結(jié)

遠(yuǎn)程組件的方案其實不止上面兩種，比如還有直接加載 .vue 文件的方案，有個現(xiàn)成的 vue3-sfc-loader 插件能用。 一般來說，加載遠(yuǎn)程組件的應(yīng)用場景比較少，所以網(wǎng)上能搜到的討論也比較少。目前比較常見的應(yīng)用場景應(yīng)該就是在低代碼平臺中加載遠(yuǎn)程組件了。

以上就是Vue 加載遠(yuǎn)程組件的解決方案的詳細(xì)內(nèi)容，更多關(guān)于Vue加載遠(yuǎn)程組件的資料請關(guān)注腳本之家其它相關(guān)文章！