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（错误语句的局部）这个错误

1. 找到electron和electron-builder的cache缓存记录文件夹
   electron缓存资源地址：~/AppData/Local/electron/Cache
   electron-builder缓存资源地址：~/AppData/Local/electron-builder/Cache
2. 根据错误提示手动下载资源包，在错误提示中，可以找到一个地址，拷贝这个地址输入浏览器地址栏进行下载。
   可能要反复这个步骤，因为有多个包。
   下载➡拷贝➡打包➡报错➡根据错误信息中的地址再下载➡拷贝➡打包
3. 下载完成后拷贝到相应的文件夹
   对应的文件夹位置如图
   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脚本 这个对于构建需求严格得安装过程相当有用。
        },