文章目录
- 开端
- 解决方案：使用 `electron-vite` + Vue 重建项目
- 1. 环境准备
- 2. 创建新项目
- 3. 安装依赖并启动项目
开端
在开发过程中，我遇到了一个令人头疼的错误提示：
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
当熟悉的开发窗口再次亮起时，之前的烦恼也一扫而空。
