同事以为要重写，我用 8 行代码让 Vue3 跑起已打包的 Vue2 组件 前言最近遇到一个非常典型的前端兼容问题：产品要求将官网底部 footer 组件统一成公司中台的公共组件。查阅对接文档后发现，这个公共组件库是基于「Vue 2」开发的，而我们的项目已经升级到「Vue 3」。 更关键的是，「公司中台的组件库是已经打包构建好的」，我们无法直接修改源码或重新构建，只能通过 npm 包的形式引入使用。 这就尴尬了，难道要为了一个组件降级整个项目？或者重新写一遍？都不现实。 最后我想到一个解决方案：「在 Vue 3 项目中动态加载并运行 Vue 2 组件」。经过实践，成功解决了这个问题，今天分享给大家。 环境准备：先安装 Vue 2 依赖由于我们需要在 Vue 3 项目中动态加载 Vue 2 的运行时和vue2组件，必须「先安装 Vue 2 相关依赖」。否则 import 时会报模块未找到的错误。 安装命令# 安装 Vue 2 运行时npminstall vue@2 # 安装 Vue 2 公司公共组件npm install@xxx/dist/navigation-components解决思路基本思路是这样的： 「动态加载」Vue 2 的运行时代码和目标组件；「在 Vue 3 组件中创建独立的 Vue 2 实例」，与主项目隔离；「将 Vue 2 组件挂载到指定 DOM 节点」；「通过 props 传递数据」，甚至事件通信。Vue3项目├── 正常的 Vue3组件├── 动态导入 Vue2运行时├── 创建独立的 Vue2实例└── Vue2组件在独立实例中运行这种方式可以让 Vue 2 组件像“小程序”一样在 Vue 3 项目中运行，互不干扰。 具体实现1. 动态导入资源动态加载资源，这样打包的时候就会进行代码分割，减少主包体积，提升首屏性能。 importVue2from'vue2/dist/vue.runtime.min.js'// vue2运行时import*asvue2Componentfrom'xxx/navigation-components'// vue2公共组件「打包结果：」 dist/├── index.html├──main.js(500KB) ← 主要代码├── vue2.chunk.js(34KB) ← Vue2运行时├──nav.chunk.js(15KB) ← 导航组件└──main.css在组件中按需引入之后，打包的时候把不是立即需要的代码（如Vue2运行时、第三方组件）单独打包，等到需要使用到的时候才下载，这样主包变小，首屏加载更快，用户体验更好。如果不是按需加载，在main.js中直接引入的话，用户访问网站就必须等主包下载完才能看到页面。 「优势：」 并行加载，提升加载速度代码分割，减少主包体积按需加载，优化首屏性能2. 在vue3文件中创建 Vue 2 实例scriptsetupimport{ onMounted }from'vue';importVue2from'vue2/dist/vue.runtime.min.js'importvue2Componentfrom'xxx/navigation-components' onMounted(async() = { newVue2({ el:'#nav-footer', render:(h) =h(vue2Component)} )})/script3. 模板中预留挂载点templatediv !-- Vue 3 的其他内容 -- main.../main !-- 为 Vue 2 组件预留挂载点 -- divid="nav-footer"/div/div/template优势总结「兼容性好」：无需修改现有 Vue 3 项目架构「隔离性强」：Vue 2 和 Vue 3 实例完全独立，互不影响「性能优化」：按需加载，代码分割「维护成本低」：可以直接使用现有的 Vue 2 组件源码scriptsetupimport{ onMounted }from'vue';importVue2from'vue2/dist/vue.runtime.min.js'importvue2Componentfrom'xxx/navigation-components' onMounted(async() = { newVue2({ el:'#nav-footer', render:(h) =h(vue2Component)} )}) /scripttemplatedivid="nav-footer"/div/template总结用这个方案，Vue 3 项目也能直接用 Vue 2 组件，不用大改项目，也不用重写代码。这样既兼容又省事，还能让页面加载更快，维护也更简单。适合项目升级过渡时用，等以后有时间，再慢慢把组件升级到 Vue 3 就行了。 AI编程资讯AI编码专区指南： https://aicoding.juejin.cn/aicoding 点击“阅读译文“了解详情~ 阅读原文