我的electron教程系列 electron教程(一): electron的安装和项目的创建 electron教程(二): http服务器, ws服务器, 子进程管理 electron教程(三): 使用ffi-napi引入C++的dll electron教程(四): 使用electron-builder或electron-packager将项目打包为可执行桌面程序(.exe)   引言 本篇将介绍如何将你开发的electron项目(main.js), 打包成一个可执行桌面程序(.exe). 有

[Electron]在 WSL2 中 打包 electron Linux 版本. 安装 WSL 我使用的是 Ubuntu 20.04.4 LTS 的版本. 安装 WSL 文档地址:https://docs.microsoft.com/zh-cn/windows/wsl/install. 如果你的系统是 Windows 11,内部版本是 22000 或更高,你也可以试试 还 GUI 的 WSL. https://docs.microsoft.com/zh-cn/windows/wsl/tutori

最近利用Electron来创建跨桌面应用的趋势似乎很火.看了几个用Electron开发的应用,这些应用在windows下面的安装方式,都是类似一个绿色软件的安装方法,下载.zip->解压到相应目录->进入文件夹点击exe使用.这种安装方法有两个缺点,第一,更新繁琐,用户需要删除之前的软件目录,下载新的软件,在跑一遍解压流程,不然电脑里面就会出现两个软件,不好区分.第二,安装之后无法自动创建快捷方式,需要手动进入目录右键创建.第三,没有自定的图标跟名称,没有那么酷了有木有! 之前我的文章Elec

在进行desktop打包过程中,遇到如下报错: 0 info it worked if it ends with ok 1 verbose cli [ 'C:\\Program Files\\nodejs\\node.exe', 1 verbose cli 'C:\\Users\\Administrator\\AppData\\Roaming\\npm\\node_modules\\npm\\bin\\npm-cli.js', 1 verbose cli 'start' ] 2 info usi

先确保该项目正常运行npm run dev,结束程序, 上篇的项目运行已经提到了打包输出工具electron-packager 可以使用全局安装的方式: npm install -g electron-packager 也可以使用当前项目局部安装的方式:npm install save-dev electron-packager 安装好后,执行 --app-version=0.0.1 --electron-version=6.0.3来打包项目, 或者将该命令配置到package.json文件的s

