【electron】打包bug汇总

electron-builder

Error: Unresolved node modules: bufferutil, utf-8-validate

解决方案

方案一

将electron-builder包升级至最新版22.9.1

npm uninstall electron-builder
// or yarn remove electron-builder
npm i electron-builder -D
// or yarn add electron-builder -D

方案二

下载electron-builder@20.19.2放到node_modules目录下,并手动安装依赖

// node_modules/electron-builder
npm i 
// or yarn

方案三

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

// project
npm uninstall electron-builder
// or yarn remove electron-builder
npm i -g electron-builder
// or yarn add global http-server

解题思路

授人以鱼不如授人以渔

1. 该bug虽然给的提示是缺乏bufferutil, utf-8-validate两个包,可是实际则是app-builder-lib包的问题
2. 当你尝试安装这两个包后还在报该问题,咱们就须要去解决提问题的人,毕竟这是最快的方案
3. 当你进入app-builder-lib目录下不难发现,app-builder-lib目录下并无src这个目录
4. 那么如今该怎么办? 咱们应该找别的方式,好比electron-builder是可使用全局包来打包的,而后咱们先下载全局包yarn add global electron-builder, 而后执行electron-builder --dir来测试性的打一个包,发现是能够打包完成的
5. 那么问题基本能够锁定在包的依赖上面,最快的解决方案是,直接使用最新的包,可是有些项目的话,并不能使用最新的包,那么,咱们应该作的是
6. 去npmjs找到对应的包,而后

经过Repository进入该包的github主页,

经过tags找到对应版本的包,下载下来并放入到node_modules目录下,手动安装依赖来使用

1. 在这个时候,你就须要注意包下的package.json中对应的版本是否和你安装的版本一致

1. 最后在看看对应文件,找找提出问题的人,而后你基本能够肯定问题点出在哪里(目前该问题后续没法复现,解决后我尝试复现该问题,可是发现20.19.2在没有出现该问题,目前仅有一张截图,也是从个人小伙伴那里获得的)目前windows使用electron的体验整体来讲不是很好,劝退新人的几率仍是很大,你们有什么问题,也欢迎一块儿讨论

推荐

vue + electron

electron-vue

若是你须要调用dll,或者使用winax一类的须要编译后使用的包,仍是比较推荐electron-vue的,至少你遇到的问题相对会少,若是你喜欢挑战的话,推荐vue-cli-plugin-electron-builder

vue-cli-plugin-electron-builder

若是你只是须要一个chrome的壳,那么推荐你使用vue-cli-plugin-electron-builder, 同时搭配上vuetify使用,效果更棒
如个人开源项目: weChatTool

固然我仍是比较中意vue-cli-plugin-electron-builder