使用Electron 打包程序成EXE

来源:csdn博客 分类: 文章浏览史 发布时间:2020-06-06 22:25:22 最后更新:2020-06-06 浏览:91
转载声明:
本文为摘录自“csdn博客”,版权归原作者所有。
温馨提示:
为了更好的体验,请点击原文链接进行浏览
摘录时间:
2020-06-06 22:25:22

以下内容皆为网上资料转载整理: 原文地址 https://blog.csdn.net/Quincylk/article/details/78252475

一.使用nodejs 的npm 项目打包命令:
   npm run build  打包项目

二、安装 electron-packager

PS:安装之前,先复制一份package.json文件到./app目录下,然后改下./app目录下package.json里 “main”: “app/main.js”的路径(去掉app/),不这样子的话,下面打包的时候会报错,有的版本识别不了应用路径。

1、使用命令 npm install --save-dev electron-packager 
将electron-package包安装到在项目下面, 
这里写图片描述 
安装完成之后,项目根目录下面的package.json文件里,会多出一条electron-package的版本号配置信息 
这里写图片描述

二、正式打包 
有两种方法: 
1、直接使用命令打包,electron-packager的打包基本命令是:

electron-packager <location of project> <name of project> <platform> <architecture> <electron version> <optional options>
  • 1

命令说明: 
* location of project:项目所在路径 
* name of project:打包的项目名字 
* platform:确定了你要构建哪个平台的应用(Windows、Mac 还是 Linux) 
* architecture:决定了使用 x86 还是 x64 还是两个架构都用 
* electron version:electron 的版本 
* optional options:可选选项

命令比较长,每次要是都用这个命令来打包会很烦,可以使用第二种方法;

2、首先在项目根目录下面的 package.json 里添加代码, 
"packager": "electron-packager ./app HelloWorld --all --out ./OutApp --version 1.4.0 --overwrite --icon=./app/img/icon/icon.ico"

注:"packager": "electron-packager . HelloWorld --win --out ./OutApp --version 1.7.9 --overwrite --icon=./app/icon/icon.ico --platform win32"

./app编译出来的exe文件执行时会报找不到app的错误。

PS:这里要注意,字段里的 项目名字,version,icon路径要改成自己的; 
具体添加位置如图, 

然后,在使用命令 npm run-script packager 

最后,打包完成之后如图 
 
运行对应包下的.exe文件,就可以看到我们的应用了。

注意: 如果发现ico图片无法显示可以试试 改变 ico文件的像素大小

三,转载 两种打包exe的方法:

  第一种实现方式:https://blog.csdn.net/Quincylk/article/details/78252475

  第二种实现方式:https://blog.csdn.net/qq_26769677/article/details/81369653

Electron 相关文档

https://electronjs.org/docs/tutorial/first-app#%E5%BC%80%E5%8F%91%E4%B8%80%E4%B8%AA%E7%AE%80%E6%98%93%E7%9A%84-electron

https://electronjs.org/docs/api/browser-window

php技术微信