vue-electron踩坑日记

发表于 本文字数： 1.3k 阅读时长 ≈ 5 分钟

# vue

# electron

不知道为什么,在开发 vue-electron 项目的时候,总是会遇到一些奇奇怪怪的问题,这里记录一下

electron:serve not found

![](/2024/03/01/3.Source/Pasted image 20241117115340.png)

1
2
3
4
5
6
7
8
9
10
11
网路上给的解决办法：

1. 检查各个组件是否安装正常：

~~~
node --version
yarn --version
~~~

2. 如果都正常的话，那么应该是没有配置系统路径

首先，我检查了一下 node 和 yarn 的版本，都是正常的，按照网上的说法，应该是没有配置系统路径。但是问题是这玩意是npm的包，安装在 node_modules 里面的，为什么要为其配置系统路径呢？

如果说是因为找不到路径，那么我直接 修改 package.json 里面的 scripts 直接指定路径不就好了吗？

1
2
3
"scripts": {
    "serve": "vue-cli-service serve"
}

解决办法

其实我也是一通捣鼓之后才解决的，解决办法是：

1. 安装 yarn 的 serve 包

1
yarn add serve

在这之后，运行 yarn serve 能够在网页端启动项目，但是 希望的 应该是 创建一个 electron 窗口，而不是在浏览器中打开。

运行 yarn build 后，它能够正常在 dist 目录下生成文件。

2. 重新安装 electron 和 electron-builder

1
2
yarn add electron
yarn add electron-builder

安装 electron-builder 的时候，会报错：

1
2
error @achrinza/node-ipc@9.2.2: The engine "node" is incompatible with this module. Expected version "8 || 10 || 12 || 14 || 16 || 17". Got "22.11.0"
error Found incompatible module.

这是因为我们的 node 版本太高了，而 electron-builder 不支持这么高的版本，但是实际上无所谓。

输入以下命令，忽略这个错误：

1
yarn add electron-builder --ignore-engines

或者将其默认设置为忽略错误：

1
yarn config set ignore-engines true

然后再次安装 electron-builder

1
yarn add electron-builder

之后问题就解决了，运行yarn electron:serve就能够在 electron 窗口中打开项目了。

Reference