vue3.x項目降級到vue2.7的解決方案

Posted on by

把 vue3 項目降級到 vue2 ⬇️

原項目為 vue3 + vite + element-plus + pinia + vue-router + typescript 構建

降級後為 vue2.7 + vite + element-ui + pinia + vue-router + typescript

為什麼要降級到 vue2 ？

  • 兼容性問題：公司基於 element-ui 開發瞭自己的一套 ui 組件，並且還有基於 vue2 開發的中臺組件。由於現有的組件庫都是基於 vue2 開發的，完全不兼容 Vue 3。
  • 學習成本：團隊中的開發人員可能需要花費大量時間來學習 Vue 3 的新功能。📖
  • 項目需求：項目需求中需要 Vue 3 的新功能的部分我們可以使用 vue2.7 來替代。
  • vue3 無法兼容 IE10 瀏覽器（雖然覺得沒必要考慮這個，但是種種原因…🤫

考慮到上面幾點，我想瞭幾個方法 🤔：

  • 微前端：考慮過 qiankun 和 micro-app，但是由於 ui 組件使用的是 vue2 開發所以無法兼容
  • ui 組件庫+中臺組件庫 升級到 vue3 版本：工程量太大被拒絕
  • 降級項目到 vue2.7：改動較小，邏輯基本無需改動。成本可控

vue3 和 vue2 的依賴

vue3 所需依賴

    ...  // other
    "vue": "^3.2.31",
    "vue-router": "^4.0.10",
    "pinia": "^2.0.13",
    "vite": "^2.9.1",
    "vue-tsc": "^0.33.9"
    "prettier": "^2.6.2",
    "element-plus": "^2.1.8",

vue2 所需依賴

    ... //other
    "vue": "2.7.5",
    "vue-router": "^3.5.4"
    "pinia": "^2.0.14",
    "vite": "^2.9.9",
    "vue-tsc": "^0.39.5",
    "prettier": "^2.7.1",
    "element-ui": "x.x.x" // 因為公司有自己的ui庫 這裡用element-ui代替

想要把 vue3 的項目降級到 vue2，我們先看下上面的依賴，

  • vue 肯定是需要改動的
  • vue-router 也是需要改動：vue-router 默認版本是@4 但是 vue-router@4 隻能支持 vue3，以及為瞭避免更多的問題，所以我們需要改為 vue-router@3 版本。

對比 vue3 和 vu2 的區別

  • 響應式區別：vue3 使用 proxy 代理，vue2 使用 Object.defineProperty()
  • 選項式 API 和組合式 API
  • 生命周期不同

這裡隻簡單說明，不做重點

實踐步驟

  • vue 降級
  • vue-router降級
  • 組件庫降級
  • pinia或者vuex
  • eslint等工程化

vue 降級

npm i [email protected]

將 vue3 的 createApp() 改為 vue.use()

// vue3
import { createApp } from "vue";
const app = createApp(App);
app.use("xxx");
// vue2
import Vue from "vue";
vue.use("xxx");
new Vue({
  //...
}).$mount("#app");

vue-router 降級

npm i [email protected]

將[email protected] 降級到 @3.x.x

// vue3 + vue-router4
import {
  createWebHashHistory,
  createRouter,
} from 'vue-router'

export const constantRoutes = [
    {
        path: 'xxx',
        component: xxx,
        name: 'xxx',
        meta: {
            hidden: true,
        },
        children: [
            {
                path: '/xxx',
                component: () => import('xxx'),
            },
        ],
    },
    ...
]
const router = createRouter({
  history: createWebHashHistory('/admin'),
  routes: constantRoutes,
})
// vue2.7+ vue-router3

import VueRouter from "vue-router";

export const router = new VueRouter({
  scrollBehavior: () => ({ x: 0, y: 0 }),
  mode: "hash",
  routes: constantRoutes,
});

export const constantRoutes = [
  {
    path: "/xxx",
    name: "xxx",
    component: () => import("xxx"),
    
  },
  ...
];

element-ui

因為 element-plus 是使用vue3重寫的組件，所以無法應用在vue2的項目中，所以需要重寫安裝 element-ui

npm i element-ui

值得慶幸的是，如果你使用的是 element-ui ，那麼你的改動會很少，element-plus和element-ui的組件名保持瞭一致，並且大多數的方法名和屬性也都保持瞭一致。

pinia

官方說明

Pinia 最初是在 2019 年 11 月左右重新設計使用 Composition API 。從那時起，最初的原則仍然相同，但 Pinia 對 Vue 2 和 Vue 3 都有效，並且不需要您使用組合 API。 除瞭安裝和 SSR 之外，兩者的 API 都是相同的，並且這些文檔針對 Vue 3，並在必要時提供有關 Vue 2 的註釋，以便 Vue 2 和 Vue 3 用戶可以閱讀！

同樣 pinia 作為 vuex 的第五代版本，也是完全兼容vue2和vue3的，所以這部分你也基本不用改動。

eslint + husky + prettier + typescript

值得註意的是 elint 在使用vue3的擴展和vue2是不同的，所以不能直接復制粘貼

其他的交驗倒是沒發現什麼問題

問題/缺陷

  • 使用vite 構建的話 federationPlugin 和 plugin-legacy 會有沖突，暫時無法解決

總結

總體來說，讓vue3的項目降級到vue2是不需要重寫的，我們可以盡量的控制修改的代價。

我們需要註意以下幾個地方

  • vue-router 的語法和版本
  • vue 的語法和版本
  • ui組件庫的兼容性和標簽，屬性，方法
  • eslint的擴展問題

雖然vue3給我們的開發提供瞭高效，便利的一方面，但是我們在實踐中還是要考慮到公司的開發環境和原有的公共庫，做好調查。避免給其他開發人員帶來不必要的麻煩。

到此這篇關於vue3.x項目降級到vue2.7的文章就介紹到這瞭,更多相關vue3.x項目降級vue2.內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：