electron TodoList网页应用打包成linux deb、AppImage应用

这里用的是windows的wsl的ubuntu环境
在这里插入图片描述electron应用打包linux应用需要linux下打包,这里用windows的wsl的ubuntu环境进行操作

1)linux ubuntu安装nodejs、electron

安装nodejs:

sudo apt update
sudo apt upgrade
##快捷安装
curl -fsSL https://deb.nodesource.com/setup_20.x | sudo -E bash -
sudo apt-get install -y nodejs

安装完验证
在这里插入图片描述

安装electron:

##安装cnpm
sudo npm install -g cnpm --registry=https://registry.npmmirror.com
cnpm install --save-dev electron
cnpm install electron-builder --save-dev

在这里插入图片描述

2、electron打包linux应用

参考:
TodoList网页:https://cnloong.blog.csdn.net/article/details/140648621

TodoList打包文件夹内容基本都是上面和windows打包exe一样,只更改了package.json文件
在这里插入图片描述

新package.json内容:
linux下需要author、homepage、maintainer参数,不然会报错

{"name": "todolist-app","version": "1.0.0","main": "main.js","homepage": "https://example.com","author": {"name": "Your Name","email": "your.email@example.com"},"build": {"appId": "com.yourcompany.todolist","mac": {"category": "public.app-category.productivity"},"win": {"icon": "icons/icon.png","target": ["nsis"]},"linux": {"target": ["AppImage","deb"],"category": "Utility","maintainer": "Your Name <your.email@example.com>"} },"scripts": {"start": "electron .","build": "electron-builder --linux"},"keywords": [],"license": "ISC","description": "","devDependencies": {"electron": "^31.2.1","electron-builder": "^24.13.3"},"dependencies": {}
}

打包过程:
1)在windows的wsl的ubuntu环境进入对应windows目录TodoList下
一般/mnt下就是映射的windows的目录

在这里插入图片描述
在这里插入图片描述
2)build

npm run build

在这里插入图片描述
3)打包完成
在dist文件夹下可以看到linux平台的deb、AppImage安装包
在这里插入图片描述
dist\linux-unpacked 下是免安装包
在这里插入图片描述

ubuntu桌面查看

直接cmd进入linux-unpacked 目录下执行

./todolist-app --no-sandbox

如果不加–no-sandbox会报错
在这里插入图片描述

在这里插入图片描述
TodoList 运行效果

在这里插入图片描述

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

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

相关文章

7-23学习笔记

一、异常 即程序中一些程序处理不了的特殊情况 Exception 能被程序本身处理( try-catch )&#xff0c; Error 是无法处理的(只能尽量避免)。 1、异常类 Exception 见过的异常 NullPointerException ArrayIndexoutOfBoundException等 String strnull;System.out.println(st…

《python程序语言设计》第6章14题 估算派值 类似莱布尼茨函数。但是我看不明白

这个题提供的公式我没看明白&#xff0c;后来在网上找到了莱布尼茨函数 c 0 for i in range(1, 902, 100):a (-1) ** (i 1)b 2 * i - 1c a / bprint(i, round(4 / c, 3))结果 #按题里的信息&#xff0c;但是结果不对&#xff0c;莱布尼茨函数到底怎么算呀。

Docker学习与实战

一、Docker安装 移除旧版本docker sudo yum remove docker \docker-client \docker-client-latest \docker-common \docker-latest \docker-latest-logrotate \docker-logrotate \docker-engine配置docker yum源 sudo yum install -y yum-utils配置阿里云docker仓库 sudo y…

学习记录:ESP32控制舵机 FREERTOS BLE

控制舵机 PWM信号 PWM信号是一种周期性变化的方波信号&#xff0c;它有两个关键参数&#xff1a; 周期&#xff08;Period&#xff09;&#xff1a;一个完整的PWM信号的时间长度&#xff0c;通常用秒&#xff08;s&#xff09;或毫秒&#xff08;ms&#xff09;表示。占空比…

前端开发:HTML与CSS

文章目录 前言1.1、CS架构和BS架构1.2、网页构成 HTML1.web开发1.1、最简单的web应用程序1.2、HTTP协议1.2.1 、简介1.2.2、 http协议特性1.3.3、http请求协议与响应协议 2.HTML概述3.HTML标准结构4.标签的语法5.基本标签6.超链接标签6.1、超链接基本使用6.2、锚点 7.img标签8.…

算法:BFS解决 FloodFill 算法

目录 FloodFill 算法 题目一&#xff1a;图像渲染 题目二&#xff1a;岛屿数量 题目三&#xff1a;岛屿的最大面积 题目四&#xff1a;被围绕的区域 FloodFill 算法 在递归搜索回溯中已经说到过 FloodFill 算法了&#xff0c;但是那里是用 dfs 解决的&#xff0c;这里会使…

【Web开发手礼】探索Web开发的魅力(十一)-Vue(1)配置环境、创建导航栏、各页面整体框架

