文章目录
- 导读
- 开发环境
- 打包流程
- 制作一个大于等于256*256的icon
- 修改package.json
- 执行 *npm run build* 生成应用
- 效果图
- 踩坑
- icon必现大于等于 256*256
- 图片有损
- icon图标要包含各种分辨率的
- resources\app.asar占用
- 参考资料
导读
以下内容在https://gitee.com/zkyt/electron-vue-element-admin上做的。
开发环境
| 版本号 | 描述 | |
|---|---|---|
| 文章日期 | 2022-11-20 | |
| 操作系统 | Win11-22H2 | 内部版本号22621.674 |
| nvm version | 1.1.9 | |
| node -v | v12.22.12 | npm -v （6.14.16） |
| electron | @16.2.8 | npm list |
| electron-builder | 22.4.1 |
打包流程
制作一个大于等于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
