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

news2024/11/18 8:13:35

这里用的是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.coloradmin.cn/o/1949222.html

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

相关文章

数据缺失补全方法综述

数据缺失补全方法综述 摘要1. 引言2. 数据缺失的类型3. 数据缺失补全方法3.1 简单插补方法3.1.1 均值插补3.1.2 中位数插补3.1.3 众数插补3.1.4 前向填充和后向填充3.1.5 线性插值3.1.6 多重插补 3.2 基于模型的插补方法3.2.1 线性回归插补3.2.2 加权回归插补3.2.3 主成分分析&…

如何改桥接模式

桥接模式主要是解决 路由功能的 因为NAT多层 主要是网络连接数太多时 然后路由器要好 不然光猫 比差路由要强的 光猫 请注意&#xff0c;对光猫的任何设置进行修改前&#xff0c;请一定要备份光猫的配置文件&#xff0c;并在每次修改前都截图保存原始设置信息&#xff01;不要…

Jacoco 单元测试配置

前言 编写单元测试是开发健壮程序的有效途径&#xff0c;单元测试写的好不好可以从多个指标考量&#xff0c;其中一个就是单元测试的覆盖率。单元测试覆盖率可以看到我们的单元测试覆盖了多少代码行、类、分支等。查看单元测试覆盖率可以使用一些工具帮助我们计算&#xff0c;…

pytest结合allure-pytest插件生成测试报告

目录 一、安装allure-pytest插件 二、下载allure 三、生成allure报告 四、效果展示 一、安装allure-pytest插件 二、下载allure 下载之后解压&#xff0c;解压之后还要配置环境变量&#xff08;把allure目录下bin目录配置到系统变量的path路径&#xff09;&#xff0c;下…

AcWing1维差分

输入数据a数组 a[i]a0a1a2 … \dots …anb[i]b0b1b2 … \dots …bn b1a1 b2a2-a1 … \dots … bnan-an-1 以上各式累加相消得到 b1b2 … \dots …bnan 也就是说任一an可以由b数组累加求和得到并且任一个bi加上元素c等于在an上面c。 对于区间[L,R], aLb1b2 … \dots …bL aL1…

【短视频矩阵系统源码如何构建?】

在数字化时代&#xff0c;短视频已成为信息传播的重要载体。针对这一趋势&#xff0c;短视频矩阵系统的构建应运而生&#xff0c;集混剪、发布、数据分析及线索跟进于一体&#xff0c;旨在为内容创作者和品牌提供全方位的服务支持。 系统通过混剪功能&#xff0c;能够将长视频或…

接口测试 ★ ✔【接口测试理论、http协议、接口测试文档解析、Postman使用、接口测试用例设计、Request库、UnitTest框架、】

接口测试 接口测试-第01天&#xff08;接口测试理论、HTTP协议、接口测试流程、接口文档解析&#xff09;学习⽬标能够分析HTTP协议的请求和响应数据完成ihrm系统指定接⼝的API⽂档解析接⼝测试理论概念作用 ★实现⽅式 ★HTTP协议 ★HTTP协议简介URL格式 ★练习 HTTP请求 ★整…

A Comprehensive Study of Knowledge Editing for Large Language Models

大型语言模型&#xff08;LLMs&#xff09;在理解和生成与人类交流密切相关的文本方面表现出了非凡的能力。然而&#xff0c;一个主要的限制在于训练期间的大量计算需求&#xff0c;这是由于它们的广泛参数化而产生的。世界的动态性质进一步加剧了这一挑战&#xff0c;需要经常…

Java面试八股之Spring-boot-starter-parent的作用是什么

Spring-boot-starter-parent的作用是什么 spring-boot-starter-parent 是Spring Boot项目中的一个特殊POM&#xff08;Project Object Model&#xff09;&#xff0c;它主要的作用是提供一系列默认的配置和依赖管理&#xff0c;以便简化项目的构建过程。以下是spring-boot-sta…

【Python Web】Flask扩展开发指南

Flask是一个轻量级的Python Web框架&#xff0c;它提供了丰富的扩展库和工具&#xff0c;可以帮助开发者快速构建Web应用。本篇博客将介绍如何进行Flask扩展开发&#xff0c;包括扩展的创建、配置、使用等方面的内容。 目录 Flask扩展开发指南 一、Flask扩展简介 二、创建Fl…