主要讲解了vue的下载、配置环境、项目创建、导航栏、页面整体框架&#xff01;&#xff01;&#xff01; 文章目录 前言 配置环境 终端 安装Nodejs 安装vue/cli 启动vue自带的图形化项目管理界面 基本概念 script部分 template部分 style部分 第三方组件 创建导航栏 总结 前言 …

数据结构——单链表OJ题(上)

目录 一、移除链表元素 1.思路 2.注意 3.解题 二、反转链表 思路1&#xff1a;三指针翻转法 &#xff08;1&#xff09;注意 &#xff08;2&#xff09;解题 思路2&#xff1a;头插法 &#xff08;1&#xff09;注意 &#xff08;2&#xff09;解题 三、链表的中间结…

目标检测算法:深入探索与前沿展望

大家好&#xff0c;我是一名测试开发工程师&#xff0c;已经开源一套【自动化测试框架】和【测试管理平台】&#xff0c;欢迎大家联系我&#xff0c;一起【分享测试知识&#xff0c;交流测试技术】 在人工智能的浩瀚星空中&#xff0c;目标检测算法无疑是一颗璀璨的明星&#x…

uniapp的h5,读取本地txt带标签的文件

效果图 使用的回显的标签是u-parse&#xff0c;下面的网址讲了这个标签的相关 https://www.cnblogs.com/huihuihero/p/12978903.html 导入此插件 https://ext.dcloud.net.cn/plugin?id364 使用 uni.request({// 本地文件url: "/static/互联网医院医师端用户协议.txt…

开始尝试从0写一个项目--前端(三)

器材管理板块 添加器材管理导航 src\views\home\Home.vue src\router\index.js src\views\equipment\Equipment.vue <template><div>hello!</div></template> 测试 搜索导航分页查询 src\views\equipment\Equipment.vue <template><div&…

51.TFT_LCD液晶屏驱动设计与验证(4)

&#xff08;1&#xff09;顶层文件&#xff1a; module tft_colorbar(input clk ,input reset_n ,output hsync ,output vsync ,output [23:0] rgb_tft ,output tft_bl ,output …

LeetCode算法——滑动窗口矩阵篇

1、长度最小的子数组 题目描述&#xff1a; 解法&#xff1a; 设一个 for 循环来改变指向窗口末尾的指针&#xff0c;再不断抛弃当前窗口内的首元素 最终确定满足条件的最小长度 class Solution { public:int minSubArrayLen(int target, vector<int>& nums) {int …

Python 教程(五):理解条件语句和循环结构

目录 专栏列表前言条件语句if 语句elif 语句else 语句示例 循环结构for 循环while 循环break 和 continue实例演示 循环控制语句range 函数enumerate 函数 模式匹配总结 在前四篇教程中&#xff0c;我们学习了 Python 的基本语法和数据结构。本篇教程&#xff0c;我们将深入探讨…

git sendemail使用

教程参考&#xff1a; git-send-email - 以电子邮件形式发送补丁集 1、安装git-email 2、配置 SMTP 服务器 git config --global sendemail.smtpserver smtp.163.com git config --global sendemail.smtpserverport 465 git config --global sendemail.smtpuser xxxxxx163.c…

【故障排查】Docker启动Nacos报错:No DataSource set 问题解决

Nacos报错内容 Nacos Server did not start because dumpservice bean construction failure : No DataSource set原因分析 Nacos 配置的是单机模式&#xff0c;使用mysql 进行存储配置文件&#xff0c;Nacos的启动脚本已经配置了MySQL的连接方式&#xff0c;根据错误提示&a…

大话成像公众号文章阅读学习(二)--- 下一代 AI-ISP会更好

系列文章目录 大话成像公众号文章阅读学习&#xff08;一&#xff09;---- 索尼Alpha 9 III 大话成像公众号文章阅读学习&#xff08;二&#xff09;— 下一代 AI-ISP会更好 文章目录 系列文章目录前言一、AI-ISP1.1 定义与工作原理1.2 应用场景 二、展望总结 前言 这篇是 下…

AWS-Lambda的使用

介绍 Lambda 是一种无服务器(Serverless), 而且设计成事件驱动的计算服务器. 简单来说, 你可以将你的 code 上传, 当有事件产生(例如cronjob , 或者S3有新的文件被上传上來) , 你的code 就会在瞬间(零点几秒以內)被叫起來执行. 由于你不用管 Server如何维护, 或者自动扩展之类…

【Android】安卓四大组件之广播知识总结

文章目录 动态注册使用BroadcastReceiver监听Intent广播注册Broadcast Receiver 静态注册自定义广播标准广播发送广播定义广播接收器注册广播接收器 有序广播修改发送方法定义第二个广播接收器注册广播接收器广播截断 使用本地广播实践-强制下线使用ActivityCollector管理所有活…

微信答题小程序产品研发-UI界面设计

高保真原型虽然已经很接近产品形态了&#xff0c;但毕竟还不能够直接交付给开发。这时就需要UI设计师依据之前的原型设计&#xff0c;进一步细化和实现界面的视觉元素&#xff0c;包括整体视觉风格、颜色、字体、图标、按钮以及交互细节优化等。 UI设计不仅关系到用户的直观感…