【Electron-vue】创建桌⾯应⽤（12）-修改electron窗⼝图标和桌⾯图标1.前⾔
直到今天Electron-vue项⽬终于到打包联调的的最后阶段了，在本地调试没有问题的情况下，需要进⾏最后⼀步的模拟真实环境下的调试了。
默认打包将会使⽤默认的图标，所以打包之后的项⽬需要做以下⼏点修改
1. 静态资源路径的修改
2. 打包后窗体图标的修改
3. 安装之后的图标修改
electron vue教程将会在下⾯的配置修改中统⼀处理
2.配置修改
2.1 静态资源路径的修改
由于我需要去调度/执⾏另外⼀个exe⽂件，所以我需要将开发环境和⽣产环境作区分，所以需要配置不同环境下的exe⽂件(暂时称为服务端exe)的路径。
服务端exe在开发环境下，我是放到主进程⽂件src/main/index.js统计⽬录中，以便测试之⽤。
开发环境下
// 开发环境
let cmdStr =`${__dirname}/`
⽽实际的⽣产环境中需要将⽂件放到build打包后的可执⾏⽂件⽬录的同级⽬录，⽐如我执⾏build命令之后会在会在build⽂件夹下⽣成这种⽬录：
⽽⽣成的exe⽂件会在win-unpackaged⽬录下，然后将服务端⽂件copy到该⽬录下即可，然后将main/index.js中的路径修改为⽣产环境下的路径
// ⽣产环境打包后，exe⽂件放⼊到打包后可执⾏⽂件同⼀⽬录
let cmdStr ='./'
这样在启动客户端的时候就会把服务端的exe拉起来，即建⽴⼦进程。
2.2 打包后窗体图标的修改
如果你不做修改，那么默认是系统的图标即electron-vue⾃带的图标，所以⼀般产品发布会修改为⾃⼰的产品图标或者logo.
2.2.1 制作windows下的ico图标
⾸先如果你需要替换成⾃⼰产品的图标，那么需要符合规范的ico格式图标(我还没有试其他格式的⾏不⾏，很多产品或者公司都会使
⽤ico格式的⽂件)，所以在这⾥主要演⽰ico的⽂件怎么制作。
如果你不是⽤⾃⼰的图标，默认会使⽤框架⾃带的图标，build会出现下⾯的提⽰：
default Electron icon is used reason=application icon is not set
在以往的项⽬中，发现直接把.png的改为.ico的也能正常使⽤，build也能通过，⽽现在尝试了⼀下直接把.png的改为.ico，发现不⾏，会出现下⾯这种错误：
Reserved header is not 0 or image type is not icon for'D' Fatal error: Unab
下载之后直接安装，然后直接点击Open an existing file
选择256x256规格的，然后ctrl+s保存⼀下就可以了
你也可以通过Image->Create Windows Icon 导⼊图⽚去⽣成
2.2.2 修改package.json中为build配置
build下的win，将icon改为你图标所在的⽬录，默认的配置是build/icons/icon.ico，但是发现在实际的electron-vue项⽬中，并没有这种⽬录。所以需要你⼿动修改为你的ico的具体⽂件⽬录。
"build":{
"productName":"Dynarose",
"appId":"com.app.Dynarose",
"directories":{
"output":"build"
},
"files":[
"dist/electron/**/*"
],
"dmg":{
"contents":[
{
"x": 410,
"y": 150,
"type":"link",
"path":"/Applications"
},
{
"x": 130,
"y": 150,
"type":"file"
}
]
},
"mac":{
"icon":"icon.icns"
},
"win":{
"icon":"icon.ico"
},
"linux":{
"icon":"icons"
}
},
2.2.3 桌⾯图标修改为⾃定义图标
之前使⽤的Inno Setup打包的安装⽂件，根据前⾯的教程，你可以直接选择⽣成的图标即可。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。