vue2專案升級至vue3方案步驟踩坑

丁同亚的博客發表於2024-11-22

背景

這是一個金融類的專案:營銷平臺,專案是vuecli4搭建的vue2+elementUI+vant+antv PC端專案,需要內網開發
共有** 60萬行程式碼 **,1720個vue檔案,使用了一些只能適配vue2的依賴庫和技術,需要找替代庫和替代方案

一 把專案備份然後使用gogocode進行轉換

先將原始碼進行格式化轉換,方便以後和轉換出來的比對
1. 執行vue2轉vue3的命令
2. 執行依賴庫升級命令
3. 執行element升級命令
轉換後肯定是起不來的,有很多很多報錯,把轉換後的程式碼備份,從main.js開始一點一點複製過來
4. 專案中使用了 vue-property-decorator gogocode無法轉換,使用vue-class-migrator來轉換

坑點:
1. ***window.$vueApp = Vue.createApp(App)要放到最上方 ***

2. Cannot read properties of undefined (reading 'type') 
TypeError: Cannot read properties of null (reading 'content')
編譯階段控制檯報錯
 暫時先把相關檔案刪除,後續再看錯誤原因。
 
3. at-rule or selector expectedscss(css-ruleorselectorexpected)
   1. 很多樣式檔案轉換出現錯誤,先刪掉
4. 現在,專案啟動不報錯了,樣式還有一些問題,當下要解決的是,排查package.json中的不支援vue2的依賴

相關文章