【Electron-vue】构建桌面应用(25)- Ubuntu安装deb文件任务栏不显示应用图标
1.前言
上帝在给你打开一扇窗的同时,会给你挖个坑
最近在做Electron-Vue
支持Linux
系统的调研。发现坑太多了,由于Linux
的发行版太多再加上还有不同的UI,导致要做版本的支持会是一个让人很崩溃的事情。
首先让我们看看Linux
系统下的表现形式。
2.Linux支持Electron客户端
先了解一下Linux世界用户较多的前2大主要分支,
- RedHat Red Hat Enterprise Linux 简称RHEL rpm (RedHat, CentOS, Fedora, Oracle…)
- Debian Ubuntu Server 简称Ubuntu deb (Debian, Ubuntu, Mint, MX Linux…)
- 还有:Arch, Gentoo, SUSE, BSD, Android等…
前两大分支的包管理有2大阵营,安装文件互不相融。
- 安装文件:*.rpm,RedHat分支,CentOS等,使用yum命令安装…
- 安装文件:*.deb,Debian分支,Ubuntu等,使用apt-get命令安装…
然后2边都推出了新的规则,希望能一统江湖:
- Flatpak 是 RedHat 的东西;
- Snap 是 Canonical 的东西。
因为我制作的deb包,所以主要在Debian
和Ubuntu
上的支持.
2.1 DeBian支持
关于Debian
的支持,我是用的是Deepin
系统去做的测试,从打包到安装,在Deepin
系统上表现良好,可以正常的安装使用以及正常显示左面图标。
在Deepin系统下,通过npm run build
打包后能正常安装使用
但是通过build
命令生成时的package.json
中关于icon
的配置项,在实际打包时并没有被引用。而是使用了在创建deb
包时的关于Icon
的配置。
"mac": {"icon": "build/icons/icon.icns"},"win": {"icon": "build/icons/icon.ico"},"linux": {"icon": "build/icons"}
该package.json
中的配置图片指向了build/icons
而该图片是electron-vue
自带的图片
在打成deb
文件时的配置如下
而其中的指向的图片确实我自己定义的
而在安装deb
文件后,却发现不管是快捷方式启动还是任务栏图片都指向了我的deb
文件中的配置
所以在这里可以得出结论:在Deepin系统中,关于Electron-vue项目中的package.json中的build关注与icon的配置其实在build过程中是不生效的。在Deepin系统中,其实生成的任务栏图标,快捷方式图标都依赖于你在.desktop文件中的配置icon。其生成后的安装包和windows下的exe文件表现形式是相似的几乎不需要修改任何代码就可以移植到deepin中使用
.
2.2 Ubuntu系统支持Electron项目
一开始我是将windows
下Electron-vue
的项目copy到Ubuntu
。然后正常的打包,通过DEBIAN
的方式去创建deb
文件,安装deb
文件,发现在应用列表中显示的图片是用户自己在deb
配置中配置的。可以在应用了列表中支持显示
在任务栏中却不显示任何图片,不管是官方的图片还是用户自己定制的图片
就很懵逼,所以我就去Electron-vue
官网查找有没有对应的设置,由于Electron-vue
从2019年就不维护了,即便我在上面提了问题,也久久收不到回复。
于是我就尝试重新下载一个Electron-vue
项目,不做任何修改,然后通过制作deb的方式去创建安装文件,发现在执行npm run dev
的时候,在任务栏撒花姑娘依旧是一片空白(如上图所示)。
这么说,官方给出的Demo压根就不支持Ubuntu下的安装?还是说Demo中的配置有问题?
由于Electron-vue
也没有人维护,便尝试着去github
上去查一下Electron
,看看有没有类似的问题。
大都碰到的问题都是托盘中的图标问题,跟我的问题有出入,因为我的应用程序是在托盘中显示正常,在任务栏显示不正常。
而有一部分问题指向了应用指示器
,在一片文章上看到了关于应用指示器,其中提到了Electron
。
1.修改应用指示器
参考:http://www.webupd8.org/2017/04/fix-appindicator-not-working-for.html
It looks like Dropbox isn't the only AppIndicator that doesn't work in Ubuntu 17.04 Zesty Zapus (under Unity) due to the change of XDG_CURRENT_DESKTOP from "Unity" to "Unity:Unity7".
译文:由于XDG_CURRENT_DESKTOP
从Unity
改为Unity:Unity7
,导致应用指示器无法在Unity
下的Ubuntu 17.04 Zesty Zapus
Electron applications (such as the new Skype For Linux, WMail, PB For Desktop and many others) are affected as well, but in a different way. For Electron applications, the indicator is not displayed at all in Ubuntu 17.04 Zesty Zapus under Unity.
译文:Electron
应用(比如linux下的Skype, WMail, PB和其他的一些桌面应用)也会受到影响,但表现的方式/形式不一样。对于Electron
应用,在Unity
下的Ubuntu 17.04 Zesty Zapus
根本就没有这个应用指示器。
The fix is similar to the one applied to the Dropbox indicator. Simply run the application with "env XDG_CURRENT_DESKTOP=Unity". For example, to start Skype For Linux, you would use:
env XDG_CURRENT_DESKTOP=Unity skypeforlinux
译文:Electron应用指示器
的修复类似于Dropbox
。使用env XDG_CURRENT_DESKTOP=Unity
来简单的执行程序。例如,启动在linux
下Skype
,你可以这么做:
env XDG_CURRENT_DESKTOP=Unity skypeforlinux
To make the fix permanent, copy the application desktop file from /usr/share/applications/ to ~/.local/share/applications/, then edit the file and change the "Exec" line by adding "env XDG_CURRENT_DESKTOP=Unity" (without the quotes) immediately after "Exec=".
译文:要想永久性的修复,需要将/usr/share/applications/
下对应的应用.desktop文件copy到~/.local/share/applications/
,然后编辑.desktop文件,在Exec
所在行直接在"Exec="后面添加XDG_CURRENT_DESKTOP=Unity
,
Some applications are set to start automatically and in that case, you'll have to edit the desktop file from ~/.config/autostart/ in the same way.
译文:一些其他的应用如果设置了自启动,在这种情况下,你必须用相同的方式去修改~/.config/autostart/
下应用对应的desktop文件。
Note that some applications overwrite any changes made to their autostart files, located in ~/.config/autostart/. A way around this is to rename the autostart file, then in the application settings, set the application not to start on login. This way, the modified autostart file will be used (which has a different name and contains the workaround).
译文:注意,一些应用程序会覆盖对位于~/.config/autostart/中的自动启动文件所做的任何更改。解决这个问题的方法是重命名自动启动文件,然后在应用程序设置中,将应用程序设置为登录时不启动。这样,将使用修改后的自动启动文件(它有不同的名称,并包含解决方案)。
结果:没有解决对应的问题,怀疑应用指示器并非是解决任务栏图标不显示的问题。而且存在一些文件copy修改的操作,在实际安装中不友好。
2. 创建软连接
在Electron
中搜索无果后,便将注意力转移到Ubuntu
上,其中找到了类似的情况
于是尝试创建软连接的方式,没有解决对应的问题,因为Ubuntu20+ Gnome
并没有对应的Steam
文件
ln -s ~/.var/app/com.valvesoftware.Steam/.local/share/Steam ~/.local/share/Steam
搜索之后也没有对应的解决方案。
在开发环境下,在托盘菜单中显示的是三个点,并不是你的icon图片,但是在build之后是没有问题的,所以我就没有关注。
3. 回归最初
大概花了一周的时间去调研在Electron-vue
,Elecctron
,Ubuntu
中任务栏图标不显示的的问题。都没有找到解决方案,所以不得不又把目光锁定到项目的最初。
由于在github上有出现过类似的问题,但是问题都被关闭了。便考虑了下是不是Electron
版本的问题导致的,然后在后期版本中修复了这个问题。
查看了一下Electron-vue
中的版本Electron
版本居然还是v2版本,而Electron
官方版本已经到v11了。决定升级一下Electron
版本。
抛开自己的Electron-vue
项目,转而到Electron-React
项目,发现这个项目一直有人在维护,而且electron
版本也是最近的,便构建了一个纯净的Electron-vue
项目,然后构建deb文件,发现现象跟Electron-vue
一样。
我不得不再次问号,……&%%&……%&……@…………@……#@@%¥@%¥
既然这样我就直接用Electron
去构建一个项目,让一切回到最初,最简单的方式去验证。
"scripts": {"test": "echo \"Error: no test specified\" && exit 1","dev": "electron ."},
我草,这…还是不显示。
我就&……&…………(&(&(&((
官方在原Demo中使用的是这个命令
"start": "electron",
执行yarn start
的时候,奇怪的事情发现了
也就是我在构建原Electron
项目时,通过yarn start
启动的是原官方的项目,而执行yarn dev
的时候执行的是自己构建的项目代码,也就是说官方的可以显示,而我自己的不能显示(在不改任何代码的情况下)。
于是问题就开始变得清晰了,也许在官方原项目进行打包的时候它配置了图片的路径,而我在实际开发自己的项目时并没有设置对应的图片。
那么开始coding…,在创建窗口的时候引入一张图片icon:'icon.png'
function createWindow () {const win = new BrowserWindow({width: 800,height: 600,frame:false,useContentSize: false,resizable: false,webPreferences: {nodeIntegration: true},icon:'icon.png'})win.loadFile('index.html')
}
于是奇迹出现了,它来了,它来了,它带着图片过来了
那这样的话,我就知道问题在哪了,启动程序时,任务栏的图片是在程序中生成的,而不是在构建应用时产生的。
所以在前面提到的关于package.json中的build配置并没有什么用
于是我又把目光转回到我的Electron-vue
项目,加上了图片设置
// 创建窗体
function createWindow() {let appIcon //创建系统通知区菜单if (process.env.NODE_ENV !== 'development') {//生产环境appIcon = path.join(__static, './icon.png')} else {//研发环境appIcon = path.join(__dirname, './icon.png')}/*** Initial window options*/mainWindow = new BrowserWindow({height: 350,width: 400,useContentSize: false,resizable: false,frame: false,icon: appIcon})
}
需要注意的是:在Electron-vue
生产环境的路径图片存放在static
下
然后我就尝试在开发环境和生产环境,程序均可正常运行
无论是在任务栏,还是桌面快捷方式,还是在托盘中,均能正常显示。
终于结束了我一周的调研,结论就是:在选择框架上一定要选择有近期持续更新的架构,否则你选择的结构不维护了,连问问题都没有给你解答。
【Electron-vue】构建桌面应用(25)- Ubuntu安装deb文件任务栏不显示应用图标相关推荐
- Ubuntu安装deb文件的步骤
Ubuntu安装deb文件可以直接双击,默认使用软件中心打开,此外也可以使用命令安装. 下面介绍命令安装方法: ubuntu的软件包格式是deb,如果要安装rpm的包,则要先用alien把rpm转换成 ...
- ubuntu安装deb文件包
使用命令行如下命令安装 sudo dpkg -i xxx.deb 安装好后的文件在软件中心可以看到 也就是最左上角的图标 内的application中
- ubuntu 安装deb文件的安装方法
1. 打开终端 sudo dpkg -i +.deb文件 如果报错运行 sudo apt-get -f install 关注公众号[程序员每日一学]让我们每天一起学习进步-
- ubuntu安装deb无需依赖
ubuntu安装deb文件使用dpkg有时候缺少依赖,还要一一下载依赖,很烦.一个命令自动下载依赖,并安装软件.如下:: 先下载:gdebi sudo apt-get install gdebi 再安 ...
- 5在ios上无法选取文件_无法在 Ubuntu 20.04 上安装 Deb 文件?这是你需要做的! | Linux 中国...
双击 .deb 文件后无法通过 Ubuntu 20.04 的软件中心安装?你不是唯一遇到此问题的人.本教程展示了解决方法. 来源:https://linux.cn/article-12220-1.ht ...
- ubuntu 安裝deb_解决无法在Ubuntu 20.04上安装Deb文件的问题
导读 双击.deb 文件后无法通过 Ubuntu 20.04 的软件中心安装?你不是唯一遇到此问题的人.本教程展示了解决方法. 双击.deb 文件后无法通过 Ubuntu 20.04 的软件中心安装? ...
- Ubuntu安装deb软件包错误(依赖关系问题)解决
Ubuntu安装deb软件包错误(依赖关系问题)解决 参考文章: (1)Ubuntu安装deb软件包错误(依赖关系问题)解决 (2)https://www.cnblogs.com/congyucn/p ...
- Ubuntu 安装rpm文件
ubuntu的软件包格式是deb,如果要安装rpm的包,则要先用alien把rpm转换成deb. 需要先安装alien, 默认没有安装,所以首先要安装它 # 第一步,安装alien sudo apt- ...
- Ubuntu安装采用nomodeset命令后导致显示不完全
Ubuntu安装采用nomodeset命令后导致显示不完全 一部份NVIDIA显卡用户在安装Ubuntu系统时会出现驱动不兼容的情况,此时采用nomodeset命令禁用显卡,但是在禁用后可能会出现分区 ...
最新文章
- 【Sql Server】DateBase-结构化查询基础
- 计算机安装双系统后系统引导修复的方法
- 当下全球最炙手可热的八位少年创业者
- SpringBoot2.x整合redis实战讲解
- javaScript中获取时间
- 修复 IE 的文本3像素偏移Bug
- 华为与奔驰展开合作 HMS for Car登陆S级轿车
- Centos Siege测试使用
- Python的数据类型
- 专插本计算机二级英语四级,专插本考试需要英语四级吗?
- oracle数据库字符集US7ASCII,在java中处理中文问题
- OPCUA协议: 复杂服务器C语言初步实践(回调与方法)
- 为静态照片添加动画表情的iOS应用MugLife来了,网友惊呼「这技术等着被收购吧」
- BZOJ 1002 1003 1007 被屠记录
- 又找到一款微信机器人!(附源码)
- python小测试_Python小测试 (2)
- 淘宝开店历程-致广大新开淘宝店主
- 怎么删除计算机的打印机设备,win7系统的打印机删除不掉怎么办?完美解决方法看这里!...
- qt4.8与达梦数据库间的插入和更新字符串数值问题
- java编写一个圆环类Ring_编写一个圆环类ring的java程序
热门文章
- JS--实现漂浮广告
- CentOS 安装 Docker 教程
- 看见“信任”,可信计算史上最全解析
- cmd sqlplus远程连接_sqlplus连接远程数据库
- [概念]CSV逗号分隔值
- $.each与$().each
- 用transform:scale();缩放
- mysql inet aton ipv6_mysql 使用inet_aton和inet_ntoa处理ip地址数据
- CentOS Stream8安装oh my zsh
- Explaining and Harnessing Adversarial Examples——论文的学习笔记01