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：

解决方法：

离线下载特定扩展，解压至对应的相关目录即可扩展下载地址

问题2：无效图标 invalid icon file

解决方法：

在线图标icon转换
 build-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背景：[email protected]

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位(可减少一半的包体)

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

猜你喜欢