今年年初的时候后就和想把公司vue的项目升级至vue3并使用typescript,团队研究了一下后来忙就搁置了。早些时候看到vue官网提示2023 年 12 月 31 日停止vue2的维护与更新,团队中又重新提起了升级事宜。本文记录一下升级方案及遇到的问题。
老项目使用vue2.5.0、iview3.0.0 ,这次决定升级至vue3、弃用ivew改用element-plus。感觉element-plus更流行一些。涉及到ui框架的改动就不止是vue3与vue2兼容的问题了,最终决定全部重写。重写工作量又比较大,怎么办呢?
工作量大不可能一次性全部升级完成,只能一个一个模块随着业务迭代进行升级。我们考虑的方案有两个:1. 老项目项目(单页项目)支持在iframe中打开模块,新项目开发一个个的新模块,全部完成后新项目提供导航,切换域名停止老项目。2. 新项目搭建导航框架(展现与老项目一致),域名绑定到新项目,利用Nginx将未实现模块的访问转发到老项目。这项迁一个模块就好一个模块。
最终项目采用了方案2,遇到了以下问题:
- iview中的导航菜单和element-plus中的菜单样式有一些差异
- iview中的图标和element-plus中图标不一致
问题1没什么说的,前端同学辛苦一点对照调整。
问题2 iview中 使用的图标是 ionicons 3.x 版本,element-plus中使用库 @element-plus/icons-vue对应源码git。icons-vue写一套模板(或图标代码生成)只需将ionicons 的svg文件复制到 icons-vue中就可以生成element-plus使用的相关图标代码,你可以打包到自己npm仓库,构建自己的图标库了。
+