vue3+electron+typescript 项目安装、打包、多平台踩坑记录-mac+linux(包括国产化系统)

上一章《vue3+electron+typescript 项目安装、打包、多平台踩坑记录》,我们讲了vue3+electron+typescript的项目安装和windows 32位、64位的打包。这一节我们来看下mac和linux平台的打包和一些坑。

mac

经过上一章我们的踩坑后,再到mac环境,这里看大家的电脑 配置了。如果是 arm架构的,应该问题不大。我这里测试的是x86架构的,i5的mac电脑。很不幸,一开始就遇到一个大坑。

安装依赖时,如果出现 data check 类似的错误,这时恰好电脑又是intel 芯片的,这时候很可能该降系统了。没错,降系统版本。这个有点恶心,我们会发现install 依赖时,给我们下载的electron 依赖包与电脑的芯片架构不一致,很可能给我们下载的是arm架构的依赖,所以一直安装不上。

额mmmmm,这里缺张图片,之前忘了截图保存了。总之就是看到类似 data check 之类的,如果电脑是arm架构的,应该不会有这个问题。

这和mac的新系统有关。自从mac开始使用自研芯片以后,对intel的芯片就爱答不理了,甚至后面升级的系统,貌似直接忽略了电脑本身是intel芯片。其他不多吐槽,直接将系统重置到出厂状态就行(注意是重置到出厂状态,不是重装,重装解决不了问题)

另外还有一个,必须要有xcode的相关命令,这个一般都有的,这里不多说。

搞好这个问题,接下来就简单了。我们直接配置一个打包mac的命令就行
在package.json里面的scripts里面添加命令

 "build:mac": "vite build && electron-builder --mac",

搞定。这里好简单的,就不晒图了

另外,在mac环境打包windows的应用,也很简单的,用这个命令即可:vue-tsc && vite build && electron-builder --win

linux

linux的系统版本太多了,这里试一下开源的ubantu,还有其他国产化的系统,统信,麒麟,深度

ubantu系统信息如下图
在这里插入图片描述

配置linux打包格式和命令

首先配置ilnux的打包格式,在electron.builder.json5中

  "linux": {"target": ["deb"],"artifactName": "${productName}-Linux-${version}_${arch}.${ext}"}

linux 平台有很多种包,官方是这样描述的:target = AppImage String | TargetConfiguration - Target package type: list of AppImage, flatpak, snap, deb, rpm, freebsd, pacman, p5p, apk, 7z, zip, tar.xz, tar.lz, tar.gz, tar.bz2, dir.

AppImage,deb,snap等均适用于ubantu。但是snap需要签名,AppImage不需要安装,我们就先不管了, 先以.deb后缀名的包来研究一下

然后去配置打包命令,在package.json中的scripts里面添加该命令,如下

"build:linux": "vite build && electron-builder --linux",

在windows环境打包linux应用

然后运行命令

npm run build:linux

不出意外的话,果然出意外了,报错: ⨯ Please specify project homepage, see https://electron.build/configuration/configuration#Metadata-homepage

Please specify author ‘email’ in the application package.json

See https://docs.npmjs.com/files/package.json#people-fields-author-contributors

