實戰推薦：
前言
最近遇到一個非常典型的前端兼容問題：產品要求將官網底部 footer 元件統一成公司中台的公共元件。查閱對接文檔後發現，這個公共元件庫是基於 Vue 2 開發的，而我們的專案已經升級到 Vue 3。
更關鍵的是，公司中台的元件庫是已經打包構建好的，我們無法直接修改原始碼或重新構建，只能透過 npm 包的形式引入使用。
這就尷尬了，難道要為了一個元件降級整個專案？或者重新寫一遍？都不現實。
最後我想到一個解決方案：在 Vue 3 專案中動態加載並運行 Vue 2 元件。經過實踐，成功解決了這個問題，今天分享給大家。
環境準備：先安裝 Vue 2 依賴
由於我們需要在 Vue 3 專案中動態加載 Vue 2 的運行時和 Vue 2 元件，必須先安裝 Vue 2 相關依賴。否則 import 時會報模組未找到的錯誤。
安裝命令
# 安裝 Vue 2 運行時
npm install vue@2
# 安裝 Vue 2 公司公共元件
npm install @xxx/dist/navigation-components解決思路
基本思路是這樣的：
- 動態加載 Vue 2 的運行時代碼和目標元件；
- 在 Vue 3 元件中創建獨立的 Vue 2 實例，與主專案隔離；
- 將 Vue 2 元件掛載到指定 DOM 節點；
- 透過 props 傳遞數據，甚至事件通信。
Vue 3 專案
├── 正常的 Vue 3 元件
├── 動態導入 Vue 2 運行時
├── 創建獨立的 Vue 2 實例
└── Vue 2 元件在獨立實例中運行這種方式可以讓 Vue 2 元件像「小程序」一樣在 Vue 3 專案中運行，互不干擾。
具體實現
1. 動態導入資源
動態加載資源，這樣打包的時候就會進行代碼分割，減少主包體積，提升首屏性能。
import Vue2 from 'vue2/dist/vue.runtime.min.js' // Vue 2 運行時
import * as vue2Component from 'xxx/navigation-components' // Vue 2 公共元件打包結果：
dist/
├── index.html
├── main.js (500KB) ← 主要代碼
├── vue2.chunk.js (34KB) ← Vue 2 運行時
├── nav.chunk.js (15KB) ← 導航元件
└── main.css在元件中按需引入之後，打包的時候把不是立即需要的代碼（如 Vue 2 運行時、第三方元件）單獨打包，等到需要使用到的時候才下載，這樣主包變小，首屏加載更快，使用者體驗更好。如果不是按需加載，在 main.js 中直接引入的話，使用者訪問網站就必須等主包下載完才能看到頁面。
優勢：
- 並行加載，提升加載速度
- 代碼分割，減少主包體積
- 按需加載，優化首屏性能
-
在 Vue 3 文件中創建 Vue 2 實例
<script setup>
import { onMounted } from 'vue';
import Vue2 from 'vue2/dist/vue.runtime.min.js'
import vue2Component from 'xxx/navigation-components'
onMounted(async () => {
new Vue2({
el: '#nav-footer',
render: (h) => h(vue2Component)
})
})
</script>-
模板中預留掛載點
<template>
<div>
<!-- Vue 3 的其他內容 -->
<main>...</main>
<!-- 為 Vue 2 元件預留掛載點 -->
<div id="nav-footer"></div>
</div>
</template>優勢總結
- 兼容性好：無需修改現有 Vue 3 專案架構
- 隔離性強：Vue 2 和 Vue 3 實例完全獨立，互不影響
- 性能優化：按需加載，代碼分割
- 維護成本低：可以直接使用現有的 Vue 2 元件
源碼
<script setup>
import { onMounted } from 'vue';
import Vue2 from 'vue2/dist/vue.runtime.min.js'
import vue2Component from 'xxx/navigation-components'
onMounted(async () => {
new Vue2({
el: '#nav-footer',
render: (h) => h(vue2Component)
})
})
</script>
<template>
<div id="nav-footer"></div>
</template>總結
用這個方案，Vue 3 專案也能直接用 Vue 2 元件，不用大改專案，也不用重寫代碼。這樣既兼容又省事，還能讓頁面加載更快，維護也更簡單。適合專案升級過渡時用，等以後有時間，再慢慢把元件升級到 Vue 3 就行了。
如果這篇文章對你有幫助，記得點讚👍收藏⭐分享📤三連哦~
按讚的人：
共有 0 則留言
文字內容提供幾種功能：
1) --- 會變成分隔線（上一行必須是空白）
2) # 會變成一級標題
3) ## 會變成二級標題
4) ### 會變成三級標題
5) **粗體文字**會顯示粗體文字
6) ```當第一行與最後一行會顯示程式碼
7) 請搜尋 Markdown 語法，了解各種格式
1) --- 會變成分隔線（上一行必須是空白）
2) # 會變成一級標題
3) ## 會變成二級標題
4) ### 會變成三級標題
5) **粗體文字**會顯示粗體文字
6) ```當第一行與最後一行會顯示程式碼
7) 請搜尋 Markdown 語法，了解各種格式
熱門文章
🏆 本月排行榜
評分標準：發文×10 + 留言×3 + 獲讚×5 + 點讚×1 + 瀏覽數÷10
本數據每小時更新一次