Tips：执行命令建议使用管理员身份运行powershell
下载安装
nodejs 建议使用最新版（我使用的是20版本的）
nodejs下载 快速通道
配置npm淘宝镜像
npm config set registry https://registry.npm.taobao.org
用npm全局安装cnpm，命令如下：
npm install -g cnpm --registry=https://registry.npmmirror.com
使用cnpm下载Electron
在项目中执行命令
cnpm install --save-dev electron
#或者指定版本
cnpm install --save-dev electron@10.1.5
可能会出现的问题解决办法
打包时会需要一些资源文件会在运行打包命令后下载，会因为下载超时导致打包失败（配置淘宝镜像可能可以下载），这时需要我们手动去下载，需要下载的资源如下（以10.1.5版本为例）：
资源路径
先下载以下文件，下一步使用
1、electron-v10.1.5-win32-x64.zip
2、SHASUMS256.txt-10.1.5(下载的时候没有-10.1.5手动补上，其他版本一样)
3、winCodeSign-2.6.0.7z
4、nsis-resources-3.4.1.7z
5、nsis-3.0.4.1.7z
以上资源均可在以下链接下载其他版本，根据版本找对应目录下载
Electron资源下载链接
builder资源链接
解决办法
1、在C:\Users\Administrator\AppData\Local\electron\Cache中放入下载的electron-v10.1.5-win32-x64.zip和SHASUMS256.txt-10.1.5(下载的时候没有-10.1.5手动补上，其他版本一样)
2、在C:\Users\Administrator\AppData\Local\electron-builder\Cache\winCodeSign中放入下载的winCodeSign-2.6.0.7z包并解压
3、在C:\Users\Administrator\AppData\Local\electron-builder\Cache\nsis中放入下载的nsis-resources-3.4.1.7z和nsis-3.0.4.1.7z包并解压
以上为10.1.5版本为例，其他版本方法一致，替换版本所需版本即可
参考链接:
electron-builder 打包时下载 winCodeSign和nsis缓慢解决方法 - DevFans - 博客园
electron打包时报错
配置
设置图标资源 package.js/build.nsis说明
{
"installerIcon": "./build/icon.ico", // 安装的图标，默认 build/installerIcon.ico或者应用的图标
"uninstallerIcon": "./build/icon.ico", // 卸载的图标，默认build/uninstallerIcon.ico或者应用的图标
"installerHeader": "./build/icon.ico", // 安装的头部，默认build/installerHeader.bmp
"installerHeaderIcon": "./build/icon.ico", //安装包头部的涂票，默认build/installerHeaderIcon.ico
"installerSidebar": "./build/sidebar.bmp", // 安装包安装侧边图片，默认build/installerSidebar.bmp，要求164 × 314 像素
"uninstallerSidebar": "./build/sidebar.bmp" // 安装包卸载侧边图片，默认build/installerSidebar.bmp，要求164 × 314 像素
}
package.json
{
"author": "author",
"main": "main.js",
"name": "electron",
"version": "1.0.0",
"description": "electron",
"build": {
"productName": "electron",
"directories": {
"output": "electron_dist"// 打包输出文件夹，打包安装包输出位置
},
"win": {
"icon": "favicon.ico",//应用图标
"target": [
"nsis"
]
},
"nsis": {
"oneClick": false,
"allowToChangeInstallationDirectory": true,
"createDesktopShortcut": true,
"perMachine": true,
"shortcutName": "electron",
"installerIcon": "favicon.ico",
"installerHeaderIcon": "favicon.ico",
"installerHeader": "favicon.ico",
"uninstallerIcon": "favicon.ico"
},
"electronVersion": "27.0.2",
"electronDownload": {
"mirror": "https://npm.taobao.org/mirrors/electron/"
},
"extraFiles": [
"./extraFiles/test"//不打包到app.asar,访问不到某块代码或插件可试着排除打包
]
},
"scripts": {
"start": "electron .",
"package": "electron-packager ./ 应用名称 --platform=win32 --arch=x64 --out=./out --app-version=1.0.0 --overwrite --icon=logo.ico",
"build": "electron-builder --win --x64"
},
"devDependencies": {
"electron": "^27.0.2",
"electron-builder": "^24.6.4",
"electron-packager": "^17.1.2"
},
"dependencies": {
}
}
以上为windows桌面应用配置
调试
Dev运行本地调试(根据package.json文件)
npm run start
打包
打包成安装包(根据package.json文件)
npm run build
文件输出目录 electron_dist（package.json中可修改build.directories.output）
打包成可执行应用程序【免安装版本】(根据package.json文件生成)
npm run package
原文：https://blog.csdn.net/weixin_58474739/article/details/134846737?spm=1011.2415.3001.5331
