① 用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