BrowserDevTools

Vite 設定健檢

貼上你的 vite.config.ts 與 package.json:健檢會比對兩者,在建置之前就回報壞掉的地方——設定 import 了卻沒有人安裝的外掛、不會是字串的 define 值、把所有東西都暴露出去的 envPrefix、Vite 產不出來的目標。

兩個檔案都在這個分頁裡以文字分析——不會執行任何東西,也不會上傳任何東西。健檢從不 import 你的設定,所以它可以審閱一份你還在編輯的設定。

相關工具:Vite 設定產生器從零寫出一份設定,.env 驗證器則從同一個問題的另一面檢查 envPrefix 規則。

檢查結果

3 個錯誤 · 6 個警告 · 4 則說明

錯誤 (3)

  • 設定 import 了「rollup-plugin-visualizer」,但它不在 dependencies 或 devDependencies 裡——請執行 `npm i -D rollup-plugin-visualizer`,或移除該 import。import … from 'rollup-plugin-visualizer'
  • envPrefix 是空的,這會把每一個環境變數(包含密鑰)都暴露給客戶端 bundle。請使用像 VITE_ 這樣的前綴。envPrefix: ''
  • build.target 是 es5,Vite 的 ESM 產出不支援它——你需要改用 @vitejs/plugin-legacy。 target: 'es5'

警告 (6)

  • vite 被列在「dependencies」底下;它是建置工具,應該放在 devDependencies。"dependencies": { "vite": "^5.4.0" }
  • 「lodash」同時出現在 dependencies 與 devDependencies——這兩份清單可能因而逐漸不一致。lodash: ^4.17.21 / ^4.17.21
  • 「server」在設定物件裡出現不只一次;在 JavaScript 裡,最後一個會悄悄勝出。server:
  • define「__APP_VERSION__」是一段裸露的字串。值必須是 JavaScript 運算式——請用 JSON.stringify("…") 包起來,否則替換出來的內容不會是字串。__APP_VERSION__: '1.0.0'
  • sourcemap: true 會把你的原始碼一起送出去。用在測試環境沒問題——對外公開的建置通常不適合。sourcemap: true
  • 有一條代理規則設定了 secure: false,這會關閉憑證檢查;請只保留在本機開發。secure: false

說明 (4)

  • package.json 沒有 "build" script;Vite 專案通常會有 "build": "vite build"。scripts
  • 設定了 “type”: “module”,所以 .js 設定檔會以 ESM 載入——請在裡面使用 import/export 語法。"type": "module"
  • outDir 在專案根目錄之外,所以 Vite 不會自動清空它——如果你要清空,請明確傳入 emptyOutDir。outDir: '../server/public'
  • 有別名只設定在 Vite 裡:你的編輯器需要在 tsconfig.json 的 paths 裡有同樣的對應,才解析得到它。resolve.alias

偵測到的內容

  • Vite 版本: ^5
  • 設定 import 的外掛: @vitejs/plugin-vue, rollup-plugin-visualizer

又一個驗證器,而不是又一個轉換器

設定的失敗方式很難看見:`plugins: [vue()]` 配上一個從未加入 `@vitejs/plugin-vue` 的 package.json,在你的機器上跑得動,因為它是全域安裝的,然後在 CI 上壞掉。`define: { __VERSION__: "1.0.0" }` 會把識別字換成 `1.0.0`——一個數字,而不是你想要的字串。`envPrefix: ""` 會悄悄把每一個環境變數都暴露給客戶端 bundle,連密鑰也一起。

這些都不需要跑一次建置才找得到;只需要把設定與 manifest 並排放在一起。這正是這個頁面在做的事——以靜態方式進行,什麼都不執行:

什麼都不會執行,什麼都不會上傳:分析是文字層面的,所以它可以在你還在編輯的設定上運作,也不可能代替你執行任何東西。兩點誠實的限制——它抓不到語法有效、但對你的應用語意錯誤的設定(base 與部署路徑不符在這裡只是一則說明),它也不會解析外掛版本,所以 Vite 主版本與某個外掛主版本不相符時不會被回報。它就是你送 PR 前會做的那一次審閱,只是每次都做得一樣。

常見問題

它會執行我的設定嗎?
不會。執行一份 Vite 設定意味著要 import 你的外掛與相依套件,而那正是瀏覽器做不到的事。健檢是靜態的:它讀 import、頂層鍵、define 項目與少數幾個選項,再拿去和 package.json 比對。它回報的每一件事都來自你看得到的文字,而且每一項發現都會顯示它所依據的片段。
為什麼外掛不在 package.json 裡算是錯誤?
因為對任何一個剛好沒有把它全域安裝的人來說,它都會壞掉。設定 import 了它,所以它就是建置的相依套件;如果它不在 package.json 裡,CI 上或同事機器上的建置就會中斷。修法只有一行:npm i -D <package>。
define: { X: "1.0.0" } 有什麼問題?
Vite 會用你寫的文字取代該識別字,所以 `X` 會變成 `1.0.0`——一個數字字面量,而不是字串。任何像 `X === "1.0.0"` 的比較都會失敗,而且這個 bug 看起來像邏輯錯誤,而不是設定錯誤。用 JSON.stringify("1.0.0") 包起來就是修法,健檢也會明講。
envPrefix: "" 一定是錯的嗎?
它會把每一個環境變數都暴露給客戶端程式碼,包括任何剛好存在於環境裡的密鑰。它偶爾是刻意的,但永遠不該是預設值——健檢把它回報成錯誤,因為它的失敗模式是外洩憑證,而說明會告訴你該改成什麼。
這和設定產生器有什麼不同?
產生器從勾選框寫出一份新的 vite.config.ts;這個頁面審閱你已經有的那一份,也就是既有專案或搬遷時最常見的情況。兩者共享同一套「什麼會出錯」的知識——而且產生器的產出可以通過這個健檢、沒有任何錯誤或警告,這是我們會跑的測試。