上一個新公司接手了一個vue-cli3+vue2+vue-router3.0+elementUI2.15+avue2.6的后臺管理項目，因為vue2在2023年底已經不更新維護了，elementUI也只支持到vue2，然后總結了一下vue3的優勢，最后批準升級成為了vite+vue3+vue-router4.5+elementPlus2.9+avue3.6，并向下兼容vu2。
那么現在開始升級：
第一步：
先搭建一個vite項目。
在這里說一下，前期調研的時候是有兩種方案的，一種是先把vue-cli3升級到vue-cli4支持vue3，然后再把webpack換成vite。第二種是直接遷移到vite+vue3項目上，然后根據報錯修改。最后決定用第二種，因為快！簡單粗暴！
搭建vite+vue3項目就不多說了，官網都有介紹直接執行下面代碼就行。
npm?init vite@latest執行好以后安裝路由vue-router
cnpm install vue-router --save第二步：
創建router文件夾，在下面建一個router.ts和index.ts
routes.tsimport { RouteRecordRaw } from 'vue-router';//對外暴露配置路由
export const routes: Array<RouteRecordRaw> = [{path: '/',name: 'home',component: () => import('@/pages/home.vue'), // 注意這里要帶上 文件后綴.vuemeta: {}},//要注意vue3 404頁面寫法，這是Path不能直接用*{path: '/:catchAll(.*)*', // 匹配所有路徑 vue2使用* vue3使用/: pathMatch(.*)* 或 /: pathMatch(.*) 或 /: catchAll(.*)redirect: '/404',},
]index.ts://通過vue-router插件實現模板路由配置
import { createRouter, createWebHashHistory } from 'vue-router'
import { routes } from './routes'
//創建路由器
const router = createRouter({//路由模式根據需求選擇history: createWebHashHistory(),routes: routes,
})
export default router你如果是直接把vue2項目的路由文件直接復制過來的，需要注意2點：
1、每個文件后面之前省略的.vue必須要加上。
2、404頁面的path不能是通配符*，要修改為/:pathMatch(.*)或是/:catchAll(.*)
第三步：
安裝sass、axios、vuex（如果你之前是用的vuex就直接安裝vuex，如果之前沒有建議用pinia）、element-plus和@element-plus/icons-vue、avue（如果用到了avue就安裝沒有的話不用安）等你當前項目中依賴的一些包。
怎么安裝就不多說了，不過element-plus @element-plus/icons-vue是必須要安裝的因為之前的elementui不支持vue3。安裝完以后介紹一個轉換神器gogocode。
可以把你原來的vue2項目的代碼轉成兼容vue3的，把elementUI轉成兼容elementPlus的。
直接上官方連接，根據官方介紹直接轉換就行，先執行vue2轉vue3，再執行elementUI轉elementPlus。
Vue2 到 Vue3 升級插件
Element to Element Plus 升級插件
第四步：
設置兼容vue2。根據vue官網的介紹，下載@vue/compat包，如果存在?vue-template-compiler?的話，將其替換為?@vue/compiler-sfc。
npm i @vue/compat -S然后在vite.config.ts里面修改：
// vite.config.js
export default {resolve: {alias: {vue: '@vue/compat'}},plugins: [vue({template: {compilerOptions: {compatConfig: {MODE: 2}}}})]
}官網就介紹到上面，可我這配置好以后，就是不兼容vue2，最后發現在main.ts里面也要配置。
在main.ts里面添加以下代碼：
// 啟用 Vue 2 兼容模式
import { configureCompat } from '@vue/compat';
configureCompat({ MODE: 'Vue2'});這樣再npm run dev試試，應該就可以啟動起來了。
下面就是每個頁面點一下看看報錯了，根據報錯修改了。
以下是可能存在的問題：
1、頁面中引入的vue組件，后面沒有加.vue的要加上.vue，要不報錯。
2、elementUI升級elementPlus后樣式可能會有出入，要統一在全局樣式修改。
3、所有頁面引入ICON圖標的，因為@element-plub/icon圖標名稱有一些和elementUI的圖標名稱有出入，所以要根據官方提供的修改。icon名稱參考：https://element-plus.org/zh-CN/component/icon.html
4、如果你用到了avue-crud里面的字典項，那么要確認一下dicUrl和dicHeaders是否還正確，我這里dicUrl不對，所以請求不到導致頁面加載很慢，排查半天才發現。
5、全局搜索yyyy-MM-dd替換為YYYY-MM-DD
6、頁面中所有require引入要改為import方式引入
7、頁面中所有的::v-deep和/deep/要改為:deep()
8、vue-router升級到4.5以后name名稱必須是唯一的，如果有重復的話頁面是打不開的，因為路由加載就報錯了。
9、時間選擇器變成了英文，查看官方說明要在main.ts里面引入國際化，如下：
import ElementPlus from 'element-plus'
import zhCn from 'element-plus/es/locale/lang/zh-cn'app.use(ElementPlus, {locale: zhCn,
})目前這是我發現的錯誤，升下的就一個頁面一個頁面點擊查看報錯修復就行。
)
