vue-electron相关问题的解决方案

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

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

1. 问题: 安装electron依赖失败, 是因为需要全局安装electron

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

yarn global add electron@^11.5.0

2. 问题: 安装其他依赖失败

解决: spectron是electron官方推荐的一个测试包, 该版本与electron版本不匹配, 升级spectron包, 或者 删除

3. 问题: 启动程序报错

解决: 添加json.stringify()

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

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

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

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

yarn remove electron-builder
yarn add global electron-builder

6. 问题: 安装依赖报错 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

7. 问题: 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. 最终效果

8. 问题: 打包报错

解决:

//将 Electron 镜像源设置为淘宝镜像源
npm config set ELECTRON_MIRROR=https://npm.taobao.org/mirrors/electron/
//将 Electron-builder 镜像源设置为淘宝镜像源
npm config set ELECTRON_BUILDER_BINARIES_MIRROR=http://npm.taobao.org/mirrors/electron-builder-binaries/

解决(二者选其一): 在.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 打包遇到的一点点问题