文章目录

• • 导读
  • • 开发环境
  • 打包流程
  • • 制作一个大于等于256*256的icon
    • 修改package.json
    • 执行 *npm run build* 生成应用
    • 效果图
  • 踩坑
  • • icon必现大于等于 256*256
    • 图片有损
    • icon图标要包含各种分辨率的
    • resources\app.asar占用
  • 参考资料

导读

以下内容在https://gitee.com/zkyt/electron-vue-element-admin上做的。

开发环境

打包流程

制作一个大于等于256*256的icon

在网上找了两个网站，都可以制作icon，但是第二个最大只能制作128*128的，所以我们选择第一个网站。

• https://app.xunjiepdf.com/img2icon/ （用这个网站）
• https://www.bitbug.net/ （只能制作128*128的）

ps:

• 网上说，通过工具IconWorkshop或icoFX可以生成ico，未尝试。
• 也可以在一些好的网站直接下载满足条件的ico。

修改package.json

在package.json中的build字段做如下修改：

• 生成进程名：productName。
• 修改图标修改win > icon，然后将ico拷贝到对应文件夹中。

{"build": {"productName": "Doraemon","appId": "fun.l0l.vue-element-admin","directories": {"output": "build"},"files": ["dist/electron/**/*"],"win": {"icon": "build/icons/icon.ico"}}
}

执行 npm run build 生成应用

  "scripts": {"build": "node .electron-vue/build.js && electron-builder"}

效果图

• 生成目录： MyAndroidAssemble\electronTools\build
• 安装文件： MyAndroidAssemble\electronTools\build\Doraemon Setup 4.2.1.exe
• 可执行文件：MyAndroidAssemble\electronTools\build\win-unpacked\Doraemon.exe
  

踩坑

icon必现大于等于 256*256

生成过程中会报错！！！

图片有损

据说IconWorkshop可以解决

icon图标要包含各种分辨率的

错误图片示例：

正确的图片示例：

两个ico通过VS打开，比较内容，正确的ico包含各种分辨率：

resources\app.asar占用

这个一般是文件被打开或者VSCode等工具占用了该文件，关闭掉相应进程就行了。
对于VSCode占用，可以通过procexp查找句柄，然后关闭对应句柄就可以了。

参考资料

• 代码地址： https://gitee.com/zkyt/electron-vue-element-admin
• 关于electron在打包项目时如何更换所有的应用程序图标.ico https://blog.csdn.net/weixin_41262999/article/details/108936206