1.開發入口文件main.js

1-1 加載百度URL

const { app, BrowserWindow, nativeImage } = require('electron')
const path = require('node:path')const createWindow = () => {const win = new BrowserWindow({width: 800,height: 600,})//加載百度URLwin.loadURL('https://www.baidu.com/')
}app.whenReady().then(() => {// 調用 createWindow 函數，該函數的作用是創建一個新的瀏覽器窗口createWindow()
})

1-2 設置窗口圖標

1-2-1 根目錄中添加ico圖標，如圖

1-2-2 入口文件main.js中設置icon

 const appIcon = nativeImage.createFromPath(path.join(__dirname, 'baidu.ico'))const win = new BrowserWindow({width: 800,height: 600,icon: appIcon,})

1-3 入口文件完整實例代碼

const { app, BrowserWindow, nativeImage } = require('electron')
const path = require('node:path')const createWindow = () => {const appIcon = nativeImage.createFromPath(path.join(__dirname, 'baidu.ico'))const win = new BrowserWindow({width: 800,height: 600,icon: appIcon,})// 設置菜單不可見win.menuBarVisible = false;//加載指定路徑的文件//win.loadFile('index.html')// 加載指定的 URLwin.loadURL('https://www.baidu.com/')
}app.whenReady().then(() => {// 調用 createWindow 函數，該函數的作用是創建一個新的瀏覽器窗口createWindow()
})

2.啟動項目測試

npm run start

3.使用 Electron Forge打包應用

3-1 安裝Electron Forge ，并使用現成的轉化腳本將項目導入至 Electron Forge

npm install --save-dev @electron-forge/cli
npx electron-forge import

3-1-1 安裝完成檢查package.json配置是否如下

3-2 package.json中添加打包應用圖標配置

 "config": {"forge": {"packagerConfig": {"icon": "./logo.ico"}}},

3-3 打包應用

npm run make

3-4 解決打包錯誤

3-4-1?package.json中添加makers配置

 "config": {"forge": {"packagerConfig": {"icon": "./logo.ico"},"makers": [{"name": "@electron-forge/maker-squirrel","platforms": ["win32"]},{"name": "@electron-forge/maker-zip","platforms": ["win32"]}]}},

3-5 重新打包

npm run make

3-5-1 打包完成

打包完成看到一個?out?文件夾，其中包括可分發文件與一個包含其源碼的文件夾，證明打包成功。