Electron 將網頁打包成桌面應用
阿新 • • 發佈：2019-01-08
1.初始化node專案，生成package.json檔案
1 npm init
2.安裝electron，並儲存為開發依賴項
1 npm install electron -D
3.根目錄下新建index.js檔案
const {app, BrowserWindow} = require('electron') let mainWindow function createWindow () { mainWindow = new BrowserWindow({width: 800, height: 600}) mainWindow.loadFile('index.html') // mainWindow.webContents.openDevTools() mainWindow.on('closed', function () { mainWindow = null }) } app.on('ready', createWindow) app.on('window-all-closed', function () { if (process.platform !== 'darwin') { app.quit() } }) app.on('activate', function () { // On OS X 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 (mainWindow === null) { createWindow() } })
4.根目錄下新建index.html檔案
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <h1>Hello Electron!!</h1> </body> </html>
5.開啟package.json檔案，新建命令
"scripts": { "start": "electron ." }
6.執行啟動命令
npm start
7.安裝electron打包工具electron-packager
npm install electron-packager -g
8.配置打包命令
"scripts": { "start": "electron .", "packager": "electron-packager . appName --all --out ../OutApp --app-version 1.0.0 --electron-version=2.0.0 --overwrite --icon xx.ico" }
執行打包命令
npm run pack
命令結構如下（根據實際情況修改）：
"."：需要打包的應用目錄（即當前目錄），
"appName"：應用名稱，
"--all”：打包成所有平臺（包括Windows及linux），
"--out ../OutApp"：輸出目錄，
"--app-version=1.0.0"：應用版本，
"--electron-version=2.0.0"：electron版本
"--icon"：圖示地址