关于 Electron
Electron是由Github开发，用HTML，CSS和JavaScript来构建跨平台桌面应用程序的一个开源库。 Electron通过将Chromium和Node.js合并到同一个运行时环境中，并将其打包为Mac，Windows和Linux系统下的应用来实现这一目的。
Electron打包工具
常用的打包工具有：electron-packager、electron-builder、grunt-electron-installer。
但是通过这些工具打包出来的APP，安装的时候会安装到默认目录下，不能指定安装目录。对于Mac来说是很正常，但是对于Windows用户来说就有点接受不了。接下来我给大家介绍一下，针对Windows自定义安装路径的方法。
自定义安装路径
1.安装asar
$ npm install asar
2.打包asar文件
$ asar pack 项目路径 app.asar
然后你会发现在你的项目的同级目录下多了一个app.asar文件。
3.下载electron压缩包
到官网下载electron的Windows版压缩包，然后解压这个压缩包，把app.asar文件放入解压文件夹的resources目录。
4.修改名称和图标
找到解压文件目录下的electron.exe，直接修改成你的应用名称。然后使用ResourceHacker软件替换你成应用图标，如下所示：
替换前
替换后
5.使用NSIS打包
下面是我写的一个NSIS脚本，你也可以替换其中的变量后直接使用：
; 安装程序初始定义常量
!define PRODUCT_NAME "云报价"
!define PRODUCT_VERSION "2.0.0"
!define PRODUCT_PUBLISHER "刘武昌"
!define PRODUCT_WEB_SITE "https://www.jianshu.com/u/1d53b932d536"
!define PRODUCT_UNINST_KEY "Software\Microsoft\Windows\CurrentVersion\Uninstall\${PRODUCT_NAME}"
!define PRODUCT_UNINST_ROOT_KEY "HKLM"
SetCompressor lzma
; ------ MUI 现代界面定义 (1.67 版本以上兼容) ------
!include "MUI.nsh"
; MUI 预定义常量
!define MUI_ABORTWARNING
!define MUI_ICON "E:\云报价\云报价\图标\icon_cloud_logo.ico"
!define MUI_UNICON "${NSISDIR}\Contrib\Graphics\Icons\modern-uninstall.ico"
; 欢迎页面
!insertmacro MUI_PAGE_WELCOME
; 安装目录选择页面
!insertmacro MUI_PAGE_DIRECTORY
; 安装过程页面
!insertmacro MUI_PAGE_INSTFILES
; 安装完成页面
!insertmacro MUI_PAGE_FINISH
; 安装卸载过程页面
!insertmacro MUI_UNPAGE_INSTFILES
; 安装界面包含的语言设置
!insertmacro MUI_LANGUAGE "SimpChinese"
; 安装预释放文件
!insertmacro MUI_RESERVEFILE_INSTALLOPTIONS
; ------ MUI 现代界面定义结束 ------
Name "${PRODUCT_NAME} ${PRODUCT_VERSION}"
OutFile "云报价.exe"
InstallDir "$PROGRAMFILES\云报价"
ShowInstDetails show
ShowUnInstDetails show
Section "MainSection" SEC01
SetOutPath "$INSTDIR\*.*"
SetOverwrite on
File /r "..\云报价-window-32\*.*"
SectionEnd
Section -AdditionalIcons
SetOutPath $INSTDIR
WriteIniStr "$INSTDIR\${PRODUCT_NAME}.url" "InternetShortcut" "URL" "${PRODUCT_WEB_SITE}"
CreateDirectory "$SMPROGRAMS\云报价"
CreateShortCut "$SMPROGRAMS\云报价\Website.lnk" "$INSTDIR\${PRODUCT_NAME}.url"
CreateShortCut "$SMPROGRAMS\云报价\Uninstall.lnk" "$INSTDIR\uninst.exe"
CreateShortCut "$DESKTOP\${PRODUCT_NAME}.lnk" "$INSTDIR\云报价.exe"
SectionEnd
Section -Post
WriteUninstaller "$INSTDIR\uninst.exe"
WriteRegStr ${PRODUCT_UNINST_ROOT_KEY} "${PRODUCT_UNINST_KEY}" "DisplayName" "$(^Name)"
WriteRegStr ${PRODUCT_UNINST_ROOT_KEY} "${PRODUCT_UNINST_KEY}" "UninstallString" "$INSTDIR\uninst.exe"
WriteRegStr ${PRODUCT_UNINST_ROOT_KEY} "${PRODUCT_UNINST_KEY}" "DisplayVersion" "${PRODUCT_VERSION}"
WriteRegStr ${PRODUCT_UNINST_ROOT_KEY} "${PRODUCT_UNINST_KEY}" "URLInfoAbout" "${PRODUCT_WEB_SITE}"
WriteRegStr ${PRODUCT_UNINST_ROOT_KEY} "${PRODUCT_UNINST_KEY}" "Publisher" "${PRODUCT_PUBLISHER}"
SectionEnd
/******************************
* 以下是安装程序的卸载部分 *
******************************/
Section Uninstall
Delete "$INSTDIR\${PRODUCT_NAME}.url"
Delete "$INSTDIR\uninst.exe"
Delete "$SMPROGRAMS\云报价\Uninstall.lnk"
Delete "$SMPROGRAMS\云报价\Website.lnk"
Delete "$DESKTOP\${PRODUCT_NAME}.lnk"
RMDir "$SMPROGRAMS\云报价"
RMDir /r "$INSTDIR\*.*"
RMDir "$INSTDIR"
DeleteRegKey ${PRODUCT_UNINST_ROOT_KEY} "${PRODUCT_UNINST_KEY}"
SetAutoClose true
SectionEnd
#-- 根据 NSIS 脚本编辑规则，所有 Function 区段必须放置在 Section 区段之后编写，以避免安装程序出现未可预知的问题。--#
Function un.onInit
MessageBox MB_ICONQUESTION|MB_YESNO|MB_DEFBUTTON2 "您确实要完全移除 $(^Name) ，及其所有的组件？" IDYES +2
Abort
FunctionEnd
Function un.onUninstSuccess
HideWindow
MessageBox MB_ICONINFORMATION|MB_OK "$(^Name) 已成功地从您的计算机移除。"
FunctionEnd
6.效果演示
网友评论