前言
最近遇到一个非常典型的前端兼容问题：产品要求将官网底部 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 就行了。
本篇文章来源于微信公众号: 稀土掘金技术社区
© 版权声明
本站网络名称：
冠昇产业
本站永久网址：
https://sr.lovedyt.cn
网站侵权说明：
本网站的文章部分内容可能来源于网络，仅供大家学习与参考，如有侵权，请联系Email：2848989711@qq.com 删除处理。
1 本站一切资源不代表本站立场，并不代表本站赞同其观点和对其真实性负责。
2 本站一律禁止以任何方式发布或转载任何违法的相关信息，访客发现请向站长举报
3 本站资源大多存储在云盘，如发现链接失效，请联系我们第一时间更新。
1 本站一切资源不代表本站立场，并不代表本站赞同其观点和对其真实性负责。
2 本站一律禁止以任何方式发布或转载任何违法的相关信息，访客发现请向站长举报
3 本站资源大多存储在云盘，如发现链接失效，请联系我们第一时间更新。
THE END
暂无评论内容