Artiely
  • Electron 自动更新
  • Artiely
  • #electron#vue
  • 2020-03-18
  • 326
  • 2 min read
  • loading...

Electron 自动更新

从0实现一个electron自动更新的最小demo

本实例基于vue，不使用vue也大同小异，目的只是在后期更加的方便使用组件库，有差异的地方我会指出。

初始化一个vue项目 

# 初始化项目，前面的vue脚手架环境安装忽略
vue create electron-updater-demo
# 中间的流程略
cd electron-updater-demo
npm i
# 安装 electron-builder 插件

vue add electron-builder

# 如果你不是使用的vue 可以直接`npm i electron-builder`安装 

# 运行
npm run electron:serve

复制成功
1
2
3
4
5
6
7
8
9
10
11
12
13

项目结构 

├──public
│ ├──favicon.ico
│ └──index.html
├──src
│ ├──assets
│ │ └──logo.png
│ ├──components
│ │ └──HelloWorld.vue
│ ├──App.vue
│ ├──background.js
│ └──main.js
├──.browserslistrc
├──.gitignore
├──babel.config.js
├──package-lock.json
├──package.json
├──README.md
└──vue.config.js

复制成功
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

输出结构的工具推荐 npm i treeplus 使用方法

修改app.vue

这里的目的是清晰的暂时当前版本号。




 




 





 





<template>
  <div id="app">
   这是一个版本更新测试：Artiely
   <p>当前版本：{{version}}</p>
  </div>
</template>

<script>
const {version} = require('../package.json')
console.log("version", version)
export default {
  name: 'App',
  data(){
    return {
      version
    }
  }
}
</script>

复制成功
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

安装依赖并修改background.js 

npm i electron-updater

复制成功
1

background.js

+ import { autoUpdater } from "electron-updater"

  if (process.env.WEBPACK_DEV_SERVER_URL) {
    // Load the url of the dev server if in development mode
    win.loadURL(process.env.WEBPACK_DEV_SERVER_URL)
    if (!process.env.IS_TEST) win.webContents.openDevTools()
  } else {
    createProtocol('app')
    // Load the index.html when not in development
    win.loadURL('app://./index.html')
+   autoUpdater.checkForUpdatesAndNotify()
  }


复制成功
1
2
3
4
5
6
7
8
9
10
11
12
13

通过github实现包的发布

GitHub的个人访问令牌

此步骤需要一个GitHub个人访问令牌。要获取一个，请访问https://github.com/settings/tokens并单击Generate new token。

为了使Electron Builder将发行版本上传到GitHub，您需要通过将GH_TOKENenv变量设置为令牌来使令牌可用：

在Linux / MacOS上：

export GH_TOKEN=TOKEN-GOES-HERE

复制成功
1

在Windows上：

[Environment]::SetEnvironmentVariable("GH_TOKEN","<YOUR_TOKEN_HERE>","User")

# 例如 [Environment]::SetEnvironmentVariable("GH_TOKEN","587f5a354934f73b8336d81d0168423075f37833","User")

复制成功
1
2
3

TIP

注意设置完环境变量后一定要重启你的编辑器或者powershell以便让环境变量生效

配置vue.config.js 

module.exports = {
	pluginOptions: {
		electronBuilder: {
			builderOptions: {
				publish: [
					{
						provider: 'github',
						owner: 'artiely',
						repo: 'electron-updater-demo'
						// token: '587f5a354934f73b8336d81d0168423075f37833'
					}
				]
			}
		}
	}
};

复制成功
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

TIP

如果不是vue项目可以直接再package.json文件中加入如下内容，参数基本一致

build:{
  publish:[]
}

复制成功
1
2
3

build参数讲解 

{
  publish:[
  // giuhub
  {// 供应商
    provider:'github',
    // 项目名
    repo:'electron-updater-demo',
    // 拥有者
    owner: 'artiely',
    // 此处也可以填写token但是不建议使用，你的token会有泄漏的风险，推荐使用上面环境变量的方式。
    // token: '587f5a354934f73b8336d81d0168423075f37833'
  },
  // 普通服务商
  {
    provider:'generic',
    url: 'https://bucket_name.s3.amazonaws.com'
  }
]
}


复制成功
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

供应商支持多种上面示例了最常见两种，本实例以github为例

发布版本到github 

npm run electron:build -- -p always

复制成功
1

发布打包时很慢的解决办法

在发布的时候可能会遇到一直 dwonloading 一些资源下载不下来的问题。
在downloading后面会有一个链接，点击链接将内容下载到本地

windows系统进入到C:\Users\Administrator\AppData\Local\electron-builder\Cache资源管理目录
新建文件夹

将下载的名称相匹配的放入对应的文件解压

再次执行

npm run electron:build -- -p always

复制成功
1

另一个新的资源下载也很慢，同样的方法，把他们都加入缓存，下次打包就直接走缓存了，会非常的快。

发布

发布github成功后会在release多一个草稿，点击edit并发布，他将会会变成最后的稳定版

下载

修改版本号再次发布

修改package.json的版本号再次重复上面的步骤。
再次打开下载的app，会通知你有更新，并且在你下次打开时更新。

后续

我们会发现这个更新很简陋，后面我们会自定义优化的提示信息，下载进度等。

©Artiely -2019-2021