owned this note changed a year ago
Linked with GitHub

利用 electron.js 建立桌面 APP ( Windows )


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

tags : w3HexSchool . electron

當 PM 需要在無網路的環境中執行 vue 專案時
要如何交付 vue 專案 , 讓他可以去給客戶 demo 呢 ?
要求 PM 學會 vue cli ? 這顯然是個不太靠譜的作法 !
這時候 , 也許你會想要有個 windows 執行檔 , 讓 PM 方便執行你的成品
讓我們請出今天的主角 electron , 並發布 .exe 吧 !

官方 : https://www.electronjs.org/

安裝

利用 electron-quick-start 建立 electron 基礎專案

# 複製 Quick Start 儲存庫 $ git clone https://github.com/electron/electron-quick-start # 進到儲存庫裡 $ cd electron-quick-start # 安裝相依的套件並執行 $ npm install && npm start

安裝結果

打包

使用 electron-packager 打包專案

官方 : https://github.com/electron/electron-packager

# 下載 electron-packager npm install electron-packager --save-dev

接下來需要在"scripts"增加執行electron-packager的指令,指令如下,

"package":"electron-packager . FishBucket platform=win32 arch=x64 version=1.7.10

icon=icons/Mushroom.ico asar=true out=build ignore=node_modules/electron-* "

指令內容說明如下:

electron-packager . FishBucket: 將目前全部資料打包成FishBucket這個名字

platform = darwin(Mac),win32(Windows),linux(LINUX)

arch = ia32,x64,all

version = Electron版本

icon = icon路徑

asar = true or false,設定trun是把程式文件封裝,比較不容易被看到原始碼

out = 輸出文件名稱(dist)

ignore = 忽略檔案不要打包,建議把electron都忽略掉,因為打包後裡面就有了,可以減少檔案大小

執行 npm run package 後 , 我們可以看到多了 build/FishBucket 資料夾

之後 , 我們可以將 FishBucket 資料夾 , 丟給 PM 請他執行 FishBucket/FishBucket.exe

自定義菜單(menu)

menu 官方文件 : https://www.electronjs.org/docs/api/menu

設定 menutemplate

const isMac = process.platform === 'darwin'; const template = [ { label: '檔案', submenu: [ { label: '關閉', role: isMac ? 'close' : 'quit' } ] }, ];

在 app ready 中 , 加上 Menu.setApplicationMenu

app.on('ready', function () { + const menu = Menu.buildFromTemplate(template); + Menu.setApplicationMenu(menu); createWindow(); });

ipcMain . ipcRender

範例請參考 : https://newsn.net/say/electron-ipc.html
我們需要利用 ipcMain 當 listener . ipcRender 當 trigger
執行 start chrome http://localhost:3000 開啟 chrome 瀏覽器

加入 vue 專案

  • serve
    開啟 electron APP 時 , 同時啟動 http-server
// in ./server.js const handler = require('serve-handler'); const http = require('http'); const server = http.createServer((request, response) => { // You pass two more arguments for config and middleware // More details here: https://github.com/zeit/serve-handler#options return handler(request, response, { "public": 'dist' }); }); server.listen(3000, () => { console.log('Running at http://localhost:3000'); }); module.exports = server;
// in ./main.js // start up server as app opening + const server = require('./server');
  • dist 資料夾
    npm run build 產出的 dist 資料夾 , 複製到 FishBucket/dist 資料夾

坑點紀錄

  • app = undefined

node ./main.js 執行 , app 會變成 undefined , 所以要改成 electron ./main.js 去執行

參考資料

Select a repo