解决Vue项目依赖错误：使用electron-vite重建

文章目录

• • 开端
  • [解决方案：使用 `electron-vite` + Vue 重建项目](#解决方案：使用 electron-vite + Vue 重建项目)
  • • [1. 环境准备](#1. 环境准备)
    • [2. 创建新项目](#2. 创建新项目)
    • [3. 安装依赖并启动项目](#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

当熟悉的开发窗口再次亮起时，之前的烦恼也一扫而空。