Vue CLI 無痛轉換 Vite 紀錄

3 min readNov 6, 2022

由於前陣子我們團隊遇到一個 @vue/cli-plugin-babel 的 cache 命中問題，也因此檢視了一下我們目前專案使用 vue cli + Webpack 4 似乎已經有點老舊了，因此協助團隊測試及評估升級 Vite。

由於我們團隊有上千個專案，因此希望盡量維持與原本的架構一致，一方面是萬一我們想要抽換回 Webpack 5 不必更動過多，另一方面是我們在升級舊專案時可以不更改專案程式碼直接移植，減少不必要的問題。

經過整理思考後有以下主要問題需要解決：

環境變數

我們團隊在 Webpack 時期已有自行封裝環境變數的 function ，且封裝的功能性非常多，但 Vite 使用 import.meta.env 來取得環境變數，因此首要解決問題是維持 process.env.XXX 在專案中的寫法。

Vite 有提供 define 讓我們自行注入環境變數，因此可以借助 define 來實現這個功能。

雖然此舉已經可以在專案中取得 process.env ，但卻沒有 TypeScript 的自動提示，因此我們透過撰寫 rollup plugin 來自動產生型別定義檔案。

如此一來在開發時也能獲得自動提示，增加開發體驗及品質。

許多開發者常常使用 Webpack Modules + val-loader來打包一些資源，在 Vite 與 Rollup 中可以使用 Virtual Modules 來達成。

以下 plugin 範例有簡化過，可參考概念，值得注意的是路徑方面 Virtual Modules是以 vite.config.ts 的所在目錄(project root)為主，而不是你的 plugin 檔案所在目錄。

接著將 plugin 檔案引入 vite.config.ts 並於 plugins 呼叫即可

import fetchPlugin from './src/plugin/fetch';export default defineConfig(() => {
  return {
    plugins: [
      fetchPlugin()
    ],
  }
}

於 src/vite-env.d.ts進行型別的宣告

最後就可以在需要的地方引入了

import { data } from 'virtual:fetch-data';

為了避免更改 index.html，我們將注入的規則寫成跟原先 webpack 一樣

經過以上更動，我們幾乎可以在不更動專案程式碼時完成舊專案移植，尤其我們團隊因為 Webpack Modules 轉換上的一些困難所以一直沒有升級，也希望此文章可以幫助一些團隊更容易進行遷移升級 Vite 的測試及評估。