打包基础配置文件package.json
{
"name": "electron-builder-test",
"version": "1.1.5",
"description": "electron-builder-test description",
"main": "./src/index.js",
"scripts": {
"start": "electron .",
"build": "electron-builder",
"dir": "electron-builder --dir",
"publish": "electron-builder --publish always",
"create:cert": "electron-builder create-self-signed-cert -p xxl"
},
"author": "xxl",
"license": "ISC",
"devDependencies": {
"electron": "^23.1.3",
"electron-builder": "^23.6.0",
"electron-publish": "^24.0.0"
},
"dependencies": {
"electron-dl": "^3.5.0",
"electron-updater": "^5.3.0"
},
"build": {
"appId": "com.example.app",
"asar": true,
"icon": "./build/icons/appIcon.ico",
"directories": {
"output": "release/${version}"
},
"nsis": {
"oneClick": false,
"perMachine": false,
"allowElevation": true,
"allowToChangeInstallationDirectory": true,
"createDesktopShortcut": true,
"deleteAppDataOnUninstall": false,
"shortcutName": "测试应用"
},
"publish": [
{
"provider": "generic",
"url": "http://192.168.1.6:4025/download/"
}
],
"win": {
"artifactName": "${productName}_${version}.${ext}",
"icon": "./build/icons/appIcon.ico",
"target": [
{
"target": "nsis",
"arch": [
"ia32"
]
}
],
"publisherName": "xxx",
"certificateFile": "./xxx.pfx"
}
}
}
nsis常用配置项说明
{
"oneClick": false, // 创建一键安装程序还是辅助安装程序（默认是一键安装）
"allowElevation": true, // 是否允许请求提升，如果为false，则用户必须使用提升的权限重新启动安装程序 （仅作用于辅助安装程序）
"allowToChangeInstallationDirectory": true, // 是否允许修改安装目录 （仅作用于辅助安装程序）
"installerIcon": "public/timg.ico",// 安装程序图标的路径
"uninstallerIcon": "public/timg.ico",// 卸载程序图标的路径
"installerHeader": "public/timg.ico", // 安装时头部图片路径（仅作用于辅助安装程序）
"installerHeaderIcon": "public/timg.ico", // 安装时标题图标（进度条上方）的路径（仅作用于一键安装程序）
"installerSidebar": "public/installerSiddebar.bmp", // 安装完毕界面图片的路径，图片后缀.bmp，尺寸164*314 （仅作用于辅助安装程序）
"uninstallerSidebar": "public/uninstallerSiddebar.bmp", // 开始卸载界面图片的路径，图片后缀.bmp，尺寸164*314 （仅作用于辅助安装程序）
"uninstallDisplayName": "${productName}${version}", // 控制面板中的卸载程序显示名称
"createDesktopShortcut": true, // 是否创建桌面快捷方式
"createStartMenuShortcut": true,// 是否创建开始菜单快捷方式
"shortcutName": "SHom", // 用于快捷方式的名称，默认为应用程序名称
"include": "script/installer.nsi", // NSIS包含定制安装程序脚本的路径，安装过程中自行调用 (可用于写入注册表 开机自启动等操作)
"script": "script/installer.nsi", // 用于自定义安装程序的NSIS脚本的路径
"deleteAppDataOnUninstall": false, // 是否在卸载时删除应用程序数据（仅作用于一键安装程序）
"runAfterFinish": true, // 完成后是否运行已安装的应用程序（对于辅助安装程序，应删除相应的复选框）
"menuCategory": false, // 是否为开始菜单快捷方式和程序文件目录创建子菜单，如果为true，则使用公司名称
"perMachine":true, //给机器上所有用户安装
"language":"2052",//安装语言(中文)
}
自动更新文件update.js，必须在app.ready成功后使用
const { app, dialog } = require('electron')
const { autoUpdater } = require("electron-updater");
const addUpdateListen = function (mainWindow) {
// 仅限win测试
autoUpdater.setFeedURL("http://192.168.1.6:4025/download/win32");
autoUpdater.checkForUpdatesAndNotify();
function sendStatusToWindow(text) {
mainWindow.webContents.send("getAppUpdateProcess", text);
}
autoUpdater.on("checking-for-update", () => {
sendStatusToWindow("正在检查更新……");
});
autoUpdater.on("update-available", (info) => {
sendStatusToWindow("检测到新版本，正在下载……");
});
autoUpdater.on("update-not-available", (info) => {
sendStatusToWindow("现在使用的就是最新版本，不用更新");
});
autoUpdater.on("error", (err) => {
sendStatusToWindow("检查更新出错 " + err);
});
autoUpdater.on("download-progress", (progressObj) => {
let log_message = "Download speed: " + progressObj.bytesPerSecond;
log_message = log_message + " - Downloaded " + progressObj.percent + "%";
log_message =
log_message +
" (" +
progressObj.transferred +
"/" +
progressObj.total +
")";
sendStatusToWindow(log_message);
});
// 监听'update-downloaded'事件，新版本下载完成时触发
autoUpdater.on("update-downloaded", (info) => {
sendStatusToWindow("新版本下载完成");
dialog
.showMessageBox({
type: "info",
title: "应用更新",
message: "发现新版本，是否更新？",
buttons: ["是", "否"],
})
.then((buttonIndex) => {
if (buttonIndex.response == 0) {
//选择是，则退出程序，安装新版本
autoUpdater.quitAndInstall();
app.quit();
}
});
});
};
module.exports = {
addUpdateListen,
};
使用过程中遇到的问题
问题1：使用yarn create命令，出现yarn create vite 报错 ‘D:\Program‘ 不是内部或外部命令,也不是可运行的程序 或批处理文件
可以创建一个不带特殊符号的目录存放，比如“D:\nodeProgram\npm_global_download\npm_global”和“D:\nodeProgram\npm_global_download\npm_cache”
查看npm配置路径npm config ls
修改npm配置路径
npm config set prefix "D:\nodeProgram\npm_global_download\npm_global"
npm config set cache "D:\nodeProgram\npm_global_download\npm_cache"
修改完后，还需要修改环境变量到上面指定的目录；使用nvm方式安装node和npm的用户同样是上面的操作。
问题2：yarn create 文件名、目录名或卷标语法不正确。
yarn global bin和yarn global dir值不一致造成的。解决办法：
yarn config set global-folder "D:\nodeProgram\npm_global_download\npm_global\bin"
yarn config set cache-folder "D:\nodeProgram\npm_global_download\npm_global\bin"
问题3：yarn和npm下载资源包慢，需要配置淘宝镜像
NPM
查询当前镜像
npm get registry
设置为淘宝镜像
npm config set registry https://registry.npm.taobao.org/
设置为官方镜像
npm config set registry https://registry.npmjs.org/
YARN
查询当前镜像
yarn config get registry
设置为淘宝镜像
yarn config set registry https://registry.npm.taobao.org/
设置为官方镜像
yarn config set registry https://registry.yarnpkg.com
问题4：360误报误杀问题
需要到360软件开放平台提交审核，收录到360开放软件中心。提交软件误报反馈
问题5：打包图标大小必须是256*256，格式.ico，生成图标软件名iConvertIcons
问题6：如何使用github做自动发布
以下是基于github release的配置项
{
"build": {
"publish": [
{
"provider": "github",
"repo": "electron-builder-update-test",
"owner": "xiongchaoren",
"private": true,
"releaseType": "release",
"token": ""
}
],
}
token是github在线生成私人令牌
windows下添加环境变量GH_TOKEN，在powershell中执行，或自行手动添加GH_TOKEN环境变量
[Environment]::SetEnvironmentVariable("GH_TOKEN","<YOUR_TOKEN_HERE>","User")
参考资料
- electron-builder官网：www.electron.build/
- electron/asar: github.com/electron/as…
- electron-vite脚手架：github.com/electron-vi…
- NSIS打包脚本基础：www.cnblogs.com/jingmoxukon…
- 代码签名国内供应商参考：数安时代
- 开源原生对象存储软件minio，可结合
electron-publish做自动发布：min.io/download#/k… - 在线代码编辑器: codemirror.net/
- 渲染进程使用node能力的库：github.com/electron/re…
- windows程序设计论坛：fishc.com.cn/forum-255-1…
demo地址
gitee上的demo
