Vue 3 项目中动态加载 Vue 2 组件的解决方案

原创不一样的少年_ 2025-09-30 08:30 重庆

点击关注公众号，技术干货及时达。

前言最近遇到一个非常典型的前端兼容问题：产品要求将官网底部 footer 组件统一成公司中台的公共组件。查阅对接文档后发现，这个公共组件库是基于「Vue 2」开发的，而我们的项目已经升级到「Vue 3」。

更关键的是，「公司中台的组件库是已经打包构建好的」，我们无法直接修改源码或重新构建，只能通过 npm 包的形式引入使用。

这就尴尬了，难道要为了一个组件降级整个项目？或者重新写一遍？都不现实。

最后我想到一个解决方案：「在 Vue 3 项目中动态加载并运行 Vue 2 组件」。经过实践，成功解决了这个问题，今天分享给大家。

环境准备：先安装 Vue 2 依赖由于我们需要在 Vue 3 项目中动态加载 Vue 2 的运行时和vue2组件，必须「先安装 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'  // vue2运行时
import * as vue2Component from 'xxx/navigation-components' // vue2公共组件

「打包结果：」

dist/
├── index.html
├── main.js (500KB)           ← 主要代码
├── vue2.chunk.js (34KB)      ← Vue 2 运行时
├── nav.chunk.js (15KB)       ← 导航组件
└── main.css

在组件中按需引入之后，打包的时候把不是立即需要的代码（如Vue2运行时、第三方组件）单独打包，等到需要使用到的时候才下载，这样主包变小，首屏加载更快，用户体验更好。如果不是按需加载，在main.js中直接引入的话，用户访问网站就必须等主包下载完才能看到页面。

「优势：」

并行加载，提升加载速度

代码分割，减少主包体积

按需加载，优化首屏性能

2. 在vue3文件中创建 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>

3. 模板中预留挂载点

<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 就行了。

AI编程资讯AI编码专区指南：
https://aicoding.juejin.cn/aicoding

点击“阅读译文“了解详情~

阅读原文

跳转微信打开

Fish AI Reader

FishAI

联系邮箱 441953276@qq.com

相关标签