開端

在開發過程中，我遇到了一個令人頭疼的錯誤提示：

0:0 error Parsing error: Cannot find module '@vue/cli-plugin-babel/preset'
Require stack:
D:\xxx\projects\CantoneseLanguageDictionaryManager\manager-app\node_modules...

這個錯誤表明系統在解析 Babel 配置時，無法找到 @vue/cli-plugin-babel/preset 模塊。這通常是由于 Babel 插件或預設未正確安裝，或者未添加到項目的 package.json 中。錯誤信息還暗示，這可能是因為某個預設忘記將其依賴的插件聲明為依賴項。

雖然官方建議是手動添加缺失的包到項目依賴中，但這并沒有解決我的問題，反而引發了更多的兼容性沖突。為了擺脫這種“依賴地獄”，我決定采用一種更現代、更簡潔的方案：使用 electron-vite 重新構建項目。

---

解決方案：使用 electron-vite + Vue 重建項目

electron-vite 是一款輕量級、模塊化的現代構建工具，它能有效簡化 Electron 項目的開發流程。以下是我的具體操作步驟：

1. 環境準備

首先，請確保你的系統已全局安裝 Node.js（建議版本 ≥ 16）和 npm。你可以通過以下命令檢查它們的版本：

node -v
npm -v

2. 創建新項目

在命令行中執行以下命令，啟動 electron-vite 的交互式項目創建流程：

npm create electron-vite@latest

當系統提示你選擇項目模板時，請務必選擇 vue 模板。electron-vite 會自動為你配置好 Electron、Vue 3 和 Vite 的集成環境。

3. 安裝依賴并啟動項目

進入新創建的項目目錄，并安裝所有依賴項：

cd [你的項目文件夾名]
npm install

依賴安裝完成后，運行開發服務器：

npm run dev

當熟悉的開發窗口再次亮起時，之前的煩惱也一掃而空。