之前重写的 Send2Flomo 用到了 electron 更新相关的功能,既然更新是自动的了,那么发布能不能也自动化呢?我之前都是手动将包上传至 GitHub Releases,也是一件比较繁琐的事情。然后在网上一番查找,并且经过多次的试验之后,终于成功了。

我一开始使用的是 CI,因为我的应用只运行在 Mac 环境下,所以我使用的是 AppVeyor,一开始我没仔细看,照着网上的教程配置了老半天 Travis-CI,最后在控制台看报错信息的时候发现 Windows 的目录,然后再一看教程,这个是专门针对 Windows 环境打包的,AppVeyor 才是 Linux 跟 Mac OS 的,于是又重新配置了一遍。发布也成功了,但是最后发现,其他环境下打包是没有签名的,因为签名在我自己开发的电脑上。为什么需要签名呢?因为只有签名了的应用才能自动安装更新。

网上搜了很多资料,还是没解决,最后打算使用 electron-builder 配置来自动上传。

我的打包配置项写在 vue.config.js 中,有些可能写在 package.json 中,这都不是大问题,反正将配置都写在一个地方就行,我的配置如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// vue.config.js
module.exports = {
// ...其他配置项
pluginOptions: {
publish: {
provider: 'github',
repo: 'kindle2Flomo', // git仓库
owner: 'Tit1e', // 拥有者
releaseType: 'release',
vPrefixedTagName: false,
publishAutoUpdate: true // 发布自动更新(需要配置GH_TOKEN)。 默认true
}
}
// ...其他配置项
}

发布的配置项配置完了之后,还需要配置 GH_TOKEN。这个 token 是用来授权一些权限的,因为要往你的私人仓库上传文件,所以必须有相应的权限。

GH_TOKEN 可以在这里生成 https://github.com/settings/tokens/new

输入 token 的备注,选择有效期,我选择的是永不过期,最后将 repo 选上,拉到最底下生成 token。

⚠️ 注意:token 只在生成完成时候显示一次,关闭网页之后就无法再查看,所以及时保存至其他地方。当然真的忘了,那就删了重新生成一个。

生成完需要将 GH_TOKEN 添加到环境变量中去,当然你可以在你执行打包命令的终端中临时添加:

1
export GH_TOKEN="YOUR_TOKEN"

先执行上面的命令,然后执行打包命令。而加到系统变量中就免去了这一步的麻烦。

1
sudo vim ~/.bash_profile

然后在文件中添加:

1
2
3
export GH_TOKEN="YOUR_TOKEN"
# 下面这个变量我是多加的
export GITHUB_TOKEN="YOUR_TOKEN"

添加完之后去执行打包命令,最后会发现还是找不到 GH_TOKEN,在网上查了之后,发现是终端加载的是 ~/.zshrc 文件,而在这个文件中没有定义任务环境变量,因此我们需要在这个文件中加入一句:

1
source ~/.bash_profile

网上说这句要加在最后一行,但是我加在最后不行,就加在了稍微前面一点,也可以正常运行。

所以我在想是不是直接在 ~/.zshrc 中定义变量,就不用执行 source ~/.bash_profile 了?不过最后我没有尝试。

⚠️ 除了这些别忘了还需要开发者的证书,证书的生成教程网上有很多,查一下就行。

最后,在 package.json 中加入一条新命令:

1
"electron:publish": "vue-cli-service electron:build --publish always"

执行上面这条命令,正常情况下会先执行打包流程,打包完成后可以在终端看到文件上传的进度。

等终端执行完毕,去 GitHub 的 Releases 页面,就会看到一个新的 releases 草稿,之后你就可以编辑更新信息,或者直接发布了。