ps: 在安装依赖时一定要先设置淘宝镜像源

设置: yarn config set registry https://registry.npm.taobao.org/
查看: yarn config get registry

1. 问题: 安装依赖失败, 在淘宝源上没有找到v5.0.0的包

解决: 全局安装指定版本的包 (可以选择你想要的版本: 连接)

yarn add global electron@^11.5.0

2. 问题: 打包报错ERROR in unknown: Unexpected token (171:63)

解决: package.json的electron-store依赖不小心放到devDependencies里面去了，改回dependencies即可

3. 问题: 打包报错 Error: Unresolved node modules: bufferutil, utf-8-validate

解决: 删除本地的electron-builder 使用全局的electron-builder来进行打包

yarn remove electron-builder
yarn add global electron-builder

4. 问题: 安装依赖报错 electron\install.js:54 throw err ^

解决: 安装淘宝镜像

npm install -g cnpm -registry=https://registry.npm.taobao.org
yarn add cnpm -g --registry=http://registry.npm.taobao.org

5. 问题: Package "electron-builder" is only allowed in "devDependencies". Please remove it from the "dependencies" section in your package.json.

解决: 如下所示, 移动一下安装包位置

  "devDependencies": {"electron": "^8.2.1","electron-builder": "^22.4.1"},"dependencies": {}

6. 问题：打包成exe

a. DOS 下，输入 npm install electron-packager -g全局安装我们的打包神器：

yarn addd global electron-packager

b. 将打包的命令设置在package.json的script中

"scripts": {"start": "electron .", "packager": "electron-packager ./ Printer --platform=win32 --arch=x64  --overwrite"},

c. 输入打包命令

yanr run  packager

d. 最终效果

6. 问题: 打包报错

解决: 在.npmrc中进行设置electron_mirror路径的方式。

win+r 找到这个文件

然后通过添加一句话：electron_mirror=https://npm.taobao.org/mirrors/electron/

这样electron-v18.2.2-win32-x64.zip包就能够成功安装了

再次打包之后又会遇到这个问题

⨯ cannot resolve https://registry.npmmirror.com/-/binary/electron-builder-binariesnsis-3.0.4.1/nsis-3.0.4.1.7z

这两种同样也是在.npmrc中进行配置的，添加的是electron-builder-binaries_mirror的路径:

electron-builder-binaries_mirror=https://registry.npmmirror.com/-/binary/electron-builder-binaries/

现在让我重新进行打包，发现到此，没有出现任何报错，并且打包成功了

ps: 和网上找到的直接下载包到本地方式不同，解决方案是修改了下载源。最后我发现成功一次之后，把.npmrc中的修改下载源注释掉后续打包也可以成功了 😕

相关文章参考: vue-electron相关BUG处理 关于 electron-builder 打包遇到的一点点问题