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

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.目前就这么多.后续碰到新的需求再补充.

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

「开机自启」macOS如何关闭开机自启动软件？
前段时间仲辉将自己的Mac抹盘重装了,安装完日常使用的软件后发现有部分软件竟然默认「开机自启」,有些软件打开后在「偏好设置」里可以将其手动关闭,有些就只能到设置里关闭,发现macOS13的设置路径跟之 ...
重启计算机后桌面顺序是反的,win10系统修改桌面后重启电脑桌面又回到初始状态的方案...
win10系统使用久了,好多网友反馈说win10系统修改桌面后重启电脑桌面又回到初始状态的问题,非常不方便.有什么办法可以永久解决win10系统修改桌面后重启电脑桌面又回到初始状态的问题,面对win1 ...
html 点击空白关闭浮层,js中点击空白区域时文本框与隐藏层的显示与影藏问题...
当文本框获得焦点的时候,在文本框的下方显示一个浮动层. 当用户点击除了文本框和浮动层以外的网页空白处时,要隐藏浮动层. 当用户点击浮动层时,改变文本框的值. function $(id){ retur ...
如何让计算机桌面自动更换,怎么让电脑自动更换桌面背景
Windows 7支持多张桌面背景切换的功能让我们的桌面更加绚丽,那么怎么让电脑自动更换桌面背景?学习啦小编为大家整理了相关资料,供大家参考! 电脑自动更换桌面背景参考如下 ◎ 系统方案的局限之处关 ...
Vue数组更新及过滤排序功能
Vue为了增加列表渲染的功能,增加了一组观察数组的方法,而且可以显示一个数组的过滤或排序的副本.本文将详细介绍Vue数组更新及过滤排序前面的话 Vue为了增加列表渲染的功能,增加了一组观察数组的方法 ...
electron vue点击按钮关闭_electron+vue制做桌面应用--自定义标题栏最大/小化和关闭...
上一篇:electron+vue制做桌面应用--自定义标题栏中咱们介绍了如何使用electon制做自定义样式的标题栏接下来,咱们介绍一下标题栏上的最大化.最小化和关闭按钮如何实现vue 首先查阅el ...
前端系列——Electron工程构建（普通工程，Vue集成）
前端系列--Electron工程构建(普通工程,Vue集成) Electron 前言创建Electron工程(npm) 1.创建项目文件夹 2.初始化 3.安装Electron环境遇到的错误完成 ...
2019 Electron+Vue+Ant Design Vue仿网易云音乐windows客户端实战分享
特点拖拽播放桌面歌词 mini模式自定义托盘右键菜单任务栏缩略图,歌曲操作音频可视化自动/手动检查更新 Nedb数据库持久化自定义安装路径,安装界面美化浏览器中启动客户端 Travis ...
手把手教Electron+vue的使用
.现如今前端框架数不胜数,尤其是angular.vue吸引一大批前端开发者,在这个高新技术快速崛起的时代,自然少不了各种框架的结合使用.接下来是介绍electron+vue的结合使用. 2.Elect ...

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

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

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

三.影藏默认菜单栏

四.开机自启

五.手动或被动关闭应用

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

最新文章

热门文章

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

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

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

三.影藏默认菜单栏

四.开机自启

五.手动或被动关闭应用

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

最新文章

热门文章

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

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