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

文章目录

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

开端

在开发过程中,我遇到了一个令人头疼的错误提示:

bash 复制代码
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。你可以通过以下命令检查它们的版本:

bash 复制代码
node -v
npm -v

2. 创建新项目

在命令行中执行以下命令,启动 electron-vite 的交互式项目创建流程:

bash 复制代码
npm create electron-vite@latest

当系统提示你选择项目模板时,请务必选择 vue 模板electron-vite 会自动为你配置好 Electron、Vue 3 和 Vite 的集成环境。

3. 安装依赖并启动项目

进入新创建的项目目录,并安装所有依赖项:

bash 复制代码
cd [你的项目文件夹名]
npm install

依赖安装完成后,运行开发服务器:

bash 复制代码
npm run dev

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

相关推荐
m0_738120723 小时前
CTFshow系列——命令执行web53-56
前端·安全·web安全·网络安全·ctfshow
Liu.7745 小时前
uniappx鸿蒙适配
前端
山有木兮木有枝_6 小时前
从代码到创作:探索AI图片生成的神奇世界
前端·coze
ZXT6 小时前
js基础重点复习
javascript
言兴6 小时前
秋招面试---性能优化(良子大胃袋)
前端·javascript·面试
WebInfra7 小时前
Rspack 1.5 发布:十大新特性速览
前端·javascript·github
雾恋8 小时前
我用 trae 写了一个菜谱小程序(灶搭子)
前端·javascript·uni-app
烛阴8 小时前
TypeScript 中的 `&` 运算符:从入门、踩坑到最佳实践
前端·javascript·typescript
Java 码农9 小时前
nodejs koa留言板案例开发
前端·javascript·npm·node.js
ZhuAiQuan10 小时前
[electron]开发环境驱动识别失败
前端·javascript·electron