Vue+Electron学习系列 (二) -- 打包发布

 Vue+Electron学习系列

​​​​​​​1️⃣Vue+Electron学习系列 (一) -- 初识​​​​​​​

2️⃣ Vue+Electron学习系列 (二) -- 打包发布

3️⃣ Vue+Electron学习系列 (三) -- 自动更新

4️⃣ Vue+Electron学习系列 (四) -- 自动更新进阶

---

根目录下增加vue.config.js(后期所有build相关的参数都在此设置)

// vue.config.js 初始配置如下：
module.exports = {
  pluginOptions: {
    electronBuilder: {
      builderOptions: {
        appId: "com.example.app",
        productName: "aDemo", //项目名，也是生成的安装文件名，即aDemo.exe
        copyright: "Copyright © 2019", //版权信息
        directories: {
          output: "./dist" //输出文件路径
        },
        win: {
          //win相关配置
          icon: "./icon.ico", //图标，当前图标在根目录下，注意这里有两个坑
          target: [
            {
              target: "nsis", //利用nsis制作安装程序
              arch: [
                "x64", //64位
                "ia32" //32位
              ]
            }
          ]
        },
        nsis: {
          oneClick: false,
          allowElevation: true,
          allowToChangeInstallationDirectory: true,
          installerIcon: "./icon.ico",
          uninstallerIcon: "./icon.ico",
          installerHeaderIcon: "./icon.ico",
          createDesktopShortcut: true,
          createStartMenuShortcut: true,
          shortcutName: "demo"
        }
      }
    }
  }
};

常见问题处理

问题1：cannot execute file does not exist

解决方法：离线下载特定扩展，解压至对应的相关目录即可。扩展下载

问题2：无效图标 invalid icon file

解决方法：

在线图标icon转换

参考官方icon参数要求：详细参数

icon图标基础要求如下(更多要求请参考electron官网)：

window(NSIS)：

应用图标：icon.ico | icon.png (建议最好使用icon.ico) : 大小最少为: 256*256.

macOS:

应用图标：icon.icns | icon.png (建议最好使用icon.icns): 大小最少为 512*512;

DMG背景： background.png

DNG Retina背景：background@2x.png

Linux:

基于macOS icns文件或common自动生成icon.png: 文件中必须包含256*256.png

 问题3：关于electron-builder打包包体过大问题

解决方法：

可使用yarn自动清洁(慎用！！！)
// 从程序包依赖项中清除并删除不必要的文件
// 该autoclean命令通过从依赖项中删除不必要的文件和文件夹来释放空间。它减少了项目
// node_modules文件夹中的文件数，这在将包直接检入版本控制的环境中很有用。
// 注意：仅在高级用例中考虑此命令。除非您遇到一部分安装问题，否则node_modules不建
// 议使用此命令。它将永久删除node_modules可能导致程序包停止工作的文件。
// 自动清楚功能默认是禁用的。

yarn autoclean --init  //创建.yarnclean文件
yarn autoclean --force

/**
* autoclean命令： yarn autoclean [-I/--init] [-F/--force]
* -I/--init：
*     # 创建.yarnclean文件（如果文件不存在），并添加默认条目。然后应检查并编辑此
*     # 文件以自定义要清除的文件。如果文件已经存在，则不会被覆盖。
* -F/--force：
*     # 如果.yarnclean文件存在，请运行清理过程。如果该文件不存在，则不执行任何操作。
*
*/ 

// 打包exe时注意选择window系统指定位数：32位/64位(可减少一半的包体)