It is required to set Linux .deb package maintainer. Or you can set maintainer in the custom linux options.
(see https://www.electron.build/configuration/linux).
failedTask=build stackTrace=Error: Please specify project homepage, see https://electron.build/configuration/configuration#Metadata-homepage
在这里插入图片描述
这个意思就是说,linux平台,homepage,authorl这些配置都是必须的!!

好吧。linux 的 deb格式的包,配置上要多加点东西,我们创建项目时,linux处的配置模式是AppImage,这种格式是不需要这些配置的。AppImage格式这里就不说了,要简单点。去查下官方文档,然后我们在package.json里面加上,如下:

  "homepage": "https://your-app-website-or-project-url.com","author": "yanglian <youremail@qq.com>",

上面的配置,仅测试用,所以随便写的,只要格式符合要求就行

然后再次打包,又又又又报错了,如下:
cannot execute cause=exec: “fpm”: executable file not found in %PATH%
command=fpm -s dir --force -t deb -d libgtk-3-0 -d libnotify4 -d libnss3 -d libxss1 -d libxtst6 -d xdg-utils -d libatspi2.0-0 -d libuuid1 -d libsecret-1-0 --deb-recommends libappindicator3-1 --deb-compression xz --architecture amd
64 --after-install ‘C:\Users\Administrator\AppData\Local\Temp\t-N0FbTK\0-after-install’ --after-remove ‘C:\Users\Administrator\AppData\Local\Temp\t-N0FbTK\1-after-remove’ --description ’

在这里插入图片描述
又又又折腾查询了解了一番,信息如下:

使用Electron-builder在Windows上构建Linux目标包,通常需要确保你具备以下几点:1. Wine子系统: 确理论使用Windows 10或更高版本,确保启用了内置的ine子系统(WSLx)并安装了目标Linux发行版(如Ubuntu)。这将允许你运行Linux命令。2. ine子系统配置: 在ine子系统内安装必要的构建工具,包括fpm、make、gcc等。确保它们在PATH环境变量中可访问。3. Electron-builder配置: 你的electron-builder.json配置文件需要正确指明Linux构建目标和环境。对于特定的错误,确保你没有直接在Windows命令行中调用fpm,因为那是预期在Linux环境下执行的。

额,我先选择放弃!!!!!!!!!!!!因为我还有退路哈哈

在mac环境打包linux应用

因此mac的环境之前已经弄好了,所以,何不先在mac上试试?
同样的配置,我们到mac的开发环境去打包Linux。

运行打包命令
npm run build:linux

还是报错,只不过,和windows的不一样,而且我们发现,mac开发环境下,已经可以自动去下载fpm包了。这也难怪,mac和linxux的环境,本来就相比windows要相近不少。
在这里插入图片描述
这个错误,说的是401,网络问题。虽然我们已经将electron源,npm源都设置成了淘宝镜像,但是,但是,还有些包是从github下载的,md,如果我们的网络访问github费劲的话,只能科学上网了。行吧,开个科学上网,全局代理的那种,再走一波mac的环境,最终打包成功。
然后我们将大好的liunux包拷贝到ubantu虚拟机上。

这里说一下,我的虚拟机安装在windows电脑上,下面简单讲下怎么拷贝。

从windows主机拷贝文件到ubantu虚拟机步骤

第1~4步,如下图:【仅供参考,不同的ubantu版本可能会有差异】
在这里插入图片描述
第一步:找到ubantu的“文件”,点开
第二步:点击“其他位置”
第三步:输入主机的ip地址,注意协议头是smb,例如:smb://192.168.1.10
第四步:点击”连接“
第五步:输入ubantu虚拟机电脑登录密码
在这里插入图片描述
第六步:输入主机的登录用户名和密码,然后点击”连接“
在这里插入图片描述
连接成功后,进去就可以看到类似下面的界面,
在这里插入图片描述
然后去找到放在windows 电脑上的文件,移动到虚拟机对应的地方即可。我这里移动到下载目录。注意,因权限原因,最好不要放到”桌面“目录,可用放”下载“或者”文档“等权限相对宽松的目录

在ubantu虚拟机中安装程序

推荐使用命令安装。直接双击应用或者使用ubantu虚拟机的”程序安装器“运行,可能会有其他问题

sudo dpkg -i ElectronTest-Linux-0.0.1_amd64.deb

在这里插入图片描述
由于使用sudo命令,所以要输入虚拟机电脑登录密码,安装成功后的命令提示信息如下:
在这里插入图片描述
能看到如上信息的基本就是成功的了

在ubantu虚拟机中运行程序

使用命令运行或者菜单运行。安装成功后,在菜单里面能看到新程序的图标,双击运行,也可以使用命令运行
在这里插入图片描述
使用命令运行,在重点控制台输入程序名称即可。注意程序名称和应用程序文件名称不是一回事。程序名称是项目代码里面的package.json 的 name,如下图:
在这里插入图片描述
这里程序名称是:vite-electron,因此,直接在终端输入 vite-electron ,然后 回车,就可以启动程序了
在这里插入图片描述
mac环境打包linux,大功告成!!

ubantu环境打包linux应用

刚刚上面windows电脑上打包报错了,还要装linux子系统什么的,但是,我们已经安装了ubantu虚拟机了,何不在ubantu虚拟机里面直接打包试试?

这里默认已经安装好了nodejs,vue,vscode,git 等开发环境和工具。没安装的估计要先折腾下哦。

关于Nodejs 环境的安装,这里说个遇到的坑:我安装的时候,使用curl只能找到 node16版本的包,但是此时的vue3+vite+electron的项目依赖默认已经要求Node>=18了,所以就想办法装18。由于当前操作时,curl没有18以上的包(也有可能是我操作不对),所以选择了手动安装,手动配置Nodejs环境。
大致步骤是,先下载好node-v18.19.0-linux-x64.tar.xz,接下来的命令如下:

cd /usr/local
sudo tar -xvf node-v18.19.0-linux-x64.tar.xz
cd /usr/local
sudo tar -xvf node-v18.19.0-linux-x64.tar.xzecho 'export NODE_HOME=/usr/local/node' >> ~/.bashrc
echo 'export PATH=$NODE_HOME/bin:$PATH' >> ~/.bashrcsource ~/.bashrc

可能还有其他坑,大家自行查询了。这里不多说。

拉取项目并打包

这里将文件拷贝或者从git上克隆到目录:文档/projects 下面。在文档里面建文件夹projects时,不要用sudo命令,或者直接界面化操作来创建,创建好的Projects文件夹应该没有“锁”的标志,否则权限问题够喝一壶了

然后安装依赖(ps:还是科学上网和,全局的那种。吐槽:感觉淘宝镜像白设置了。。。)。装好依赖,我们运行命令

npm run build

到这里就可以直接用npm run build了,因为已经到了linux环境的地盘,不需要单独指定环境的了。

如果环境不齐全,我们可能会遇到下面这个错误:
在这里插入图片描述
⨯ cannot execute cause=exit status 1
out={:timestamp=>“2024-06-02T09:45:30.344175+0800”, :message=>“Debian packaging tools generally labels all files in /etc as config files, as mandated by policy, so fpm defaults to this behavior for deb packages. You can disable this default behavior with --deb-no-default-config-files flag”, :level=>:warn}
{:timestamp=>“2024-06-02T09:47:00.518924+0800”, :message=>“Need executable ‘ar’ to convert dir to deb”, :level=>:error}

遇到这个错误,主要是因为在打包Electron应用时,系统缺少必要的工具或遇到了执行权限问题。
错误信息提示了几个关键点:

  1. cannot execute cause=exit status 1:这是一个通用的错误代码,表明打包过程中的某个命令执行失败。
  2. Debian packaging tools generally labels all files in /etc as config files, as mandated by policy, so fpm defaults to this behavior for deb packages. You can disable this default behavior with --deb-no-default-config-files flag:这是个警告,说明Debian打包工具将/etc下的所有文件默认视为配置文件,但不影响打包,可以忽略或按需使用–deb-no-default-config-files标志。
  3. Need executable ‘ar’ to convert dir to deb: 这是最关键的错误,说明缺少ar工具,它是用于创建、修改或提取归档文件的工具,是打包deb文件所必需的。

解决方法:安装ar工具,运行以下命令安装缺失的ar工具

sudo apt-get install binutils

再次尝试打包,这次成功了。

同样,我们使用命令安装程序,然后到菜单里面去,找到安装好的应用,双击打开,应用正常运行
在这里插入图片描述
相关安装步骤上面已经说了,这里不赘述。

国产化操作系统尝试

统信(UOS)系统

众所周知,未来国产化是趋势之一,当下【2024年6月1日】最局希望的当属 鸿蒙系统(Homany OS),国产化的桌面端操作系统则有 Debin(深度),统信(UOS),麒麟,龙芯等等。据我了解,目前(2024年6月)已有不少政府机构已经换成了国产化的系统,所以值得探究一番。

这里装了一个统信的虚拟机,但是,没激活哈。尝试安装下开发环境,所以输入了如下命令,sudo apt-get update
在这里插入图片描述
我晕!!!
在这里插入图片描述
我直接无语!!!

尝试访问下主机的共享文件夹
在这里插入图片描述
格局小了!!

我是说我格局小了,因为目前属个人爱好研究,所以不想去花米。放弃吧。去下载个微信、钉钉之类的或者其他可以传输文件的软件或者方式得了。

ok。这里我用钉钉吧文件传进去了

下载后,这里双击程序安装(因为命令 是不行的了,不行自己试试,除非已经激活了)。我这边成功安装,但是,无法运行。。。。
在这里插入图片描述
统信尝试以失败告终。

deepin系统

作为统信的还同胞兄弟,深度系统(deepin)是不要米的。系统镜像连接:https://cdimage.deepin.com/releases/20.9/deepin-desktop-community-20.9-amd64.iso

安装好虚拟机后,还是使用钉钉传输文件,然后安装。安装和启动程序方法和ubantu一样。不赘述,结果如下:
在这里插入图片描述
欧克。没问题。看来ubantu搞定了,这些使用.deb后缀的系统也差不多

关于文件传输,我这里查找了一下方法,尝试了一下,没成功。所以就直接用钉钉了。我的方法如下,哪位知道问题所在的大神还望不吝赐教。

  1. 在VirtualBox中设置共享文件夹
    关闭虚拟机,选择虚拟机 > 设置 > 选项 > 共享文件夹。
    添加一个新的共享文件夹,选择主机上的文件夹路径,并设定共享名称

  2. 在Deepin中挂载共享文件夹

开启虚拟机后,共享的文件夹通常自动挂载在/mnt/hgfs目录下。如果未自动挂载,可以手动挂载:

sudo mount -t vmhgfs /mnt/hgfs

然后访问 cd /mnt/hgfs/查看共享文件夹名

麒麟系统

没问题,所以不多说了。看图就行
在这里插入图片描述

小结

好了。这里做下小总结吧。

开发环境可打包应用包格式其他说明
windowswindows平台应用windows 的exe,msi可以打包linux应用,但是比较麻烦;想在windows平台打包mac应用??太麻烦,别想
macwindows、mac、linux都行windows 的exe,msi;mac的dmg,pkg;linux平台的AppImage,deb,snap等我最棒,啥都可以干
linuxlinux应用linux平台的AppImage,deb,snap等windows、mac应用也是可以打包的,但是比较麻烦

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/21798.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

“雪糕刺客”爆改“红薯刺客”,钟薛高给了消费品牌哪些启示?

夏日袭来&#xff0c;一支价格高昂却让人眼前一亮的雪糕&#xff0c;曾一度成为市场热议的焦点。然而&#xff0c;随着消费者对性价比的日益关注&#xff0c;曾经的“雪糕刺客”钟薛高&#xff0c;其创始人林盛近期以直播带货红薯开启他的还债之路&#xff0c;高打情怀“直播自…

关于序列化与反序列化解题

1、[安洵杯 2019]easy_serialize_php <?php$function $_GET[f];function filter($img){$filter_arr array(php,flag,php5,php4,fl1g);$filter /.implode(|,$filter_arr)./i;return preg_replace($filter,,$img); }if($_SESSION){unset($_SESSION); }$_SESSION["use…

《数据资产》专题:《数据资产》如何确权、估值? 《数据产权》如何明确、保护?

2020 年 04 月 10 日&#xff0c;《中共中央国务院 关于“构建更加完善的要素市场化配置体制机制”的意见》正式公布&#xff0c;将数据确立为五大生产要素&#xff08;土地、资本、劳动力以及技术&#xff09;之一&#xff0c;数据要素市场化已成为建设数字中国不可或缺的一部…

python系列29:压测工具locust

1. 介绍 使用pip进行安装&#xff0c;下面是个简单例子&#xff1a; from locust import HttpUser, taskclass HelloWorldUser(HttpUser):taskdef hello_world(self):self.client.get("/hello")self.client.get("/world")然后打开web页面&#xff1a; 点…

大尺寸图像分类检测分割统一模型:Resource Efficient Perception for Vision Systems

论文题目&#xff1a;Resource Efficient Perception for Vision Systems 论文链接&#xff1a;http://arxiv.org/abs/2405.07166 代码链接&#xff1a;https://github.com/Visual-Conception-Group/Localized-Perception-Constrained-Vision-Systems 作者设计了一个统一的模…

k8s牛客面经篇

k8s的pod版块: k8s的网络版块: k8s的deployment版块: k8s的service版块: k8s的探针板块: k8s的控制调度板块: k8s的日志监控板块: k8s的流量转发板块: k8s的宏观版块:

单列集合--collection

package exercise;import java.util.ArrayList; import java.util.Collection;public class CollectionDemo {public static void main(String[] args) {//注意点://Co1lection是一个接口,我们不能直接创建他的对象。//所以&#xff0c;现在我们学习他的方法时&#xff0c;只能…

【LeetCode算法】第108题:将有序数组转换为二叉搜索树

目录 一、题目描述 二、初次解答 三、官方解法 四、总结 一、题目描述 二、初次解答 1. 思路&#xff1a;由于数组nums是递增的&#xff0c;采用二分查找法来构造平衡二叉搜索树。首先&#xff0c;选择nums的中间结点作为根节点&#xff0c;然后将左部分的中间值作为左子树…

中学生学人工智能系列:如何用AI学物理

经常有读者朋友给公众号《人工智能怎么学》留言咨询如何使用人工智能学习语文、数学、英语、化学等科目。这些都是中学教师、中学生朋友及其家长们普遍关注的问题。仅仅使用留言回复的方式&#xff0c;不可能对这些问题做出具体和透彻的解答&#xff0c;因此本公众号近期将推出…

Linux基础 (十二):Linux 线程的创建与同步

本篇博客详细介绍与线程有关的内容&#xff0c;这部分也是笔试面试的重点&#xff0c;需要我们对线程有深刻的理解&#xff0c;尤其是线程的并发运行以及线程同步的控制&#xff01;接下来&#xff0c;让我们走进线程的世界&#xff0c;去理解线程&#xff0c;使用线程&#xf…

kvm学习 - 迅速上手示例

目录 kvmtool kvmsample kvmtool GitHub - kvmtool/kvmtool: Stand-alone Native Linux KVM Tool repoStand-alone Native Linux KVM Tool repo. Contribute to kvmtool/kvmtool development by creating an account on GitHub.https://github.com/kvmtool/kvmtool.git cd …

Wpf 使用 Prism 开发MyToDo应用程序

MyToDo 是使用 WPF &#xff0c;并且塔配Prism 框架进行开发的项目。项目中进行了前后端分离设计&#xff0c;客户端所有的数据均通过API接口获取。适合新手入门学习WPF以及Prism 框架使用。 首页统计以及点击导航到相关模块功能待办事项增删改查功能备忘录增删改查功能登录注册…

Vue渲染函数与JSX指南

title: Vue渲染函数与JSX指南 date: 2024/6/3 下午6:43:53 updated: 2024/6/3 下午6:43:53 categories: 前端开发 tags:Vue渲染JSX基础性能优化组件对比React JSX大项目测试策略 第1章&#xff1a;Vue.js入门 Vue.js的历史和背景 Vue.js是一个用于构建用户界面的JavaScript框…

Java流与链表:探索java.util.stream与LinkedList的交汇点

在现代Java开发中&#xff0c;流&#xff08;Streams&#xff09;和链表&#xff08;LinkedList&#xff09;都是强大且常用的数据处理工具。java.util.stream提供了高效的方式来处理数据流&#xff0c;而LinkedList则是java.util包中的经典集合实现。本文将探索它们的交汇点&a…

【Java】接口详解

接口是抽象类的更进一步. 抽象类中还可以包含非抽象方法, 和字段. 而接口中包含的方法都是抽象方法, 字段只能包含静态常量。 一个简单的接口代码示例 interface IShape { void draw(); } class Cycle implements IShape { Override public void draw() { System.out.println…

【论文笔记】Content-based Unrestricted Adversarial Attack

图2&#xff1a;Adversarial Content Attack的流程。首先使用Image Latent Mapping将图像映射到潜变量空间。然后&#xff0c;用Adversarial Latent Optimization生成对抗性样本。最后&#xff0c;生成的对抗性样本可以欺骗到目标分类模型。 3.1 Image Latent Mapping 对于扩…

升级 macOS 12 之后,CleanMyMac 闪退怎么办?

​​好多朋友在升级 macOS 12 之后&#xff0c;发现 CleanMyMac 出现闪退问题&#xff0c;这可能是TNT的证书过期造成的&#xff0c;那么如何解决CleanMyMac闪退的问题呢&#xff1f; 今天给大家带来了三种解决方法&#xff0c;如下&#xff1a; 一、打开“终端”&#xff0c;运…

回溯算法常见思路

回溯问题 回溯法&#xff0c;一般可以解决如下几种问题&#xff1a; 组合问题&#xff1a;N个数里面按一定规则找出k个数的集合切割问题&#xff1a;一个字符串按一定规则有几种切割方式子集问题&#xff1a;一个N个数的集合里有多少符合条件的子集排列问题&#xff1a;N个数…

for深入学习

目录 练习&#xff1a; 例1&#xff1a; 求解0-100中整除3的数有哪些 例2&#xff1a; 求0-100中含数字9个个数 作业&#xff1a; 练习&#xff1a; 例1&#xff1a; 求解0-100中整除3的数有哪些 代码&#xff1a; #include<stdio.h> int main() {printf("整…

揭秘!天工AI如何帮我轻松搞定产品经理工作,低调强大

聊到AI搜索&#xff0c;总会想起那句话&#xff1a;“领导者和追随者最大的区别在于创新” 作为一名AI产品经理&#xff0c;我深刻体会到搜索引擎对我们日常生活的重要性&#xff0c;在本文中我将会分享我是如何使用图文并茂的天工AI搜索引擎辅助我完成产品经理的工作。 从最初…