做钓鱼网站查处google搜索首页
一.项目结构
项目结构建议如下：
my-electron-app/
├── example.exe ← 需打包的外部程序
├── config.json ← 配置文件
├── native-lib/ ← 自定义库或 DLL
│ └── yourlib.dll
├── main.js ← Electron 主进程入口
├── index.html ← 简单渲染页面├── package.json ← 应用与打包配置
二、安装依赖
首先初始化项目，并安装 Electron和 electron-builder：
npm init -y
npm install --save-dev electron electron-builder
三、编写主进程代码（main.js）
const { app, BrowserWindow } = require('electron');
const path = require('path');
const fs = require('fs');
const { spawn } = require('child_process');function createWindow() {const win = new BrowserWindow({width: 800,height: 600});win.loadFile('index.html');// 读取 JSON 配置const configPath = app.isPackaged? path.join(process.resourcesPath, 'config.json'): path.join(__dirname, 'config.json');const config = JSON.parse(fs.readFileSync(configPath, 'utf-8'));console.log('Loaded Config:', config);// 启动 example.execonst exePath = app.isPackaged? path.join(process.resourcesPath, 'example.exe'): path.join(__dirname, 'example.exe');spawn(exePath, [], {cwd: app.isPackaged ? process.resourcesPath : __dirname,detached: true,stdio: 'ignore'});
}app.whenReady().then(createWindow);
四、HTML 页面（index.html）
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>Electron Resource Demo</title>
</head>
<body><h1>Hello from Electron!</h1><p>example.exe 已在后台执行。</p>
</body>
</html>
五、配置 package.json
关键配置在于 build 部分，确保你指定了所有需要打包的资源文件。
{"name": "example-electron","version": "1.0.0","main": "main.js","scripts": {"start": "electron .","dist": "electron-builder"},"build": {"appId": "com.skydimo.exampleapp","productName": "Electron Resource Example","files": ["**/*"],"extraResources": [{"from": "example.exe","to": "resources/example.exe"},{"from": "config.json","to": "config.json"},{"from": "native-lib/","to": "native-lib"}],"win": {"target": "nsis","icon": "icon.ico"},"nsis": {"oneClick": false,"allowToChangeInstallationDirectory": true}},"devDependencies": {"electron": "^28.0.0","electron-builder": "^24.0.0"}
}
说明：
-
extraResources: 是关键，它将你自定义的.exe、.json、DLL 文件一并打包到最终的resources文件夹中； -
process.resourcesPath: Electron 打包后会将所有extraResources放到这里； -
app.isPackaged: 判断是否是打包后的运行环境。
六、运行 & 打包
启动开发环境：
npm start
打包生成 .exe：
npm run dist
输出目录默认在 dist/，你会看到：
dist/
├── win-unpacked/
├── Electron Resource Example Setup 1.0.0.exe ← 安装包
七、测试打包后行为
打包后双击运行 .exe 安装程序后，你的应用应该能：
-
正常打开窗口；
-
正确读取配置文件；
-
成功启动
example.exe； -
正常加载 DLL 等附加库文件（如你使用的是本地模块）。
小贴士
| 场景 | 处理方式 |
|---|---|
| 配置文件读取 | 用 fs.readFileSync(path) 搭配 process.resourcesPath |
| 加载本地库 | 放在 native-lib/ 目录下，打包配置中加上路径 |
| 执行外部程序 | 使用 spawn()，避免阻塞主线程 |
| 调试路径问题 | console.log(process.resourcesPath) 看清真实路径 |
总结
通过 electron-builder 的 extraResources 配置，我们可以轻松地将自定义的 .exe 程序、.json 配置文件、本地库一并打包，并通过 Node.js 的路径处理函数在运行时加载它们。这不仅能保持项目结构清晰，也让部署和运行更简单稳定。
注意事项：运行时错误与调试建议
即使按照博客教程一步步来，也有可能在打包后遇到一些运行时错误。下面是一些 常见错误场景 和对应的 解决建议，帮助你根据实际情况灵活调整 main.js 和 package.json。
1. 找不到资源文件 / 配置文件
错误现象：
ENOENT: no such file or directory, open '.../config.json'
解决方法：
-
问题来源：开发环境用的是
__dirname，但打包后要用process.resourcesPath； -
解决方案：统一路径判断：
const configPath = app.isPackaged
? path.join(process.resourcesPath, 'config.json')
: path.join(__dirname, 'config.json');
2. example.exe 无法启动或崩溃
错误现象：
-
Electron 报错
spawn ENOENT； -
example.exe启动了但马上退出； -
没有任何反馈。
解决方法：
-
确认文件是否被打包：打包后去
dist/win-unpacked/resources/看是否有example.exe； -
调整启动方式：
spawn(exePath, [], {
cwd: path.dirname(exePath),
detached: true,
stdio: 'ignore'
});
-
example.exe 有依赖项（如 DLL）：确保这些 DLL 也通过
extraResources被打包进来。
3. DLL/动态库加载失败
解决方法：
-
把
.dll文件和.exe放在同一目录，或在native-lib/中统一管理； -
添加：
"extraResources": [
{
"from": "native-lib/",
"to": "native-lib"
}
]
-
程序中使用完整路径引入 DLL：
const libPath = app.isPackaged
? path.join(process.resourcesPath, 'native-lib', 'yourlib.dll')
: path.join(__dirname, 'native-lib', 'yourlib.dll');
4. 图标不生效 / 打包失败
可能原因：
-
图标不是
.ico格式； -
图标路径不正确。
解决方法：
-
将
icon.ico放在项目根目录； -
配置：
"win": {
"icon": "icon.ico"
}
终极调试技巧
console.log('App Path:', app.getAppPath());
console.log('Resources Path:', process.resourcesPath);
console.log('Is Packaged:', app.isPackaged);
这些日志可以让你在运行时清楚知道资源到底应该在哪、程序是打包状态还是开发状态。
建议：打包前 checklist
| 检查项 | 是否确认 ✅ |
|---|---|
所有资源是否加进 extraResources | ✅ |
所有路径是否做了 isPackaged 判断 | ✅ |
example.exe 是否独立可运行 | ✅ |
| 所有 DLL 是否与 EXE 同目录 | ✅ |
| 控制台是否打印真实路径调试信息 | ✅ |
要是打包之后运行遇到问题，咱们可以一起交流看看，你也可以把 main.js 和 package.json 发过来，我这边也帮着看一眼，或许能一起摸索出个思路来，把 .exe 和资源搞定