解决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

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

相关推荐
VisuperviReborn9 分钟前
打造自己的前端监控---前端接口监控
前端·javascript·架构
程序员海军9 分钟前
这才是Coding该有的样子!重新定义编程显示器
前端·后端
阳树阳树10 分钟前
小程序鉴权机制分析
前端
BUG收容所所长10 分钟前
如何用React打造一个完整的移动端问卷调查应用?
前端·react.js·开源
Cache技术分享11 分钟前
151. Java Lambda 表达式 - 使用 Consumer 接口处理对象
前端·后端
YGY_Webgis糕手之路13 分钟前
OpenLayers 综合案例-加载gif图
前端·gis
小高00715 分钟前
🚀前端性能优化实录:把 5 秒白屏降到 1.2 秒,只做 7 件事
前端·javascript·面试
FE王同学15 分钟前
使用Taro从零搭建钉钉小程序的步骤
前端
兮漫天27 分钟前
bun + vite7 的结合,孕育的 Robot Admin 靓仔出道(五)
前端·typescript
镀孜谔27 分钟前
uniapp字体
前端