electron-vue官方模板打包失败问题合集

1.背景

最近使用electron-vue进行项目开发，到打包的时候发现打包失败，各种问题，于是就尝试直接使用官方模板进行打包，发现也是不行，各种问题在后文列举。这里记录一下最后我可用的方案，同时将常见问题罗列以备小伙伴们少走弯路。
当前环境：
node:14.12
electron:2.0.18
electron-vue获取：

vue init simulatedgreg/electron-vue newPro

2.当前顺利打包流程

记录一下我目前可用的方案。

2.1 关于multispinner的bug

npm install
npm install multispinner -D

这里之所以要单独install一下multispinner，是因为官方里面没有添加multispinner的依赖，同时install以后还需要在
.electron-vue\build.js文件中进行引用

const Multispinner = require('multispinner')

2.2 关于task的bug

这个bug是很多人反馈过的，在.electron-vue/build.js中重复申明了task，导致在打包时报错，所以需要对其中一个task进行重命名，我的习惯是将

const tasks = ['main', 'renderer']
  const m = new Multispinner(tasks, {
    preText: 'building',
    postText: 'process'
  })

改为

const tasks1 = ['main', 'renderer']
 const m = new Multispinner(tasks1, {
   preText: 'building',
   postText: 'process'
 })

2.3. build

npm run build

我是用electron-packager打包的，但是不进行这一步会报错，所以虽然不知道原因，还是这样生成了一下

2.4.electon-packer

electron-packager . app1 --platform=win32 --arch=x64 --icon=icon.ico --out=./out --asar --app-version=0.0.1 --overwrite --download.mirrorOptions.mirror=https://npm.taobao.org/mirrors/electron/

至此生成的out文件夹下的app1.exe已经可以使用

3. 常见问题列表

3.1 resource busy or locked

错误提示：

"Error: EBUSY: resource busy or locked, rename XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXelectron.exe"

删除build下的生成文件夹
关闭命令行重新打开，应该是进程使用中
或者换个文件夹生成
实在不行就重启下电脑

3.2 Error: Application entry file “src\renderer\main.js”

错误提示

main": "./src/renderer/main.js",
"Error: Application entry file "src\renderer\main.js" in the "L:\soft_dev\node\vue\wcprint\build\win-ia32-unpacked\resources\app.asar" does not exist. Seems like a wrong configuration"

这个就是前文讲到的官方bug之一
解决办法

npm install multispinner -D
.electron-vue\build.js文件中引用
const Multispinner = require('multispinner')

3.3 打包成功，但是软件打开一片空白

原因比较多，后续有时间的话我单独开一片文章来说明。

3.4 Found ‘electron’ but not as a devDependency, pruning anyway

如果对electron没有严格要求的话可以忽略，不会影响打包，但是确实会影响部分第三方库的使用，所以还是建议使用推荐库进行打包。或者在部分情况下可以通过将“.electron-vue/webpack.renderer.config.js”中

let whiteListedModules = ['vue']

改为

let whiteListedModules = ['vue','electron']

4. 总结

electron-vue的官方模板确实存在一些bug，虽然都算不上大问题，但是确实会让很多新人多走很多弯路，同时在大量的三方库使用上electron的版本依赖也确实存在很多不兼容的部分，不知道在VUE3中会不会有明显改善。