① 用electron将Vue项目打包为window和Mac桌面应用 （electron-packager与electron-build）
1.打包准备
1.在自己需要打包的vue项目中build项目包出来，这里就不做解释了
2.新建一个 exe文件夹 （名称自己定义）
3.克隆项目 地址：git clone https://github.com/electron/electron-quick-start
2.配置环境
1.cd 进入 electron-quick-start 文件夹 npm install 添加依赖 （依赖包60M左右 ）
2.完成后 将步骤一种build出来的包放入 electron-quick-start 文件夹 如图
3.修改main.js入口文件，
修改前
修改后 这里 的路径是build出来文件名称
4.启动 npm run start
项目启动完成
3.打包
1.使用 electron-packager 方式打包，因为依赖还环境问题 现在只能打出window 版本 MAc版本需要使用另一种方式 。
添加依赖 npm install electron-packager --save-dev
2.修改package.json 中
"scripts": {
"start": "electron .",
"packager": "electron-packager ./ VEA_L --platform=win32 --arch=x64 --electron-version=2.0.0 --overwrite"
}
然后 npm run packager 打包
打包完成
VEA_L-win32-x64 中的exe就是执行文件
注 此方法只支持打包 window 和linux 版本 mac版本不支持 （没找到解决办法）
2.使用 electron-build 方式打包 支持window 和Mac （mac版本只有在mac os上才可打包完成 ）伏颤
添加 依赖 建议方法一
方法一 全局装 yarn 环境 （mac os 自行网络）
npm install -g yarn
安装 依赖 yarn add electron-builder --save-dev
方法二 npm 安装
npm install electron-builder
修改 package.json 中
"build": {"appId": "com.xxx.app", "right":"LEON", "proctName":"亦思辰","mac": {"target": ["dmg","zip"]},"win": {"target": ["nsis","zip"] }},
"scripts": { "start": "electron .", "packager": "electron-packager ./ VEA_L --platform=win32 --arch=x64 --electron-version=2.0.0 --overwrite", "distWin": "electron-builder --win --x64","distMac": "缺信败electron-builder --mac --x64","dist": "坦念npm run distWin && npm run distMac"},
执行命令 打出对应环境包 npm run dist
我因为是window 所以 window打包成功，macos报错，（用macOs 亲测可用 ） 打包完成dist中如下
注意 完成后 window 会出现 菜单栏 隐藏需要修改 main.js 如下 就可以解决
总结：以上的俩种方式都可以打包出exe方式不同，都可以配置Ioc图标，这里就不做演示了，有疑问欢迎提意见，共同进步。
② 如何将electron框架开发的软件包打包成单一exe文件
前言：研究electron自动更新的时候，在electron的官方文档auto-updater 中，提到了在几个平台mac，linux，windows下electron 的自动更新方法，其中windsow平台上面，文章中建议先用grunt-electron-installer 模块来创建windows安装包，grunt这个工具是由Squirrel集成的。进而了解下Squirrel这个工具，
一个可以用来给electron应用的安装更新卸载添加快捷方式的工具。本文主要提及如何在windows平台下，用Squirrel创建electron的.exe安装包。
创建nuget包
我们的方法是使用nuget工具创建Nuget包，再使用Squirrel工具创建.exe。
1.下载squirrel.exe和nuget.exe，也可以选择直接安装Squirrel.Windows （需要有vitual
studio环境）。
2.新建文件夹如my-build，把下载好的squirrel.exe，nuget.exe和setup.exe
放进去，在文件夹放入我们未打包的electron应用，如下图：
4.在my-build根目录中，打开命令行执行nuget spec
如下图：
生成 spec包初始文件
5.编辑器打开 Package.nuspec，按照自己项目的需要编辑这个文件，如下图：
这里需要注意：根据Squirrel文档说明，target folder 属性需要设置为lib/net45，否则并没有用；<iconUrl>标签用来制定未来的exe的icon。
5.用下面的命令创建一个nuget包，
nuget pack Package.nuspec
如下图：
之后在州友目录中会出现这个包
命名规则就是<my_app_name>.<version>.nupkg
创建安装程序
把应用程序打包成nuget包之后，就可以用squirrel创建一个安装程序了。在根目录打开命令行，执行以下命令：
squirrel --releasify <my_app_name>.<version>.nupkg
这个时候命令行中没有任何提示。但是别慌，编译一段时间后程序会创建一个release文件夹，里面有三个文件，nuget包，RELEASES 文件和安装文件Setup.exe。如下图：
如果没有出现这三个文件，可以查看目录中的SquirrelSetup.log，根据里面的报错，来进行调试。
注意上面这条squirrel 命令，可以用来设置setup.exe在安装过程中用传统icon还是用自定义的图片文件。使用Squirrel --help可以查看更多帮助
发布应用和安装应用
把上一步生成的setup.exe发送给想要安装这个应用的用户，就可以了。
最终应用会被安装在C:\Users\Administrator\AppData\Local\[appname] 文件夹中，注意Squirrel 的日志文件也存在目录中，调试安装问题的时候非常有用。
双击我们的setup.exe进行安装app的测试，如果中途有任何出错，在
C:\Users\Administrator\AppData\Local\SquirrelTemp 里面可以看到安装日志。如下图：
安装之后打开C:\Users\Administrator\AppData\Local 目录，可以看到app安装在这里，如下图：
自动创建快捷方式
进入我们安装之后的文件夹，命令行进入C:\Users\Administrator\AppData\Local\[your appname]，执行 Update.exe --help ，可以看到
不知道从上图你有没有得到什么提示，反正我发现了，在命令行手动创建快捷方式的命令是Update.exe --createshortcut electron\electron.exe -i [your ico toute]\app.ico
所以，如果我们想让应用在安装毕中过程中静默地创建好快捷方式，那就需要在app的安装之后相反设法执行这句代码手迹山。
因为我们的.exe会在安装之后自动打开程序，所以我在程序的入口main.js，添加sqruieel事件的监听就好了。如下图：
我顺便把程序卸载时，删除快捷方式的监听事件也写了进去。还有程序的更新和删除事件监听，但是这两个事件，我还没有进行测试。
更新应用
其实我一直很想做增量更新，在这里我的更新方法有两个，第一是在程序的入口添加js，发送请求到服务器，拉取更改文件进行本地替换，但是如果是node_mole依赖包的更改，这个方法并不可行。第二个方法比较安全而且快捷通过发布一个版本号不同的exe，如下：1.在这个创建安装程序的步骤2中，我们把程序代码都复制到了这个文件夹里面，如下图：
如果后续我们的程序要进行更新，首先我们需要把更改的文件直接复制替换到这个文件夹。
2.打开Package.nuspec，编辑version标签
3.参考本文种中创建安装程序部分的步骤2-4，重新生成setup.exe，发布应用。
通过执行setip.exe安装，程序会自动删除之前的应用，但是我并不清楚，sqruieel 是进行了增量替换，还是将之前的整个应用进行删除，再重新安装。
创建自定义安装包
在上一步，我们已经把自己的exe发布出来了，但是如果没有自定义名字跟icon，好像还不够酷，所以我们需要创建自定义的安装文件。
1.下载安装 Resource
Hacker
2.打开这个项目目录，在electron.exe上面右键
出现菜单，点击 Open using Rescource Hacker。
3.Resource Hacker应用运行之后中，在以下界面中选择Icon，然后在工具栏里面选择Action，Replace
Icon，如下图：
然后选择自己想要替换的.ico文件就好
4.这其实并不够，我们还需要更换exe里面的版本信息，打开Version
Info，把FileDescription和ProctName改成我们自己的项目名称，最好把SquirrelAwareVersion也更改一下，毕竟是版本号。
5.做完这些之后，我们需要按照之前的步骤，在命令行中输入
nuget pack Package.nuspec
重新生成nuget包，然后再使用
squirrel --releasify <my_app_name>.<version>.nupkg 命令创建安装文件。
6.打开之后生成的releases文件夹，参考本文种中创建安装程序部分的步骤2-4，对setup.exe进行自定义。
最后，一个可以自动更新又安装便捷，还有我们自己的酷酷的图标跟名字的应用就生成拉！
③ 【最简单】Electron 怎么将网页打包成EXE
前期准备：
1、你已经安装并配置好了 node.js （全局安装）
2、你已经用 npm 安装了 electron （全局安装）
3、你已经写好了前端网世族页（html、css、javascript 这些，或者基于这些的前端旁铅框架写好的网页）
4、以上三点看不懂的，赶紧去网络。。。
你如果具备了以上的假设，请继续往下看：
1、找到你的前端网页项目文件夹，新建 package.json、main.js、index.html 三个文件（注：其中的 index.html 是你的网页首页）
你的项目目录/
├── package.json
├── main.js
└── index.html
2、在 package.json 中添加如下内容
{
"name" : "app-name",
"version" : "0.1.0",
"main" : "main.js"
}
3、在 main.js 中添加下面的内容，这个 main.js 文件就是上面 package.json 中的 "main"键 的值，所以可根据需要修改
const {app, BrowserWindow} = require('electron')
const path = require('path')
const url = require('url')
// Keep a global reference of the window object, if you don't, the window will
// be closed automatically when the JavaScript object is garbage collected.
let win
function createWindow () {
// Create the browser window.
win = new BrowserWindow({width: 800, height: 600})
// and load the index.html of the app.
win.loadURL(url.format({
pathname: path.join(__dirname, 'index.html'),
protocol: 'file:',
slashes: true
}))
// Open the DevTools.
// win.webContents.openDevTools()
// Emitted when the window is closed.
win.on('closed', () =>运返好 {
// Dereference the window object, usually you would store windows
// in an array if your app supports multi windows, this is the time
// when you should delete the corresponding element.
win = null
})
}
// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.on('ready', createWindow)
// Quit when all windows are closed.
app.on('window-all-closed', () => {
// On macOS it is common for applications and their menu bar
// to stay active until the user quits explicitly with Cmd + Q
if (process.platform !== 'darwin') {
app.quit()
}
})
app.on('activate', () => {
// On macOS it's common to re-create a window in the app when the
// dock icon is clicked and there are no other windows open.
if (win === null) {
createWindow()
}
})
// In this file you can include the rest of your app's specific main process
// code. You can also put them in separate files and require them here.
4、如果你的网页首页的文件名不是 “index.html”，那么请在 main.js 中将其中的 'index.html' 修改为你的网页首页名
5、打开 DOS，cd 到你的项目目录（或直接在你的项目目录下空白的地方 shift+鼠标右键，然后点击在此处打开命令窗口，这里看不懂的，唉，网络吧少年）
6、在上一步的 DOS 下，输入 npm install electron-packager -g全局安装我们的打包神器
npm install electron-packager -g
7、安装好打包神器后，还是在上一步的 DOS 下，输入 electron-packager . app --win --out presenterTool --arch=x64 --version 1.4.14 --overwrite --ignore=node_moles 即可开始打包
electron-packager . app --win --out presenterTool --arch=x64 --version 1.4.14 --overwrite --ignore=node_moles
这个命令什么意思？蓝色部分可自行修改：
electron-packager . 可执行文件的文件名 --win --out 打包成的文件夹名 --arch=x64位还是32位 --version版本号 --overwrite --ignore=node_moles
如果：
执行打包命令的时候，报以下提示
–version does not take an argument. Perhaps you meant --app-version or --electron-version?
后在贴吧找到解决方法，将–version 改成了–electron-version
electron-packager . app --win --out demoapp --arch=x64 --electron-version 1.4.14 --overwrite --ignore=node_moles
8、打包成功后，会生成一个新的文件夹，点进去，找到 exe 文件，双击就可以看到网页变成了一个桌面应用啦！
以上是最简单的打包方式，至于怎么修改窗口大小、菜单栏怎么加、怎么调用系统API这些，就给你慢慢去研究Electron了。
里面有我已将内容为 hello,world 的 index.html 网页通过 Electron 框架打包为 windows 环境下的桌面应用。
现只需将你的网页前端项目复制到 /resources/app/project 目录下，双击 exe 文件即可以桌面应用的方式运行你的网页。
④ Electron 打包canvas总结
最近有项目需要用到画布，且是跨平台销闷的应用，选用了 https://github.com/Automattic/node-canvas
打包过程遇到了各种麻烦，开发电脑没有问题，未装开发环境的电脑普遍白屏，详查才知道是动态链接库的问题。
出现问题得解决啊，于是乎有以下几种思路。
无奈条路亏启弯没有走通。
用第二种虽然花费大量精力，但至少出来结果了。
修改编译后的canvas.node的依赖路径：
以上参数根据实际情况修改旁咐。
还有，子模块的依赖也是需要修改的。如：
⑤ Electron常见问题（二）Electron图标打包
在windows中，我们推荐使用nsis安装程序，可以凯饥轻松的完成打包，这里主要将package.json中应用一些相关图标的打包。
有时候我们需要点击一种特定的文件来打开我们的应用。这种特定的文件会有拆孙吵关联的图标。
托盘图标很容易设置，但是有的时候我们设置好了，打包之旅侍后图标会丢失。这是因为我们打包之后没有把图标也打包过去。所以我们需要在打包的时候将托盘的图片复制过去。
⑥ electron在win上可运行后，如何打包到linux上运行
1、如果只是需要运行起来，不需要打包，那么可以在linux建文件夹，npm安装对应包，然后将win下的代码拷贝到对应位置即可运行。
2、如果需要打包，则比较复杂。大致为：
a) 建app文件夹，将代码(含index.js文件）拷贝到其中。
b) npm安装asar，用asar的pack命令，将app文件夹打包成一个文件app.asar
asar pack app app.asar
c) 在网页链接 下载对应版本的linux预编译二进制包，解压，用上面生成的app.asar替换resources文件夹下同名文件。
d) 修改chrome-sanbox文件权限及属主:
sudochownroot:rootchrome-sandbox
sudochmod4755chrome-sandbox
e) ./electron即可运行
⑦ 如何将electron框架开发的软件包打包成单一exe文件
一步一步的跟着做：单击File，选择NEW，然后点击旁边的树形的Archive选项卡，然后再Archive选项卡中选择AppletJAR，取个名字，然后直接点击Finish，这个时候运行一下程序，让其编译一下，会在源码中得到一个.JAR文件，有了这个文件以后，就可以停止程序，接着在单击File，选择NEW，还是点击Archive选项卡，这次选择ExecutableJAR，然后取名字，再点击JARFile输入框后面的按钮，找到刚才生成的.JAR文件，添加进去，一路NEXT，最后Finish以后，再次运行程序，这个时候就会在源码文件夹中多出啦两个.exe文件，一个是通过控制台运行的，一个是直接运行的，同样，exe文件要想运行，还是需要JDK，不过这里建议不要使用sun公司下载的JDK，直接使用Jbuilder里面的JDK～
⑧ Electron打包优化
运行如下命令
添加文件 index.html
添加 index.js
OK, 程序写完， 执行 electron .
在 package.json 中的 scripts 添加打包命令
运行 npm run package
先介绍下开源项目 electron-boilerplate
https://github.com/szwacz/electron-boilerplate
运行如数清下命令返斗
3.修改 package.json 的打包命令去除测试命令
electron-boilerplate是一个最小依赖的Electron框架， 有比较完善的工具链，从依赖到漏毕磨压缩，比原生最后生成的安装包大小还是有一些优势的。
⑨ Electron打包成exe文件怎么搞呢
第一步，配置稿厅 package.json 第二步，编译高和 build --win --ia32 builder 支持编译成多种戚敬盯格式等等功能
⑩ Electron打包生成exe文件
Electron 是咐搏由 Github开发的开源框架，它允许开发者使用Web技术构建跨平衡凳祥台的桌面应用。
然后在命令行中输入：npm run package。
通过以上两种方式进行打包，出现以下信息，表示打包完成，并且在根目录下多出out文件夹。
electron打包命令参数粗祥： https://electron.github.io/electron-packager/master/interfaces/electronpackager.options.html#electronversion