Electron应用程序打包（Windows环境下）

谁践踏了优雅 2021-09-20 07:30 414阅读 0赞

Electron 官网地址：[https://electronjs.org/][https_electronjs.org]

## 一、搭建环境 ##

> 如果你可以建一个网站，你就可以建一个桌面应用程序。 Electron 是一个使用 JavaScript, HTML 和 CSS 等 Web  
> 技术创建原生程序的框架，它负责比较难搞的部分，你只需把精力放在你的应用的核心上即可。

刚开始学习，我们先clone了一个starter来快速学习一下，熟悉之后再来把我们自己的项目生成桌面程序。

**首先，安装nodejs、cnpm，在安装nodejs是会附带安装npm。**

nodejs、cnpm的安装参考我这篇文章 ，地址 [https://blog.csdn.net/u012577474/article/details/92849764][https_blog.csdn.net_u012577474_article_details_92849764]  
\***Electron的安装**  
\#采用npm的方法安装Electron

cnpm install -g electron

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI1Nzc0NzQ_size_16_color_FFFFFF_t_70]

查看electron是否安装成功可通过命令 electron -v 查看。  
**安装electron-packager打包工具**

cnpm install -g electron-packager

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI1Nzc0NzQ_size_16_color_FFFFFF_t_70 1]

## 二、学习Electron 的Hello world 程序 ##

git clone https://github.com/electron/electron-quick-start		#下载hello world程序
    cd electron-quick-start
    cnpm install //这里我用的是cnpm,npm太慢了 
    npm start

npm start 之后就会出现electron的桌面端页面了。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI1Nzc0NzQ_size_16_color_FFFFFF_t_70 2]  
**electron-quick-start目录结构**

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI1Nzc0NzQ_size_16_color_FFFFFF_t_70 3]

**main.js** 是应用程序入口文件  
**index.html** 是目标web

## 三、把Hello world 网页程序打包成exe可执行桌面程序（打包） ##

在electron-quick-start目录下准备应用程序的图标 icon.ico（作为生成的exe程序图标），  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI1Nzc0NzQ_size_16_color_FFFFFF_t_70 4]  
**1、使用命令打包方法：**

electron-packager . 'HelloWorld' --platform=win32 --arch=x64 --icon=icon.ico --out=./out --asar --app-version=0.0.1

![在这里插入图片描述][2019062012524340.png]  
打包完成后，目录下会多出out文件夹，exe程序就在out’HelloWorld’-win32-x64文件夹下。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI1Nzc0NzQ_size_16_color_FFFFFF_t_70 5]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI1Nzc0NzQ_size_16_color_FFFFFF_t_70 6]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI1Nzc0NzQ_size_16_color_FFFFFF_t_70 7]  
点击’HelloWorld’.exe运行exe桌面程序如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI1Nzc0NzQ_size_16_color_FFFFFF_t_70 8]  
**2、使用package.json打包方法：**  
首先编辑package.json，增加一行

"package":"electron-packager ./app 'HelloWorld' --platform=win32 --arch=x64 --icon=icon.ico --out=./out --asar --app-version=0.0.1"

别忘了前面补逗号。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI1Nzc0NzQ_size_16_color_FFFFFF_t_70 9]  
在app(electron-quick-start)根目录创建app文件夹，并把main.js， index.html 和 package.json拷贝进去（拷贝并非剪切），然后在electron-quick-start根目录执行命令：

npm run-script package

![在这里插入图片描述][20190620131420436.png]

打包完成。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI1Nzc0NzQ_size_16_color_FFFFFF_t_70 10]

[https_electronjs.org]: https://electronjs.org/
[https_blog.csdn.net_u012577474_article_details_92849764]: https://blog.csdn.net/u012577474/article/details/92849764
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI1Nzc0NzQ_size_16_color_FFFFFF_t_70]: /images/20210726/d71370d9c126442aae93e1d80ac19896.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI1Nzc0NzQ_size_16_color_FFFFFF_t_70 1]: /images/20210726/8eb1d3aab68a4bff81f33ef302921f23.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI1Nzc0NzQ_size_16_color_FFFFFF_t_70 2]: /images/20210726/8aef913daa9b4b608e31bed2214fce11.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI1Nzc0NzQ_size_16_color_FFFFFF_t_70 3]: /images/20210726/581f385060c840eebd4c06464cbd12aa.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI1Nzc0NzQ_size_16_color_FFFFFF_t_70 4]: /images/20210726/4fc87115d7704ea9a834f7ce48263830.png
[2019062012524340.png]: /images/20210726/6dca373c7f154d2d86bd6e273c54ab31.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI1Nzc0NzQ_size_16_color_FFFFFF_t_70 5]: /images/20210726/9a6ca48922914aedaa547c9f537bad50.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI1Nzc0NzQ_size_16_color_FFFFFF_t_70 6]: /images/20210726/e9bf85fa1b484aad97a0afe8629232d0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI1Nzc0NzQ_size_16_color_FFFFFF_t_70 7]: /images/20210726/8f3ac1d88a6c49e3871f4371eb5a8eab.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI1Nzc0NzQ_size_16_color_FFFFFF_t_70 8]: /images/20210726/dca17b9923614ed08a1ddfcdfa8b1b25.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI1Nzc0NzQ_size_16_color_FFFFFF_t_70 9]: /images/20210726/9fd937dd43804e83bc0f180d2d2cead2.png
[20190620131420436.png]: /images/20210726/e6e12f14e2f8465eb6eacf662251a1d9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI1Nzc0NzQ_size_16_color_FFFFFF_t_70 10]: /images/20210726/0710c89b12dc4b31a6fe23aea2e8ffe3.png