前言

一年前用过electron9到2102年都electron13+了，不过它的味道还是没变，还是那么的坑！

安装遇到的问题

electron下载错误：

我用的是vue3+webpack+electron，需要先创建vue3项目：

虽然命令执行没问题，但当编译输入 npm run electron:serve 时会报错。

大概意思是：electron文件错误，请删除node_modules重新安装。

我试了cnpm、yarn、改镜像源都不行，真滴离谱。

解决

方法1

• 删除node_modules中的electron文件夹

• 在根目录创建 .npmrc 文件，写入如下字段：

之后 npm install electron 重新安装即可。

方法2

• 去 https://github.com/electron/electron/releases 手动下载你对应版本的electron，

  选择electron-vXX-win32-x64.zip并解压。

• 之后到项目的node_modules找到electron文件夹

• 在electron文件夹中创建 path.txt (内容为 electron.exe 即可)

• 继续创建 dist 文件夹(将刚才electron-vXX-win32-x64.zip解压后的所有文件复制到这)

• 之后执行 npm run electron:serve 就可以运行了

开发遇到的问题

如果要在.vue文件中使用node.js库则需将nodeIntegration字段改为true。

找到background.js显示 Use pluginOptions.nodeIntegration, leave this alone，

大概意思就是去pluginOptions更改，别管这的nodeIntegration。

由于我是vue+electron，所以本项目的配置文件为根目录的vue.config.js(没有则自行创建)

文件样例如下：

打包遇到的问题

问题1

执行npm run electron:build一直卡在downing。

大概就是国内网不行，需要设镜像。

解决

在根目录创建 .npmrc 文件(同文章开头的安装问题)，写入如下字段：

之后执行 npm run electron:build 即可

问题2

使用自己的favicon.ico图标时报错。

解决

1. 首先，electron的图标必须为256x256大小。

   一开始用的在线制作网站显示不能识别我的ico文件，之后用 格式工厂 转换才成功。

2.  其次，vue.config.js中的图标路径错误。

   我一开始配置的相对路径  public/favicon.ico 报错，估计是electron开发和打包两个环境的静态资源路径不同引起的。最后直接改为绝对路径了，真滴烦，配置文件如下：