java面向对象进阶进阶篇--《成员、静态、局部、匿名内部类》

个人主页→VON 收录专栏→java从入门到起飞 接口和接口与抽象类综合案例 目录 一、成员内部类 特性&#xff1a; 定义方式&#xff1a; 访问规则&#xff1a; 实例化&#xff1a; 生命周期&#xff1a; 静态成员&#xff1a; 使用场景&#xff1a; 示例&#xff1a; O…

快速入门了解Ajax

博客主页&#xff1a;音符犹如代码系列专栏&#xff1a;JavaWeb关注博主&#xff0c;后期持续更新系列文章如果有错误感谢请大家批评指出&#xff0c;及时修改感谢大家点赞&#x1f44d;收藏⭐评论✍ Ajax的初识 意义&#xff1a;AJAX&#xff08;Asynchronous JavaScript and…

C语言 | Leetcode C语言题解之第287题寻找重复数

题目&#xff1a; 题解&#xff1a; int findDuplicate(int* nums, int numsSize){int *b(int*)calloc(100001,sizeof(int));for(int i0;i<numsSize;i){ b[nums[i]];if(b[nums[i]]2) return nums[i];}return 0;}

【C语言】 二叉树创建(结构体,先序遍历,中序遍历,后续遍历)

二叉树的创建&#xff1a;首先先定义一个结构体&#xff0c;里面包含数据&#xff08;data&#xff09;&#xff0c;指向左子树的指针&#xff08;L&#xff09;&#xff0c;指向右子树的指针&#xff08;R&#xff09;三个部分 在创建树的函数中&#xff0c;首先先输入…

内网对抗-隧道技术篇防火墙组策略HTTP反向SSH转发出网穿透CrossC2解决方案

知识点&#xff1a; 1、C2/C2上线-CrossC2插件-多系统平台支持 2、隧道技术篇-应用层-SSH协议-判断&封装&建立&穿透 3、隧道技术篇-应用层-HTTP协议-判断&封装&建立&穿透隧道技术主要解决网络通讯问题&#xff1a;遇到防火墙就用隧道技术&#xff0c;…

Mysql第五次作业 触发器和存储过程

1、建库建表 建立触发器&#xff0c;订单表中增加订单数量后&#xff0c;商品表商品数量同步减少对应的商品订单出数量,并测试 建立触发器&#xff0c;实现功能:客户取消订单&#xff0c;恢复商品表对应商品的数量 建立触发器&#xff0c;实现功能:客户修改订单&#xff0c;商品…

Golang | Leetcode Golang题解之第284题窥视迭代器

题目&#xff1a; 题解&#xff1a; type PeekingIterator struct {iter *Iterator_hasNext bool_next int }func Constructor(iter *Iterator) *PeekingIterator {return &PeekingIterator{iter, iter.hasNext(), iter.next()} }func (it *PeekingIterator) hasNe…

鸿蒙应用框架开发【多HAP】程序框架

多HAP 介绍 本示例展示多HAP开发&#xff0c;简单介绍了多HAP的使用场景&#xff0c;应用包含了一个entry HAP和两个feature HAP&#xff0c;两个feature HAP分别提供了音频和视频播放组件&#xff0c;entry中使用了音频和视频播放组件。 三个模块需要安装三个hap包&#xff…

Milvus 向量数据库进阶系列丨部署形态选型

本系列文章介绍 在和社区小伙伴们交流的过程中&#xff0c;我们发现大家最关心的问题从来不是某个具体的功能如何使用&#xff0c;而是面对一个具体的实战场景时&#xff0c;如何选择合适的向量数据库解决方案或最优的功能组合。在 “Milvus 向量数据库进阶” 这个系列文章中&…

提交高通量测序处理数据到 GEO --- 操作流程

❝ 写在前面 由于最近在提交课题数据到 NCBI 数据库&#xff0c;整理了相关笔记。本着自己学习、分享他人的态度&#xff0c;分享学习笔记&#xff0c;希望能对大家有所帮助。推荐先按顺序阅读往期内容&#xff1a; 1. 提交高通量测序数据到 GEO --- 说明书 2. 提交高通量测序原…