-1.electron-packager特点
electron-packager只能生成文件夹
所以它需要依靠市面上的安装包制作软件二次打包生成单独的exe或msi安装包文件
安装包制作软件可能是NSIS、Inno Setup、Actual Installer、CreateInstall,甚至是自解压
链接:安装包制作工具整理
0.准备
确保安装了git、nvm和VSCode
准备一个ico图标(在线生成、PS制作就行,不要折腾)
1.克隆Electron-quick-start
随意打开一个目录位置,右键空白处,点击Git Bash Here,输入以下命令克隆中文版本
git clone https://gitee.com/beibeibeibei/electron-quick-start-Chinese.git
或输入以下命令克隆Github原版
git clone https://github.com/electron/electron-quick-start
打开克隆下来的electron-quick-start-Chinese文件夹,Shift+右键空白处,点击在此处打开 Power Shell 窗口(S),输入以下命令
cmd /c "set ELECTRON_MIRROR=https://repo.huaweicloud.com/electron/&& npm install"
2.启动试试
输入以下命令启动项目,启动成功。
npm start
3.制作软件图标
使用cloudconvert在线网站生成图标,图标文件放置在以下路径
.\electron-quick-start-Chinese\assets\app-icon\mac\b.icns
.\electron-quick-start-Chinese\assets\app-icon\win\b.ico
4.下载electron压缩包(替electron-packager提前下好,idm不是什么小npm能碰瓷的)
访问Github发行版页面下载electron-packager需要的electron压缩包
或者在electron压缩包阿里源下载
选择的版本应该和启动软件时显示的electron版本一致
本文章使用的版本是electron-v22.0.2-win32-x64.zip
将下载好的压缩包放置在以下路径
.\electron-quick-start-Chinese\assets\electron-download\electron-v22.0.2-win32-x64.zip
5.安装electron-packager
输入以下命令安装electron-packager
npm install --save-dev electron-packager
修改package.json文件添加script脚本
修改前(截取部分)
"scripts": {
"//f": "命令行运行 npm run start 来代替运行\"electron\",还可以使用pre和post钩子功能",
"start": "electron .",
},
修改后(截取部分)
"scripts": {
"//f": "命令行运行 npm run start 来代替运行\"electron\",还可以使用pre和post钩子功能",
"start": "electron .",
"package": "electron-packager . --overwrite --platform=win32 --out=out --icon=assets/app-icon/win/b.ico --electronZipDir=assets/electron-download/ --ignore=.github/* --ignore=.gitignore --ignore='README(_en|_zh)?.md' --ignore=assets/electron-download/* --ignore=package-lock.json"
},
6.使用electron-packager打包
输入以下命令打包
npm run package
打包完成,位于以下路径
.\electron-quick-start-Chinese\out\electron-quick-start-Chinese-win32-x64
7.再用NSIS打包
7.0 最简单NSIS打包方法
软件文件夹用Bandizip压缩成zip,下载安装NSIS,使用NSIS的"Installer based on .ZIP file"功能读取zip,点击Generate即可。
7.1 访问NSIS官网下载NSIS安装包
访问NSIS首页或者访问NSIS的sourceforge下载页面下载NSIS
7.2 安装NSIS
双击运行NSIS安装包
点击 Next >
点击 I Agree
点击 Next >
修改安装位置后,点击 Install,记录安装位置备用
很快安装完成,可以都取消勾选,点击 Finish。之后自动打开的NSIS主界面和chm格式的教程不需要,关闭即可。
7.3 配置VSCode,让VSCode可以编写NSIS脚本
打开VSCode,切换到扩展界面,搜索NSIS,选中NSIS扩展(作者:idleberg)并安装
或者访问vscode-nsis扩展网页链接点击 Install 按钮跳转 VSCode 安装
打开NSIS安装位置找到Makensis,例如这个路径:E:\Program Files (x86)\NSIS\makensis.exe
在VSCode中按步骤设置makensis,文件-首选项-设置,搜索Nsis>Compiler: Path To Makensis
这项设置,将makensis.exe的完整路径填进去
再搜索Nsis>Compiler: Custom Arguments
这项设置,添加两项,每项占一行
第一项-INPUTCHARSET
第二项UTF8
7.4 编写最小nsi脚本(可跳过)
打开NSIS安装位置找到Examples文件夹,例如这个路径:E:\Program Files (x86)\NSIS\Examples
找到最小的文件,example1.nsi
复制到桌面上,用VSCode编辑(不熟悉最好复制一份,1KB不占空间但是不小心删了却要重装)
脚本内容如下(核心代码未改动,只添加了中文注释)
(vscode-nsis扩展并不知道这个世界上有UTF8文件,Bad text encoding报错直接删除中文或者不用管就可以了,编译是可以过的)
; example1.nsi
; 这个脚本是最简单的NSIS脚本。
; 所有设置都是默认设置。
; 生成的安装程序只会询问程序的安装位置,然后把本脚本(也就是example1.nsi)放在里面。
; example2.nsi比本脚本(也就是example1.nsi)仅增加了一个功能,那就是添加卸载程序和开始菜单快捷方式。
;--------------------------------
; 安装程序的名称
Name "Example1"
; 要写入的文件(最终的生成结果)
OutFile "example1.exe"
; 请求Windows Vista及更高版本的应用程序权限
; 一些复杂的安装包在运行时可能需要管理员权限,而这里仅设置为user
RequestExecutionLevel user
; 生成Unicode安装程序
; 启用Unicode让界面显示全世界的语言,尤其是中文强烈依赖Unicode
; 除非代码质量差,不然Unicode只需设置为True即可(关闭后更返祖,可以理解为仅支持26个英文字母)
Unicode True
; 默认安装目录
InstallDir $DESKTOP\Example1
;--------------------------------
; Pages页面
; Page directory 安装目录选择页面
; Page instfiles 安装执行页面
Page directory
Page instfiles
;--------------------------------
; 要安装的东西
Section "" ;没有Page components 组件选择页面,名称不重要
; 设置安装目录的输出路径
SetOutPath $INSTDIR
; 将文件放置在这里
File example1.nsi
SectionEnd
7.5 编译最小nsi脚本(可跳过)
点击实心闪电图标编译脚本(Ctrl+Shift+B),生成安装包试试
很快VSCode右下角弹出提示,编译成功!
点击Run按钮直接运行安装包,点击Reveal按钮
打开安装包所在文件夹
运行生成的安装包,它可以正常运行,点击 Install 安装
点击 Close 关闭,桌面上出现了一个文件夹,安装包已经执行了安装动作。
根据脚本内容,安装目录中确实将自身复制进去了
7.6 编写example2.nsi
; example2.nsi
;
; 本脚本基于example1.nsi并增加了以下功能
; 1.记住目录
; 2.卸载功能
; 3.可选的开始菜单快捷方式
;
; example2.nsi脚本会将example2.nsi文件安装到用户选择的目录中。
;
; install-shared.nsi脚本将提供一种更可靠的检查管理员权限的方法
; install-per-user.nsi脚本将提供如何做文件关联功能的方法
;--------------------------------
; 安装程序的名称
Name "Example2"
; 要写入的文件(最终的生成结果)
OutFile "example2.exe"
; 请求Windows Vista及更高版本的应用程序权限
RequestExecutionLevel admin
; 生成Unicode安装程序
; 启用Unicode让界面显示全世界的语言,尤其是中文强烈依赖Unicode
; 除非代码质量差,不然Unicode只需设置为True即可(关闭后更返祖,可以理解为仅支持26个英文字母)
Unicode True
; 默认安装目录
InstallDir $PROGRAMFILES\Example2
; 用于检查目录的注册表项(因此,如果二次安装,它将自动覆盖旧目录)
InstallDirRegKey HKLM "Software\NSIS_Example2" "Install_Dir"
;--------------------------------
; Pages页面
; Page components 组件选择页面
; Page directory 安装目录选择页面
; Page instfiles 安装执行页面
; UninstPage uninstConfirm 卸载确认页面
; UninstPage instfiles 取消安装
Page components
Page directory
Page instfiles
UninstPage uninstConfirm
UninstPage instfiles
;--------------------------------
; 要安装的东西
Section "Example2 (required)"
SectionIn RO
; 设置安装目录的输出路径
SetOutPath $INSTDIR
; 将文件放置在这里
File "example2.nsi"
; 将安装路径写入注册表
WriteRegStr HKLM SOFTWARE\NSIS_Example2 "Install_Dir" "$INSTDIR"
; 卸载注册表项的 Windows 安装程序属性:https://learn.microsoft.com/en-us/windows/win32/msi/uninstall-registry-key
; 写入卸载注册表项
WriteRegStr HKLM "Software\Microsoft\Windows\CurrentVersion\Uninstall\Example2" "DisplayName" "NSIS Example2"
WriteRegStr HKLM "Software\Microsoft\Windows\CurrentVersion\Uninstall\Example2" "UninstallString" '"$INSTDIR\uninstall.exe"'
WriteRegDWORD HKLM "Software\Microsoft\Windows\CurrentVersion\Uninstall\Example2" "NoModify" 1
WriteRegDWORD HKLM "Software\Microsoft\Windows\CurrentVersion\Uninstall\Example2" "NoRepair" 1
WriteUninstaller "$INSTDIR\uninstall.exe"
SectionEnd
; 可选的Section(可由用户禁用)
Section "Start Menu Shortcuts"
CreateDirectory "$SMPROGRAMS\Example2"
CreateShortcut "$SMPROGRAMS\Example2\Uninstall.lnk" "$INSTDIR\uninstall.exe"
CreateShortcut "$SMPROGRAMS\Example2\Example2 (MakeNSISW).lnk" "$INSTDIR\example2.nsi"
SectionEnd
;--------------------------------
; 卸载程序
Section "Uninstall"
; 删除注册表项
DeleteRegKey HKLM "Software\Microsoft\Windows\CurrentVersion\Uninstall\Example2"
DeleteRegKey HKLM SOFTWARE\NSIS_Example2
; 删除文件和卸载程序
Delete $INSTDIR\example2.nsi
Delete $INSTDIR\uninstall.exe
; 如果有快捷方式则删除快捷方式
Delete "$SMPROGRAMS\Example2\*.lnk"
; 删除目录
RMDir "$SMPROGRAMS\Example2"
RMDir "$INSTDIR"
SectionEnd
7.7 编译example2.nsi并添加electron项目
不要学Potplayer傻了吧唧的,确认好文件名再执行安装和删除
在这个路径下运行以下命令.\electron-quick-start-Chinese\out\electron-quick-start-Chinese-win32-x64
cmd /k "echo off&&for /r %i in (*) do ( echo %%i )"
全选复制结果到vscode中,第一行命令删除不要
选中路径前半段,Ctrl+H
替换为" File “或者” File /oname=$INSTDIR****",就像这样
.\electron-quick-start-Chinese\out\electron-quick-start-Chinese-win32-x64\chrome_100_percent.pak
.\electron-quick-start-Chinese\out\electron-quick-start-Chinese-win32-x64\locales\zh-CN.pak
File chrome_100_percent.pak
File /oname=$INSTDIR\locales\zh-CN.pak locales\zh-CN.pak
将example2.nsi放置在这个位置
.\electron-quick-start-Chinese\out\electron-quick-start-Chinese-win32-x64\example2.nsi
编辑example2.nsi,找到File “example2.nsi”
,把处理好的文件名复制进去
提前CreateDirectory创建文件夹,NSIS并不会智能创建文件夹
; 将文件放置在这里
File "example2.nsi"
CreateDirectory "$INSTDIR\locales"
CreateDirectory "$INSTDIR\resources\app"
CreateDirectory "$INSTDIR\resources\app\assets\app-icon\mac"
CreateDirectory "$INSTDIR\resources\app\assets\app-icon\win"
File chrome_100_percent.pak
File chrome_200_percent.pak
File d3dcompiler_47.dll
File electron-quick-start-Chinese.exe
File example2.nsi
File ffmpeg.dll
File icudtl.dat
File libEGL.dll
File libGLESv2.dll
File LICENSE
File LICENSES.chromium.html
File resources.pak
File snapshot_blob.bin
File v8_context_snapshot.bin
File version
File vk_swiftshader.dll
File vk_swiftshader_icd.json
File vulkan-1.dll
File /oname=$INSTDIR\locales\af.pak locales\af.pak
File /oname=$INSTDIR\locales\am.pak locales\am.pak
File /oname=$INSTDIR\locales\ar.pak locales\ar.pak
File /oname=$INSTDIR\locales\bg.pak locales\bg.pak
File /oname=$INSTDIR\locales\bn.pak locales\bn.pak
File /oname=$INSTDIR\locales\ca.pak locales\ca.pak
File /oname=$INSTDIR\locales\cs.pak locales\cs.pak
File /oname=$INSTDIR\locales\da.pak locales\da.pak
File /oname=$INSTDIR\locales\de.pak locales\de.pak
File /oname=$INSTDIR\locales\el.pak locales\el.pak
File /oname=$INSTDIR\locales\en-GB.pak locales\en-GB.pak
File /oname=$INSTDIR\locales\en-US.pak locales\en-US.pak
File /oname=$INSTDIR\locales\es-419.pak locales\es-419.pak
File /oname=$INSTDIR\locales\es.pak locales\es.pak
File /oname=$INSTDIR\locales\et.pak locales\et.pak
File /oname=$INSTDIR\locales\fa.pak locales\fa.pak
File /oname=$INSTDIR\locales\fi.pak locales\fi.pak
File /oname=$INSTDIR\locales\fil.pak locales\fil.pak
File /oname=$INSTDIR\locales\fr.pak locales\fr.pak
File /oname=$INSTDIR\locales\gu.pak locales\gu.pak
File /oname=$INSTDIR\locales\he.pak locales\he.pak
File /oname=$INSTDIR\locales\hi.pak locales\hi.pak
File /oname=$INSTDIR\locales\hr.pak locales\hr.pak
File /oname=$INSTDIR\locales\hu.pak locales\hu.pak
File /oname=$INSTDIR\locales\id.pak locales\id.pak
File /oname=$INSTDIR\locales\it.pak locales\it.pak
File /oname=$INSTDIR\locales\ja.pak locales\ja.pak
File /oname=$INSTDIR\locales\kn.pak locales\kn.pak
File /oname=$INSTDIR\locales\ko.pak locales\ko.pak
File /oname=$INSTDIR\locales\lt.pak locales\lt.pak
File /oname=$INSTDIR\locales\lv.pak locales\lv.pak
File /oname=$INSTDIR\locales\ml.pak locales\ml.pak
File /oname=$INSTDIR\locales\mr.pak locales\mr.pak
File /oname=$INSTDIR\locales\ms.pak locales\ms.pak
File /oname=$INSTDIR\locales\nb.pak locales\nb.pak
File /oname=$INSTDIR\locales\nl.pak locales\nl.pak
File /oname=$INSTDIR\locales\pl.pak locales\pl.pak
File /oname=$INSTDIR\locales\pt-BR.pak locales\pt-BR.pak
File /oname=$INSTDIR\locales\pt-PT.pak locales\pt-PT.pak
File /oname=$INSTDIR\locales\ro.pak locales\ro.pak
File /oname=$INSTDIR\locales\ru.pak locales\ru.pak
File /oname=$INSTDIR\locales\sk.pak locales\sk.pak
File /oname=$INSTDIR\locales\sl.pak locales\sl.pak
File /oname=$INSTDIR\locales\sr.pak locales\sr.pak
File /oname=$INSTDIR\locales\sv.pak locales\sv.pak
File /oname=$INSTDIR\locales\sw.pak locales\sw.pak
File /oname=$INSTDIR\locales\ta.pak locales\ta.pak
File /oname=$INSTDIR\locales\te.pak locales\te.pak
File /oname=$INSTDIR\locales\th.pak locales\th.pak
File /oname=$INSTDIR\locales\tr.pak locales\tr.pak
File /oname=$INSTDIR\locales\uk.pak locales\uk.pak
File /oname=$INSTDIR\locales\ur.pak locales\ur.pak
File /oname=$INSTDIR\locales\vi.pak locales\vi.pak
File /oname=$INSTDIR\locales\zh-CN.pak locales\zh-CN.pak
File /oname=$INSTDIR\locales\zh-TW.pak locales\zh-TW.pak
File /oname=$INSTDIR\resources\app\index.html resources\app\index.html
File /oname=$INSTDIR\resources\app\LICENSE.md resources\app\LICENSE.md
File /oname=$INSTDIR\resources\app\main.js resources\app\main.js
File /oname=$INSTDIR\resources\app\package.json resources\app\package.json
File /oname=$INSTDIR\resources\app\preload.js resources\app\preload.js
File /oname=$INSTDIR\resources\app\renderer.js resources\app\renderer.js
File /oname=$INSTDIR\resources\app\styles.css resources\app\styles.css
File /oname=$INSTDIR\resources\app\assets\app-icon\mac\b.icns resources\app\assets\app-icon\mac\b.icns
File /oname=$INSTDIR\resources\app\assets\app-icon\win\b.ico resources\app\assets\app-icon\win\b.ico
同理再修改Delete
语句,编辑example2.nsi,找到Delete $INSTDIR\uninstall.exe
,把处理好的文件名复制进去
Delete $INSTDIR\locales\zh-CN.pak
谨慎使用RMDir /r
,该操作会无情地删除文件夹
; 删除文件和卸载程序
Delete $INSTDIR\example2.nsi
Delete $INSTDIR\uninstall.exe
Delete $INSTDIR\chrome_100_percent.pak
Delete $INSTDIR\chrome_200_percent.pak
Delete $INSTDIR\d3dcompiler_47.dll
Delete $INSTDIR\electron-quick-start-Chinese.exe
Delete $INSTDIR\example2.nsi
Delete $INSTDIR\ffmpeg.dll
Delete $INSTDIR\icudtl.dat
Delete $INSTDIR\libEGL.dll
Delete $INSTDIR\libGLESv2.dll
Delete $INSTDIR\LICENSE
Delete $INSTDIR\LICENSES.chromium.html
Delete $INSTDIR\resources.pak
Delete $INSTDIR\snapshot_blob.bin
Delete $INSTDIR\v8_context_snapshot.bin
Delete $INSTDIR\version
Delete $INSTDIR\vk_swiftshader.dll
Delete $INSTDIR\vk_swiftshader_icd.json
Delete $INSTDIR\vulkan-1.dll
Delete $INSTDIR\locales\af.pak
Delete $INSTDIR\locales\am.pak
Delete $INSTDIR\locales\ar.pak
Delete $INSTDIR\locales\bg.pak
Delete $INSTDIR\locales\bn.pak
Delete $INSTDIR\locales\ca.pak
Delete $INSTDIR\locales\cs.pak
Delete $INSTDIR\locales\da.pak
Delete $INSTDIR\locales\de.pak
Delete $INSTDIR\locales\el.pak
Delete $INSTDIR\locales\en-GB.pak
Delete $INSTDIR\locales\en-US.pak
Delete $INSTDIR\locales\es-419.pak
Delete $INSTDIR\locales\es.pak
Delete $INSTDIR\locales\et.pak
Delete $INSTDIR\locales\fa.pak
Delete $INSTDIR\locales\fi.pak
Delete $INSTDIR\locales\fil.pak
Delete $INSTDIR\locales\fr.pak
Delete $INSTDIR\locales\gu.pak
Delete $INSTDIR\locales\he.pak
Delete $INSTDIR\locales\hi.pak
Delete $INSTDIR\locales\hr.pak
Delete $INSTDIR\locales\hu.pak
Delete $INSTDIR\locales\id.pak
Delete $INSTDIR\locales\it.pak
Delete $INSTDIR\locales\ja.pak
Delete $INSTDIR\locales\kn.pak
Delete $INSTDIR\locales\ko.pak
Delete $INSTDIR\locales\lt.pak
Delete $INSTDIR\locales\lv.pak
Delete $INSTDIR\locales\ml.pak
Delete $INSTDIR\locales\mr.pak
Delete $INSTDIR\locales\ms.pak
Delete $INSTDIR\locales\nb.pak
Delete $INSTDIR\locales\nl.pak
Delete $INSTDIR\locales\pl.pak
Delete $INSTDIR\locales\pt-BR.pak
Delete $INSTDIR\locales\pt-PT.pak
Delete $INSTDIR\locales\ro.pak
Delete $INSTDIR\locales\ru.pak
Delete $INSTDIR\locales\sk.pak
Delete $INSTDIR\locales\sl.pak
Delete $INSTDIR\locales\sr.pak
Delete $INSTDIR\locales\sv.pak
Delete $INSTDIR\locales\sw.pak
Delete $INSTDIR\locales\ta.pak
Delete $INSTDIR\locales\te.pak
Delete $INSTDIR\locales\th.pak
Delete $INSTDIR\locales\tr.pak
Delete $INSTDIR\locales\uk.pak
Delete $INSTDIR\locales\ur.pak
Delete $INSTDIR\locales\vi.pak
Delete $INSTDIR\locales\zh-CN.pak
Delete $INSTDIR\locales\zh-TW.pak
Delete $INSTDIR\resources\app\index.html
Delete $INSTDIR\resources\app\LICENSE.md
Delete $INSTDIR\resources\app\main.js
Delete $INSTDIR\resources\app\package.json
Delete $INSTDIR\resources\app\preload.js
Delete $INSTDIR\resources\app\renderer.js
Delete $INSTDIR\resources\app\styles.css
Delete $INSTDIR\resources\app\assets\app-icon\mac\b.icns
Delete $INSTDIR\resources\app\assets\app-icon\win\b.ico
RMDir "$INSTDIR\locales"
RMDir "$INSTDIR\resources\app\assets\app-icon\mac"
RMDir "$INSTDIR\resources\app\assets\app-icon\win"
RMDir "$INSTDIR\resources\app\assets\app-icon"
RMDir "$INSTDIR\resources\app\assets"
RMDir "$INSTDIR\resources\app"
点击实心闪电图标编译脚本(Ctrl+Shift+B),生成安装包(文件较多,多等一会)
8.安装卸载一下做好的安装包
安装包生成完毕后,直接运行,点击 Next>,点击Install,点击Close
然后我们会在设置-应用-应用和功能-应用和功能-搜索"Example2",找到安装完的应用
或者运行命令打开"appwiz.cpl"(控制面板),搜索"Example2",找到安装完的应用
选中"NSIS Example2",点击"卸载按钮"即可卸载