首页 > 系统相关 >electron TodoList网页应用打包成linux deb、AppImage应用

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

时间:2024-07-25 09:29:20浏览次数:12  
标签:TodoList sudo AppImage electron windows linux com 打包

这里用的是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": "[email protected]"
  },
  "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 <[email protected]>"
    } 
    
  },
  "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 下是免安装包
在这里插入图片描述

标签:TodoList,sudo,AppImage,electron,windows,linux,com,打包
From: https://blog.csdn.net/weixin_42357472/article/details/140678490

相关文章

  • Electron 和 React 开发桌面应用程序
    目录书籍推荐ElectronReact在线资源和教程官方文档在线教程综合学习路径经典开发案例VisualStudioCodeHyperTuskNotableBeekeeperStudio开源项目和示例代码ElectronReactBoilerplateElectronForge+ReactElectronReactTemplate学习和实践使用El......
  • Electron 结合 Selenium + chromedriver 驱动服务实现浏览器多开
    背景在调研浏览器多开的过程中,electron 有自带的 browserview,webview,但是上面两个受制于 electron 内核版本限制,升级不够灵活,对新版的网页支持可能不及时,甚至不兼容,必须通过发布新的客户端版本才能解决,此外,这两个组件本身也不稳定,经常内存溢出,如果能改为 chrome 自己开......
  • Electron 应用关闭突出程序坞
    在Electron应用中,处理窗口关闭并使其最小化到Mac系统的程序坞(Dock)而不是完全退出应用,通常涉及到监听窗口的关闭事件(close事件)并在适当时机阻止其默认行为。以下是一些步骤和关键点,帮助实现这一功能:1.监听窗口关闭事件在Electron的主进程(mainprocess)中,你需要为窗口(Browse......
  • 自研electron31+vue3+elementPlus桌面聊天Exe应用-源码版
    Vue3-ElectronWechat:基于最新前端跨平台技术electron31.x整合高性能构建工具vite.js5搭建的一款高颜值桌面端仿微信界面聊天程序。整个项目采用vue3setup语法糖编码开发,全新封装electron多窗口管理模式。基于vite5+electron31+vue3仿微信客户端聊天【源码版】功能特......
  • Vite + Vue 3 + Electron 中 Express 的集成指南
    在Vite+Vue3+Electron中使用Express在现代前端开发中,Vite和Vue3提供了快速的开发体验,而Electron则使得我们能够构建跨平台的桌面应用程序。有时,我们需要在Electron应用中集成一个后端服务器来处理复杂的逻辑或与数据库交互。Express是一个轻量级且灵活的Node.j......
  • 手写TodoList
    手写TodoList<scriptsetup>import{ref}from'vue'//给每个todo对象一个唯一的idletid=0constnewTodo=ref('')consttodos=ref([{id:id++,text:'LearnHTML'},{id:id++,text:'LearnJavaScript'},......
  • 如何理解electron 的预加载脚本
    在Electron应用中,预加载脚本(PreloadScript)是一个非常重要的概念,它允许你在渲染进程(web页面)和主进程之间创建一个安全的桥梁。预加载脚本运行在Node.js环境中,但位于渲染进程的一个单独的上下文中,这意味着它可以访问Node.js的API,但无法直接访问DOM。这种设计使得预......
  • electron loadURL加载http协议(或内网)环境下使用navigator.mediaDevices.getUserMedi
    场景我使用的electron27版本。众所周知,navigator.mediaDevices.getUserMediaAPI只能在https环境下使用,在非https环境下使用时navigator.mediaDevices会返回undefined。除了例外的这几种情况。例外的几种情况在MDN安全上下文文章中进行了说明说明了。大致意思是在https,fi......
  • electron相关问题
    安装npminstallelectron--save-dev查看已安装版本npmlistelectron更新最新版本npminstallelectron@latest检查和修复漏洞检查项目中的漏洞并尝试自动修复 npmauditfix查看详细的漏洞报告npmaudit强制修复漏洞(可能会导致不兼容的更改)npmaudit......
  • Electron-ViteChat桌面端聊天室|electron31+vite5+pinia2仿微信EXE程序
    原创研发Electron31+vue3+elementPlus仿微信客户端聊天应用。使用最新跨平台技术electron31.x+vite5+vue3setup+pinia2+element-plus实战开发电脑版聊天室Exe程序。整个聊天程序界面清爽简约,支持展示/收缩侧边栏、electron新开多窗口、换肤等功能。electron-vitechat......