electron 初始使用记录

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
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'" /> <meta http-equiv="X-Content-Security-Policy" content="default-src 'self'; script-src 'self'" /> <title>这是我的第一个桌面应用</title> </head> <body>
这是我的第一个桌面应用

👋
</body> </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文件
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'" /> <meta http-equiv="X-Content-Security-Policy" content="default-src 'self'; script-src 'self'" /> <title>来自 Electron 渲染器的问好！</title> </head> <body>
来自 Electron 渲染器的问好！

👋

<button id="add"> 新增文件</button> <button id="edit">修改文件</button> <button id="delete">删除文件</button>

<button id="readFile" style="margin-top: 50px;"> 读取文件</button>
复制代码
```
<span id="output"></span>
```
</body> <script src="./renderer.js"></script> </html> <style> </style>
改版后的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",

最终打包成功

复制代码

在这里插入代码片

electron 初始使用记录

这是我的第一个桌面应用

来自 Electron 渲染器的问好！