在之前的博客:3.electron打包生成exe文件 我们已经得到了electron打包好的应用了,目录如下,但是我们如何整合成一个安装程序,发给客户使用呢? 我们可以使用grunt-electron-installer来生成 一. 准备 安装grunt-electron-installer. 1. 我们进入到HelloWorld-win32-x64的父级目录下. 2. 新建一个package.json,内容如下: { "name": "HelloWorld", &

在我的上一篇博客已经介绍了将electron程序生成一个exe可执行文件,但是这并不是最终能够发给用户用来安装的最终安装包,下面我们就介绍如何使用NISI将我们的应用程序打包成安装包: 上一篇博客我们在项目里面得到了一个out文件夹: 我们把out文件夹复制到桌面(不复制也可以,我是为了方便演示): 打开NISI: 1)选择可视化脚本编辑器 2)选择新建脚本:向导 4)设置应用名称,版本号,网址,标志随便自定义一个就好,然后下一步 5)设置安装程序图标(图标必须是ico格式),名称,语言(Sim

需求 稍微正规点的公司,都要为自己开发的软件做代码签名,如下图所示 代码签名的主要目的是为了确保软件的来源(这个软件是由谁生产的)和软件的内容不被篡改 一个软件公司可能有很多团队,很多开发者,开发不同的软件,但用于签名的证书就那么一套 由于担心开发者用这个证书去签名恶意的软件,损坏公司的声誉, 所以这套证书一般不会直接给开发者使用的 那么怎么办呢? 公司往往会开发一个服务, 软件开发好后,开发者把软件上传到这个服务上,由这个服务给软件签名,签完名后,开发者再下载签名后的文件,再分发给用户 难点

项目创建完成,启动正常,接下来就是项目打包了.将测试Demo打包成exe桌面应用,点击exe文件,运行项目. 书接上文,创建项目有三种方式 Git拷贝.直接创建:通过electron社群提供的命令行工具(CLI)  electron-forge 创建项目,看起来对应的项目打包方式也应该有三种才对,但其实细看第一种方式和第三种项目创建方式是一样的,所以它们的项目打包方式也是一样的. 打包 electron 项目webpack工具有 electron-packager 和 electron-buil

一. 准备工作 1.npm的安装需要下载node.js,安装完node.js之后npm自然会有. 参考链接:http://www.runoob.com/nodejs/nodejs-install-setup.html 2.Electron环境搭建       a.安装node.js.node官网地址:https://nodejs.org/en/ b.在windows 命令行下检查node是否安装成功.分别输入 node -v,  npm -v .如果出现 node 和 npm 的版本号,则转下一

vscode默认是英文,如果你想让其变为中文,可参考这个链接:https://blog.csdn.net/testcs_dn/article/details/75070415 最近发现一个很奇怪的问题,vscode打包前和打包后存在很大的不同的,正常来说,比如我们开发项目,实际上来说,本地怎么样,线上就怎么样,当然了,也不排除一些线上导致的bug. 比如vscode源码已经启用了中文语言包插件,同时也修改了locale.json文件(将文件中的en改为zh-CN),但是还是是英文,后来我转念一想

Electron 使用 Webpack2 打包多入口应用程序 接前面一篇文章,前一篇文章中只有一个页面,并且只有一个js文件,所以打包的时候会把那个js打包成一个bundle.js文件.但是假如我们有多个页面,且每个页面需要使用的js文件也不同,那么我们应该怎样打包呢. 安装依赖库 这里准备做个小的演示程序,首先安装一些这个演示程序需要看的第三方库 $ npm install --save-dev electron $ npm install --save-dev electron-packag

Electron 使用 Webpack2 打包应用程序 前两天看了一下使用 Electron 来开发应用程序,今天说说所怎样集成 Electron 和 Webpack2 来打包应用程序. 安装依赖库 这里准备做个小的演示程序,首先安装一些这个演示程序需要看的第三方库 $ npm install --save-dev electron $ npm install --save-dev electron-packager $ npm install --save-dev webpack $ npm

前次用 electron-packager 打包成功,这次改用 electron-builder 打包,然后根据项目中实际需要进行选择使用. 第一步:全局安装 electron-builder,便于系统通用 npm install -g electron-builder 或 cnpm install -g electron-builder 第二步:打包 electron 项目

项目创建完成,启动正常,接下来就是项目打包了.将测试Demo打包成exe桌面应用,点击exe文件,运行项目. 书接上文,创建项目有三种方式 Git拷贝.直接创建:通过electron社群提供的命令行工具(CLI)  electron-forge 创建项目,看起来对应的项目打包方式也应该有三种才对,但其实细看第一种方式和第三种项目创建方式是一样的,所以它们的项目打包方式也是一样的. 打包 electron 项目webpack工具有 electron-packager 和 electron-buil

目录 Webpack + Vue 搭建开发环境及打包安装 ------- 打包渲染进程 Electron + Webpack  搭建开发环境及打包安装 ------- 打包主进程 Electron + Webpack + Vue 搭建开发环境及打包安装 ---- 打包electron应用 二.打包主线程 1. 项目目录结构 首先创建一个项目文件夹main 然后在该文件夹中执行 npm init -y 命令 目录结构说明: main    | - app 文件输出目录    | - builder

目录 Webpack + Vue 搭建开发环境及打包安装 ------- 打包渲染进程 Electron + Webpack  搭建开发环境及打包安装 ------- 打包主进程 Electron + Webpack + Vue 搭建开发环境及打包安装 ---- 打包electron应用 一.渲染进程打包 1. 搭建项目目录结构 首先项目文件夹下执行 npm init -y 命令生成 package.json 文件 然后创建相应的文件夹  2. 目录结构文件夹说明 | - app 项目打包输出目

electron 基础 前文我们快速的用了一下 electron.本篇将进一步介绍其基础知识点,例如:生命周期.主进程和渲染进程通信.contextBridge.预加载(禁用node集成).优雅的显示窗口.父子窗口.存储并恢复 electron 窗口..右键上下文信息.右键菜单.菜单与主进程通信.选中文本执行 js 代码.托盘.nativeImage.截屏等等. Tip:为图方便,继续之前的环境进行操作. 第一个程序 下面这段代码会打开一个原生窗口,窗口里面会加载 spug 的一个系统: //

Electron能干嘛 Vscode 基于Electron开发的,他是用来开发桌面软件的,可以轻易的跨平台 他的前身是atomshell,图标很丑,不用在意,一点也不像vscode也不用在意.   Let's go Electron 是基于Node Chromium V8 组合而来,目前的版本是1.3.3   https://github.com/electron/electron/releases/download/v1.3.3/electron-v1.3.3-win32-x64.zip  

一介绍 electron分为主进程和渲染进程,主进程负责和原生交互,控制窗口等. 渲染进程就是普通网页.主进程和渲染进程可以通过ipcMain(主进程使用)及ipcRenderer(渲染进程用)通信 quick-start中main.js为主进程入口文件 index.html为渲染进程入口文件 另外很重要的一点使用electron没有跨域限制!!! 二 打包 1.快速运行quick-start(开发时启动) git clone https://github.com/electron/electr

我们把自己开发的Electron应用发布之前,需要把app打包成简单的安装包,这样app更容易被获取,以此来发布我们的应用.我们可以参考Wix或其他的安装程序,但是对于Electron应用更好的打包程序是Squirrel.毕竟某些著名的Visual Studio Code 和Slack 的客户端应用就是用这个框架来打包和更新的.现在我来告诉你怎么创建一个基于Electron的windows应用. Electron 和 squirrel 的更新非常快,我们可以到 http://electron.a