当前位置：首页 > news >正文

electron打包基本教程

news 2025/8/21 5:04:13

从0开始搭建

概要
步骤
- 基础软件
- 运行项目
- 打包项目
注意事项

概要

将html打包成桌面的主流有electron和nwjs，nwjs更加简单，但是使用效果不如electron，electron打包比较麻烦，但是效果比较好，反正各有优势和缺点

步骤

基础软件

nodejs
官网下载
阿里下载

# 验证版本
node -v
v22.13.0

npm
nodejs自带npm，直接查看版本

npm -v
10.9.2

cnpm
国内用户需安装这个，你懂的

#使用 npm 全局安装 cnpm
npm install -g cnpm --registry=https://registry.npm.taobao.org

生成项目

cnpm init -y
# -y 参数表示使用默认配置快速初始化，免去手动回答一系列问题的步骤。

添加依赖

# 用于开发
cnpm install electron --save-dev
# 用于打包
cnpm install electron-builder --save-dev

指定国内地址
打包时会到github下载很多文件，如果连接github不顺畅，可以指定国内地址

  "build": {"electronDownload": {"mirror": "https://registry.npmmirror.com/-/binary/electron/"},"appId": "com.cn.app","mac": {"target": "dmg"},"win": {"target": "nsis"},"linux": {"target": "AppImage"}},

完整项目结构

app：需要打包的html网站，这里测试添加了一个简单的html单文件
dist：打包后文件目录
node_modules：node依赖包，自动生成的
main.js：项目主入口，package.json中指定
package.json：项目结构

main.js

const { app, BrowserWindow } = require('electron');
const path = require('path');function createWindow() {const win = new BrowserWindow({width: 800,height: 600,webPreferences: {nodeIntegration: true}});// win.loadURL('https://github.com');win.loadFile(path.join(__dirname, 'app', 'index.html'));
}app.whenReady().then(createWindow);app.on('window-all-closed', () => {if (process.platform !== 'darwin') {app.quit();}
});app.on('activate', () => {if (BrowserWindow.getAllWindows().length === 0) {createWindow();}
});

package.json

{"name": "my-electron-app","version": "1.0.0","description": "","main": "main.js","scripts": {"test": "echo \"Error: no test specified\" && exit 1","start": "electron .","build": "electron-builder"},"build": {"electronDownload": {"mirror": "https://registry.npmmirror.com/-/binary/electron/"},"appId": "com.cn.app","mac": {"target": "dmg"},"win": {"target": "nsis"},"linux": {"target": "AppImage"}},"keywords": [],"author": "","license": "ISC","devDependencies": {"electron": "^34.2.0","electron-builder": "^25.1.8"}
}