1、打包配置
在vue.config.js中
pluginOptions: {electronBuilder: {builderOptions: {win: {icon: './public/app.ico'},mac: {icon: './public/app.png'},productName: 'AppDemo'}}}
以上为配置图标和app的名字。
2、运行npm run electron:build
运行命令后，可能出现
app-builder-bin\win\x64\app-builder.exe exited with code ERR_ELECTRON_BUILDE（错误语句的局部）这个错误
找到electron和electron-builder的cache缓存记录文件夹
electron缓存资源地址：~/AppData/Local/electron/Cache
electron-builder缓存资源地址：~/AppData/Local/electron-builder/Cache根据错误提示手动下载资源包，在错误提示中，可以找到一个地址，拷贝这个地址输入浏览器地址栏进行下载。
可能要反复这个步骤，因为有多个包。
下载➡拷贝➡打包➡报错➡根据错误信息中的地址再下载➡拷贝➡打包下载完成后拷贝到相应的文件夹
对应的文件夹位置如图
3.1 electron文件存储方式
3.2 electron-builder文件存储方式
3.2.1 nsis文件存储方式
这里要把拷贝进来的nsis-3.0.4.1文件夹解压到当前文件夹的同名文件夹内
3.2.2 winCodeSign存储方式
3、打包完成后
在dist_electron目录下生成build后的产品
其实就win-unpacked和AppDemo Setup 0.1.0.exe有用。
其中win-unpacked文件夹为免安装文件夹，直接点击里面的.exe就可打开程序；
AppDemo Setup 0.1.0.exe为安装文件夹，点击之后进行安装。
4、安装时能够指定文件夹
点击AppDemo Setup 0.1.0.exe后，软件就自动安装到默认的位置去了。如何让用户手动选择安装位置
在vue.config.js中，pluginOptions下的electronBuilder下的builderOptions中
添加如下代码配置nsis
nsis: {oneClick: false,allowToChangeInstallationDirectory: true},
注意，在vue-cli-3后，打包的配置不再放到根目录的package.json当中的buidl选项中，放到vue.config.js的builderOptions下。
vue.config.js的pluginOptions中，nsis配置的位置如下：
pluginOptions: {electronBuilder: {builderOptions: {win: {icon: './public/app.ico'},mac: {icon: './public/app.png'},nsis: {oneClick: false,allowToChangeInstallationDirectory: true},productName: 'AppDemo'}}}
nsis全名为Nullsoft Scriptable Install System，是一个开源的 Windows 系统下安装程序制作程序。它提供了安装、卸载、系统设置、文件解压缩等功能。这如其名字所指出的那样，NSIS 是通过它的脚本语言来描述安装程序的行为和逻辑的。NSIS 的脚本语言和通常的编程语言有类似的结构和语法，但它是为安装程序这类应用所设计的。
nsis 键包含一组选项，指示 Electron-builder 如何构建 nsis 目标。 这些选项也适用于 Web 安装程序，使用顶级 nsisWeb 密钥。
一些nsis 配置项：
nsis: {oneClick: false, // 是否一键安装allowElevation: true, // 允许请求提升。 如果为false，则用户必须使用提升的权限重新启动安装程序。allowToChangeInstallationDirectory: true, // 允许修改安装目录installerIcon: "./build/icons/aaa.ico", // 安装图标uninstallerIcon: "./build/icons/bbb.ico", // 卸载图标installerHeaderIcon: "./build/icons/aaa.ico", // 安装时头部图标createDesktopShortcut: true, // 创建桌面图标createStartMenuShortcut: true, // 创建开始菜单图标shortcutName: "xxxx", // 图标名称include: "build/script/installer.nsh", // 包含的自定义nsis脚本 这个对于构建需求严格得安装过程相当有用。},
