Electron项目的搭建和electron-builder打包
electron简单项目目录结构
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello World!</title>
<meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';" />
<link rel="stylesheet" href="./app.css" />
</head>
<body>
<h1>Hello World!</h1>
We are using node <script>document.write(process.versions.node)</script>,
Chrome <script>document.write(process.versions.chrome)</script>,
and Electron <script>document.write(process.versions.electron)</script>.
<script src="./app.js" type="text/javascript"></script>
</body>
</html>
package.json
{
"name": "my-electron",
"version": "1.0.0",
"description": "",
"main": "main.js",
"scripts": {
"start": "electron ."
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"electron": "^11.1.1"
}
}
main.js
const {app, BrowserWindow} = require('electron');
function createWindow() {
// 创建浏览器窗口。
const win = new BrowserWindow({
width: 1280,
height: 720,
webPreferences: {
nodeIntegration: true,
},
autoHideMenuBar: true, // 默认隐藏菜单栏
fullscreen: true, // 默认全屏
});
// 加载index.html文件
win.loadFile('index.html');
}
// Electron 会在初始化后并准备创建浏览器窗口时,调用这个函数。部分 API 在 ready 事件触发后才能使用。
app.whenReady().then(createWindow);
// 当全部窗口关闭时退出。
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') {
app.quit();
}
});
app.on('activate', () => {
if (BrowserWindow.getAllWindows().length === 0) {
createWindow();
}
});
-
文件浏览器的demo: https://github.com/tugenhua0707/electron-demo/
-
打包命令:
electron-builder --win
下载electron-builder:npm install electron-builder global
package.json
{
"name": "window-electron",
"version": "1.0.0",
"description": "",
"main": "main.js",
"scripts": {
"start": "electron .",
"build": "electron-builder --win"
},
"build": {
"appId": "com.example.app",
"directories": {
"output": "dist"
},
"nsis": {
"oneClick": false,
"allowElevation": true,
"allowToChangeInstallationDirectory": true,
"installerIcon": "./icon.ico",
"installerHeaderIcon": "./icon.ico",
"createDesktopShortcut": true,
"createStartMenuShortcut": true,
"shortcutName": "123"
},
"win": {
"target": [
{
"target": "nsis",
"arch": [
"x64"
]
}
]
}
},
"keywords": [],
"author": "kongzhi",
"license": "ISC",
"dependencies": {
"electron": "^11.1.1"
},
"devDependencies": {
"async": "^3.2.0"
}
}
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列:如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列:如何用 C#调用 C方法造成内存泄露
· Manus爆火,是硬核还是营销?
· 终于写完轮子一部分:tcp代理 了,记录一下
· 别再用vector<bool>了!Google高级工程师:这可能是STL最大的设计失误
· 单元测试从入门到精通
· 震惊!C++程序真的从main开始吗?99%的程序员都答错了