electron 分环境打包与更新--- theme: condensed-night-purple --- 持续创作，

持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第29天，点击查看活动详情

前言

electron是一个跨平台的桌面端框架，主进程支持node，界面支持html，是一款非常优秀的框架，当web+硬件及系统底层api的时候，所带来的效果通常不是一加一那么简单，本文将会以vue项目为例，讲解打包构建与预发、生产环境在线更新

自动更新

自动更新的实现我们采用一个非常成熟的库electron-updater,相比electron原生提供的更新API，electron-updater封装实现更为优雅，实现在线远程更新更为方便

// 引入自动更新实例
import { autoUpdater } from 'electron-updater'
// 设置自动下载为false，避免自动下载完成直接更新导致业务数据丢失
autoUpdater.autoDownload = false
// 设置拉取远程更新的地址  注意 之后这里会根据生产和预发env变量做不同的处理
autoUpdater.setFeedURL('https://xx.com/xx/')
// 执行自动更新检查
autoUpdater.checkForUpdates()
// 下载更新
autoUpdater.downloadUpdate()
// 退出并安装更新
autoUpdater.quitAndInstall()

构建打包的一些配置【以vue2为例】

在vue.config.js中，通过pluginOptions配置项配置electronBuilder,这里主要是配置一些打包时资源的地址，系统级权限的授权等

pluginOptions: {
    electronBuilder: {
      builderOptions: {
        productName: '产品名称',
        appId: 'com.xx.app',
        asar: true, // 是否asar加密
        files: ['**/*'], 包含的文件
        nsis: {
          oneClick: false, // 是否一键安装
          allowElevation: true, // 允许请求提升。 如果为false，则用户必须使用提升的权限重新启动安装程序。
          allowToChangeInstallationDirectory: true, // 允许修改安装目录
          installerIcon: './public/app.ico', // 安装图标
          uninstallerIcon: './public/app.ico', // 卸载图标
          installerHeaderIcon: './public/app.ico', // 安装时头部图标
          shortcutName: '千云 · 下载工具', // 图标名称
          createDesktopShortcut: true,
          createStartMenuShortcut: true
        },
        win: {
          icon: './public/app.ico',
          // eslint-disable-next-line no-template-curly-in-string
          artifactName: 'xx_dl_setup.${ext}', // 打出来的安装包的名字
          target: [
            {
              target: 'nsis', // 构建工具
              arch: [ // 这个意思是打出来32 bit + 64 bit的包，但是要注意：这样打包出来的安装包体积比较大，所以建议直接打32的安装包。
                'x64',
                'ia32'
              ]
            }
          ]
        },
        mac: {
          icon: './public/app.png'
        },
        publish: [
          {
            provider: 'generic',
            url: 'https://xx.com/download/' // 放置安装包和latest.yml的服务器地址
          }
        ]
      },
      chainWebpackMainProcess: (config) => {
        config.output.filename('background.js') // 解决 运行 yarn run electron:serve 报[DEP0128] DeprecationWarning: Invalid 'main' field in '\dist_electron\package.json' of 'background.js'.
      }
    }
  },

分环境打包

分环境打包首先就是需要在env文件中建立对应的环境变量

// .env.pre
VUE_APP_ENV = 'PRE'
// .env.pro
VUE_APP_ENV = 'PRO'

然后在package.json的script中分别声明对应的打包命令

"electron:build-pre": "vue-cli-service electron:build --mode pre",
"electron:build": "vue-cli-service electron:build",

接着就是要在vue.config.js内根据环境变量处理安装包名，更新路径等信息

 artifactName: process.env.VUE_APP_ENV === 'PRE' ? 'xx_test_setup.${ext}' : 'xx_setup.${ext}',

最后的最后，千万不要忘记设置autoUpdate的远程地址规则

const feedURL = process.env.VUE_APP_ENV === 'PRE' ? 'https://xx.com/im/test/' : 'https://xx.com/im/'
  autoUpdater.setFeedURL(feedURL)

写在最后

electron帮助我们做了大量兼容性的内容，我们只需要关注两点 1. 系统是32还是64位系统 2. electron有一些特定的API不支持，需要进行hack即可。