2,【electron+vue】 构建桌面应用——常见的功能及问题(修改桌面图标,软件图标,窗口图标,图标不显示问题,影藏默认菜单栏,开机自启,手动或被动关闭应用)

article/2025/9/8 1:14:38

在这里插入图片描述

一.修改桌面图标,软件图标或者窗口左上角的图标.

1.首先这些图标必须是 .ico 结尾的图片,如果你将其他格式的图片改成.ico的,也不行哦,至于为什么,我也没深入研究,按着规定来就好.
2.如何获取.ico格式的图片或者说如何将其他格式的图片转换成.ico格式的图片呢,这里推荐一个app,名字是 icofx ,大家自行搜索安装使用哈,给大家看下大概的界面:
在这里插入图片描述
3,前两步弄好后,咱们就有了ico的图片,现在替换默认的图片,在你声明主进程的地方
这是修改应用左上角的图标

const win = new BrowserWindow({icon: './public/img/title.ico',// 图标})

4,修改桌面的图标, .exe前面的图标
这两个是同一个图标,在项目的根目录下找到vue.config.js这个文件,如果没有,就自己创建一个,

module.exports = {publicPath: "./",outputDir: 'passageway',runtimeCompiler: true,// 插件配置pluginOptions: {electronBuilder: {builderOptions: {'productName': 'passageway',//生成exe的名字"appId": "aaa",//包名  "copyright": "xxx",//版权信息"directories": { // 输出文件夹"output": "electron_output",},"nsis": {"oneClick": false, // 是否一键安装"allowElevation": true, // 允许请求提升。若为false,则用户必须使用提升的权限重新启动安装程序。"allowToChangeInstallationDirectory": true, //是否允许修改安装目录"installerIcon": "./public/img/title.ico",// 安装时图标"uninstallerIcon": "./public/img/title.ico",//卸载时图标"installerHeaderIcon": "./public/img/title.ico", // 安装时头部图标"createDesktopShortcut": true, // 是否创建桌面图标"createStartMenuShortcut": true,// 是否创建开始菜单图标"shortcutName": "passageway", // 快捷方式名称"runAfterFinish": false,//是否安装完成后运行},"win": {"icon": "public/img/title.ico",//图标路径"target": [{"target": "nsis", //利用nsis制作安装程序"arch": ["x64", //64位]}]}},nodeIntegration: true},}
}

注意: nodeIntegration: true 这个不写不会对图标的显示造成影响,但是!!!,如果你不写,你后面手动关闭应用或者调用主进程的一些api可能会没有哦.所以还是得加上.

二.图标不显示或显示不全

一般这个问题发生在打包后,运行软件,会发现窗口左上角的图标和电脑下面的任务栏那里的图标显示不全.为什么呢.因为可能是你的ico图片太大了,一般的ioc图标大小应该是小于1M并且是256*256分辨率的.你可以看一下你的图片大小.如果超了,可以用第一步那个方法修改大小及分辨率

三.影藏默认菜单栏

一般在开发的时候可以打开默认菜单栏,但是打包后就不需要默认的菜单栏了,这时我们可以影藏

  const win = new BrowserWindow({autoHideMenuBar: true, // 影藏菜单栏})

四.开机自启

开机自启就是电脑开机的时候自动启动该软件
写在background.js里面,主进程里面

app.setLoginItemSettings({// 设置为true注册开机自起openAtLogin: true, //winopenAsHidden: true,  //macOspath: process.execPath,args: [], 
});

五.手动或被动关闭应用

这两个关闭都是在你没有开f12的前提下,才可以关闭
手动关闭:
就是自己点击右上角的×关闭,这个应用自带的都有
被动关闭:
点击右上角的×或者一个点击事件,弹一个窗口,二次确认是否关闭该应用

监听点击×关闭之前的判断.

mounted() {window.onbeforeunload = (e) => {e.returnValue = false; // 阻止默认点关闭事件,不写会直接走默认的退出setTimeout(() => { // 定时器主要是防止模态框中的图片不显示this.closeDialogVisible = true // 开启模态框})return}
}

开启模态框,弹窗是否确认关闭当前应用

	// 确认closeConfirm() {// 向主进程发送close信息require('electron').ipcRenderer.send('window-close')},// 取消cancle() {this.closeDialogVisible = false // 关闭模态框},

如果点击了确认,则向主进程发送一个关闭应用信息

import { ipcMain } from 'electron'
async function createWindow() {//const win = new BrowserWindow({//  width: 1920,//  height: 1080,//  webPreferences: {//    nodeIntegration: process.env.ELECTRON_NODE_INTEGRATION,//    contextIsolation: !process.env.ELECTRON_NODE_INTEGRATION,//  },//  icon: './public/img/title.ico',// 图标//  autoHideMenuBar: true, // 影藏菜单栏//})//if (process.env.WEBPACK_DEV_SERVER_URL) {//  await win.loadURL(process.env.WEBPACK_DEV_SERVER_URL)//  if (!process.env.IS_TEST) win.webContents.openDevTools()//} else {//  createProtocol('app')//  win.loadURL('app://./index.html')//}//自动关闭appipcMain.on('window-close',()=>{win.close();// win.destroy(); // 如果close不行,就用destroy}) 
}

ok.目前就这么多.后续碰到新的需求再补充.


http://chatgpt.dhexx.cn/article/IMmcAHeY.shtml

相关文章

Win10 底部应用图标显示不正常(空白)

导致此问题一般是因为: 移动了程序目录未正确卸载的情况下重新安装 解决方法 右击任务栏图标,再右键程序,点击属性,更改程序正确位置和图标。

TortoiseSVN文件夹及文件图标不显示解决方法

由于自己的电脑是win7(64位)的,系统安装TortoiseSVN之后,其他的功能都能正常的使用,但是就是文件夹或文件夹的左下角就是不显示图标,这个问题前一段时间就遇到了(那个时候没找到合适的答案&…

解决win10系统下软件图标显示异常的问题

最近遇到的问题,桌面图标,特别是word、excel等office办公软件的桌面图标全部变成txt的图标了,特别是之前安装过WPS软件,更容易出现这个问题。如下图所示: 解决办法: 1.下载软件filetypesman.zip&#x…

win10系统桌面应用图标显示不出来的问题

别慌别慌,只要找到桌面任务栏上右击鼠标,在弹出的菜单中点击【任务管理器】。在【任务管理器】找到【Windows资源管理器】,右击鼠标,选择【重新启动】即可重建图标缓存 CK: https://zhuanlan.zhihu.com/p/121125559

桌面计算机里没有桌面显示不出来怎么办,电脑桌面显示不出来图标 所有软件都可以正常工作 怎么解决?...

苏绯离 回答数:3 | 被采纳数:125 2020-04-18 12:14:50 当你遇到桌面上一个图标都没有的情形时,是由于多种原因引起的,你可按下面方法进行检修。 1、首先右击桌面选排列图标/勾选显示桌面图标。 2、如果故障依旧,打开…

win10某些软件图标显示过小解决方法

win10笔记本电脑分辨率过高,导致某些没有适配win10的软件显示窗口过小,看起来很是不舒服。 本文将介绍一种解决方法,调大显示窗口及图标。 以My Base为例: 1.右键单击图标–>选择“打开文件所在位置” 2.右键单击图标–>…

软件图标显示不正常【win7企业版】

现象: 原因: 图标缓存没有把该软件图标建立起来 解决: 一、 1、找到 IconCache.db 2、你要把电脑隐藏文件打开不然找不到这个文件的,组织—文件夹及搜索选项——查看——显示隐藏文件、文件夹和驱动器 隐藏已知文件的扩展名的√ 去…

解决win10系统桌面应用图标显示不出来的问题

解决win10系统桌面应用图标显示不出来的问题 有时候win10系统桌面应用图标会因为一些原因显示不出来或者显示的不全(白色),这时候由于在桌面看的难看,并不好寻找使用的图标。 这里提供一个简单的方法-重置系统图标数据库文件&…

Win10 图标 显示不正常解决办法

解决Win10下图标不能正常显示(如变白色等)的问题。 Win10图标不能正常显示的解决方法 方法一:通过删除IconCache.db文件方法二:直接更改图标样式 方法一:通过删除IconCache.db文件 1.随便 打开 一个 文件夹 ,点击 查看 &#xff…

office软件不显示图标

本方法的适用条件: 1. 确保已经正确安装office软件(笔者本人office版本为2016专业版),office各功能可以正确使用。 2. ‘’设置‘’→‘’应用‘’→‘’应用和功能‘’,中确保.xlsx的默认打开程序为excel。(word,ppt同理) 本人遇到的问题: 1. 桌面→鼠标右键,不…

WIN10运行软件,窗口不显示 解决办法

#win10 运行软件后,不显示窗口 今天遇到个问题,我打开postman之后,任务栏显示它已经打开了,但是窗口就是不显示,如下图: 用alt tab 查看,也能看到它!!!鼠标…

软件图标显示不正常的问题

最近一段时间做开发,一致用plantix,但是不知道为何,桌面上的图标无法正常显示,就像这样 一开始上网找恢复桌面图标的办法,例如:在属性中更改图标,发现plantix的启动图标在安装目录下也同样无法显…

修复软件图标不正常显示问题

当我们电脑桌面软件图标变成了白色,不要慌,有解决办法滴。 首先,我们新建一个记事本,把下面的代码复制进去, echo off taskkill /f /im explorer.exe CD /d %userprofile%\AppData\Local DEL IconCache.db /a start …

计算机软件图标不正常,桌面图标显示不正常,详细教您桌面图标显示不正常怎么解决...

现在电脑的品牌越来越多,我们在选择电脑品牌的时候会提前做一些功课,想要哪一款的电脑会提前查阅资料等,但是有的时候买了电脑,电脑会出现一些问题的时候却不知道怎么去解决桌面图标显示不正常,下面,小编给…

关于word插入题注“题注或页码中不含章节号”错误提示

首先,你的文档要包含标题样式,然后排好多级列表与编号。 其次,也是重点:你标题运用的样式的名称需要与插入题注时勾选的编号、章节号名称要一致!

Word基础(三十五)题注的插入与删除

题注:为您的图片或对象添加标签。添加题注后,您可以通过插入交叉引用在文档的任意位置引用对象。 在Word中,如何插入题注呢? 方法:以图片插入题注为例 鼠标点击需要插入题注的图片(或表格、公式等&#x…

Word基础(三十七)自动插入题注

在Word中,如何自动插入题注呢? 方法: 点击引用选项卡,题注分类中点击插入题注 在弹出的题注对话框中,点击自动插入题注(A)… 在弹出的自动插入题注对话框中勾选类型 点击插入表格后,就会自动插入题注 注&…

ms office word2013教程 - 快速插入题注

快速插入题注 这里演示给表快速插入题注,图同理。 给表插入题注 光标定位在要插入题注的地方,选择[引用] -> [插入题注],在题注弹出框中选择[标签],点击[编号],在题注编号弹出框中将[包含章节号]勾上,…

Word 排版:插入题注和引用题注

为了节省排版时间,最好的方法就是将文档中的图片和表格同一插入题注并引用,这样子在删除和修改某个表格或者图标之后,只需要 更新域 就可以了。 1. 插入题注 step1: 选中图片或者表格,然后点击引用->插入题注 ste…

[Setting]设置Word插入题注快捷键

原创文章,欢迎转载。转载请注明:转载自 祥的博客 原文链接:https://blog.csdn.net/humanking7/article/details/102939393 word 插入题注快捷键 动机 批量插入题注的时候真的很烦,尤其是这个还没有方便的快捷键,所以…