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

这里用的是windows的wsl的ubuntu环境
electron应用打包linux应用需要linux下打包,这里用windows的wsl的ubuntu环境进行操作

1)linux ubuntu安装nodejs、electron

安装nodejs:

bash 复制代码
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:

bash 复制代码
##安装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参数,不然会报错

bash 复制代码
{
  "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 目录下执行

bash 复制代码
./todolist-app --no-sandbox

如果不加--no-sandbox会报错

TodoList 运行效果

相关推荐
北岛寒沫5 分钟前
JavaScript(JS)学习笔记 1(简单介绍 注释和输入输出语句 变量 数据类型 运算符 流程控制 数组)
javascript·笔记·学习
everyStudy8 分钟前
JavaScript如何判断输入的是空格
开发语言·javascript·ecmascript
CoolTiger、1 小时前
【Vmware16安装教程】
linux·虚拟机·vmware16
无心使然云中漫步1 小时前
GIS OGC之WMTS地图服务,通过Capabilities XML描述文档,获取matrixIds,origin,计算resolutions
前端·javascript
Bug缔造者2 小时前
Element-ui el-table 全局表格排序
前端·javascript·vue.js
学习3人组2 小时前
CentOS 中配置 OpenJDK以及多版本管理
linux·运维·centos
xnian_2 小时前
解决ruoyi-vue-pro-master框架引入报错,启动报错问题
前端·javascript·vue.js
厨 神2 小时前
vmware中的ubuntu系统扩容分区
linux·运维·ubuntu
Karoku0663 小时前
【网站架构部署与优化】web服务与http协议
linux·运维·服务器·数据库·http·架构
geek_Chen013 小时前
虚拟机共享文件夹开启后mnt/hgfs/下无sharefiles? --已解决
linux·运维·服务器