- Electron 官网文档查看网页
- 新建文件名
mkdir my-electron-app && cd my-electron-app
npm init
- 初始化项目，安装速度会很慢
npm install electron --save-dev
- 新建main.js文件座位主入口使用
您在 package.json 中指定的 main 文件是 Electron 应用的入口。 这个文件控制 主程序 (main process)，它运行在 Node.js 环境里，负责控制您应用的生命周期、显示原生界面、执行特殊操作并管理渲染器进程 (renderer processes)，稍后会详细介绍。
在继续编写您的 Electron 应用之前，您将使用一个小小的脚本来确保主进程入口点已经配置正确。 在根目录的 main.js 文件中写一行代码：
main.js
console.log('Hello from Electron 👋')
package.json
{
"name": "my-electron-app",
"version": "1.0.0",
"description": "Hello World!",
"main": "main.js",
"scripts": {
"start": "electron .", //需要添加启动项目
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "Jane Doe",
"license": "MIT",
"devDependencies": {
"electron": "23.1.3"
}
}-
启动npm run start
npm run start
-
创建index.html
这是我的第一个桌面应用 这是我的第一个桌面应用
👋
-
main.js中写入
const { app, BrowserWindow } = require('electron/main')
const createWindow = () => {
const win = new BrowserWindow({
width: 800,
height: 600
})win.loadFile('index.html')
}app.whenReady().then(() => {
createWindow()app.on('activate', () => {
if (BrowserWindow.getAllWindows().length === 0) {
createWindow()
}
})
})app.on('window-all-closed', () => {
if (process.platform !== 'darwin') {
app.quit()
}
})
-
使用 VS Code 调试，生成launch.json
使用 VS Code 调试您的程序，您需要让 VS Code 监听主进程 (main process) 和渲染器进程 (renderer process) 。 下面为您提供了一个简单的配置文件。 请在根目录新建一个 .vscode 文件夹，然后在其中新建一个 launch.json 配置文件{
"version": "0.2.0",
"compounds": [
{
"name": "Main + renderer",
"configurations": ["Main", "Renderer"],
"stopAll": true
}
],
"configurations": [
{
"name": "Renderer",
"port": 9222,
"request": "attach",
"type": "chrome",
"webRoot": "{workspaceFolder}" }, { "name": "Main", "type": "node", "request": "launch", "cwd": "{workspaceFolder}",
"runtimeExecutable": "{workspaceFolder}/node_modules/.bin/electron", "windows": { "runtimeExecutable": "{workspaceFolder}/node_modules/.bin/electron.cmd"
},
"args": [".", "--remote-debugging-port=9222"],
"outputCapture": "std",
"console": "integratedTerminal"
}
]
} -
添加代码热更新
Electron 开发时 "改代码自动刷新 / 重启" 叫热重载（Hot Reload）npm i nodemon -D
//package.json 更改start
"scripts": {
"start": "nodemon --exec electron .",
"test": "echo "Error: no test specified" && exit 1"
},
添加nodemon.json文件
{
"watch": ["./"],
"ext": "js,html,css,vue,json",
"ignore": ["node_modules/", "dist/"],
"exec": "electron .",
"restartable": "rs",
"quiet": false
}-
改版后的index.html文件
来自 Electron 渲染器的问好！ 来自 Electron 渲染器的问好！
👋
<span id="output"></span> -
改版后的renderer.js文件
const add = document.getElementById("add");
const edit = document.getElementById("edit");
const del = document.getElementById("delete");const bt2 = document.getElementById("readFile");
const output = document.getElementById("output");
const input = document.getElementById("input");
//新增文件
add.onclick = () => {
console.log(input);
versions.saveFile(input.value)};
//删除文件
del.onclick = async () => {
const data = await versions.deleteFile();
alert("删除成功")
};
bt2.onclick = async () => {
console.log(versions);
const data = await versions.readFile();
output.innerHTML =data
}; -
改版后的preload.js文件
//预加载页面
//ipcRenderer是渲染进程向主进程发送消息的桥梁
//contextBridge是渲染进程向主进程暴露接口的桥梁
const { contextBridge ,ipcRenderer} = require('electron')contextBridge.exposeInMainWorld('versions', {
node: () => process.versions.node,
chrome: () => process.versions.chrome,
electron: () => process.versions.electron,
// 写入文件
saveFile:(data)=>{
console.log(data);
ipcRenderer.send('wirte-file',data)
},//读取文件
readFile:()=>{
const data = ipcRenderer.invoke('read-File') //invoke是异步的，send是同步的
console.log(data,'"0000');
return data
},
//删除文件
deleteFile:()=>{
const data = ipcRenderer.invoke('del-File') //invoke是异步的，send是同步的
return data
}// 除函数之外，我们也可以暴露变量
}) -
改版后的main.js文件
const { app, BrowserWindow,ipcMain } = require("electron");
const path = require('path')
const fs = require('fs')
//写入文件操作
function wirteFile(_, data) {
fs.writeFileSync('D:/test.txt', data)
}
let mainWindow = ""
//读取文件操作
function readFile() {
const data = fs.readFileSync('D:/test.txt','utf-8')
console.log(data)
return data
}
//删除文件操作
function deleteFile() {
fs.unlinkSync('D:/test.txt')
}
//
const createWindow = () => {
mainWindow = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
preload: path.resolve(__dirname, 'preload.js')
}
});
ipcMain.on('wirte-file',wirteFile)
ipcMain.handle('read-File',readFile)
ipcMain.handle('del-File',deleteFile)mainWindow.loadFile("./pages/index.html"); //加载本地文件
console.log(mainWindow)
// mainWindow.loadURL('https://www.bilibili.com/') //加载网页
};app.whenReady().then(() => { //当应用准备就绪时触发
ipcMain.handle('ping', () => 'pong') //监听ping事件，返回pong
createWindow()//创建窗口
}); -
实际效果
-
进行打包安装 electron-builder
始终报错 • no node modules returned while searching directories searchDirectories=[""]
⨯ ENOENT: no such file or directory, rename 'D:\my-project-all\2026-project\my-electron-app\dist\win-unpacked\electron.exe' -> 'D:\my-project-all\2026-project\my-electron-app\dist\win-unpacked\my-electron-app.exe' failedTask=build stackTrace=Error: ENOENT: no such file or directory, rename 'D:\my-project-all\2026-project\my-electron-app\dist\win-unpacked\electron.exe' -> 'D:\my-project-all\2026-project\my-electron-app\dist\win-unpacked\my-electron-app.exe'
1.no node modules returned while searching directories：打包工具找不到 node_modules（路径配置空了 / 目录不对）
2.ENOENT: no such file or directory, rename ...：打包工具想把 electron.exe 重命名为你的应用名，但根本没生成这个文件，所以重命名失败
打包过程中总是各种报错，如下原因一直再更改，删除配置项，最后终于跑动了，主要是把版本改了，然后必须添加上icon
"devDependencies": {
"electron": "^28.3.3",
"electron-builder": "^24.9.1"
}
"icon": "./icon.ico",
- 最终打包成功
在这里插入代码片
