Electron实现应用打包、自动升级过程解析


Posted in Javascript onJuly 07, 2020

上次成功搭建了vue + electron的helloworld程序,这次将electron应用打包及自动升级的流程梳理了一下。

1. 应用打包

使用electron builder打包只需要在vue.config.js中配置即可,这里需要注意的是,默认情况下electron builder打包出来的安装程序是不能修改安装目录的,需要allowToChangeInstallationDirectory这个配置设置为true。

// see https://cli.vuejs.org/config
module.exports = {
 productionSourceMap: false,
 pluginOptions: {
  electronBuilder: {
   nodeIntegration: true,
   builderOptions: {
    appId: 'com.itqn.electron.helloworld',
    productName: 'helloworld',
    // see https://www.electron.build/configuration/publish#genericserveroptions
    publish: {
     provider: 'generic',
     url: 'http://192.168.1.100/itqn/electron/helloworld'
    },
    win: {
     // must be at least 256x256
     icon: './public/favicon.ico'
    },  
    asar: false,
    nsis: {
     oneClick: false,
     // 允许修改安装目录
     allowToChangeInstallationDirectory: true, 
     allowElevation: true,
     createDesktopShortcut: true,
     createStartMenuShortcut: true,
     shortcutName: 'helloworld'
    }
   }
  },
  configureWebpack: {
   resolve: {
    symlinks: true
   }
  }
 }
}

接着执行下面的命令进行应用打包

npm run electron:build

如果成功打包,将为在项目的dist_electron目录中生成对应的exe。

打包过程中可能出现favicon.icon must be at least 256x256的错误,这里需要在网上用工具将icon转化为256x256的即可。

2. 自动升级

使用electron的自动升级功能,需要安装electron-updater这个依赖,这里只是开发时用到,所以使用-D安装。

npm install electron-updater -D

编写更新程序update.js

import { dialog } from 'electron'
import { autoUpdater } from 'electron-updater'
import http from 'http'

// see https://www.electron.build/auto-update#events
autoUpdater.on('update-downloaded', info => {
 if (process.env.NODE_ENV === 'production') {
  // https://electronjs.org/docs/api/auto-updater#autoupdaterquitandinstall
  // 这里先拉取更新信息,在对话框中显示版本的更新内容
  const req = http.request('http://192.168.1.3/itqn/electron/helloworld/info.txt', req => {
   let detail = ''
   req.setEncoding('utf-8')
   req.on('data', chunk => {
    detail += chunk.toString()
   })
   req.on('end', () => {
    dialog.showMessageBox(
     {
      icon: __static + '/favicon.png',
      type: 'info',
      title: '软件更新',
      message: `已更新到最新版本(${info.version})请重启应用。`,
      detail: detail,
      buttons: ['确定']
     },
     idx => {
      // 点击确定的时候执行更新
      if (idx === 0) {
       autoUpdater.quitAndInstall()
      }
     }
    )
   })
  })
  req.end()
 }
})
export default autoUpdater

然后在程序启动的时候进行版本检测,如果有新版会自动更新。

在background.js中引入update.js,并在ready事件中检测版本。

import autoUpdater from './update'
app.on('ready', async () => {
 // 这里只在生产环境才执行版本检测。
 if (process.env.NODE_ENV === 'production') {
  autoUpdater.checkForUpdates()
 }
 createWindow()
})

这样,Electron桌面应用程序就支持在线自动更新了,下面将使用nginx进行自动更新测试。

3. 升级测试

默认情况下,创建应用的版本为0.1.0,这里测试应用从0.1.0自动升级为0.1.1。

安装 0.1.0 版本

为了测试应用自动更新,需要在本地安装一个0.1.0版本,将应用打包成exe,然后安装在自己的电脑上。

升级版本为 0.1.1

将应用升级为 0.1.1 版本,只需要将package.json中的版本号更新为0.1.1即可。

{
 "name": "electron-helloworld",
 "version": "0.1.1",
}

这里为了测试方便,可以在Helloworld.vue中加入版本,或者读取应用版本号。

<div>{{txt}}</div>
<button @click="readTxt">读取文件信息</button>
<div>v0.1.1</div>

重新打包应用,打包成功后dist_electron目录中会多出几个文件,下面这三个是升级需要用到的:

helloworld Setup 0.1.1.exe
helloworld Setup 0.1.1.exe.blockmap
latest.yml

发布新版本 0.1.1

新版本打包后需要发布到服务器中,这里可以使用nginx做为服务器。

需要注意的是,应用程序中指定的服务器更新地址为:

http://192.168.1.3/itqn/electron/helloworld

所以必须将应用发布到这里,才能实现自动升级(这里我使用的是本地IP,实际使用应该是用域名)。

使用nginx作为服务器,需要在本地安装nginx,可以在官网下载nginx,解压即可。

修改nginx的配置conf/nginx.conf

http {
 server {
  listen 80;
  location / {
   root D:/nginx/www;
  }
 }
}

这里指定了nginx的root为D:/nginx/www,所以需要在www这个目录下创建itqn/electron/helloworld这个目录,最终的目录路径为:

D:\nginx\www\itqn\electron\helloworld

将新版本打包的三个文件放到helloworld这个目录中,然后新增一个info.txt文件编写更新内容,最后helloworld目录下的文件如下:

helloworld Setup 0.1.1.exe
helloworld Setup 0.1.1.exe.blockmap
latest.yml
info.txt

启动nginx服务器

start nginx.exe

如果服务启动正常,通过浏览器访问<http://192.168.1.3/itqn/electron/helloworld/info.txt>将可以看到更新内容。

最后启动已经安装好0.1.0程序。

Electron实现应用打包、自动升级过程解析

可以看到程序启动后,弹出了新版本的更新内容,这里点击确定执行更新,更新成功后会自动重启应用。

下面是更新后的界面,可以看到应用已经更新到了最新版本0.1.1。

Electron实现应用打包、自动升级过程解析

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js 匿名调用实现代码
Jun 19 Javascript
JQuery 图片延迟加载并等比缩放插件
Nov 09 Javascript
HTML颜色选择器实现代码
Nov 23 Javascript
如何判断元素是否为HTMLElement元素
Dec 06 Javascript
JavaScript与HTML的结合方法详解
Nov 23 Javascript
jQuery随手笔记之常用的jQuery操作DOM事件
Nov 29 Javascript
BootStrap创建响应式导航条实例代码
May 31 Javascript
在js里怎么实现Xcode里的callFuncN方法(详解)
Nov 05 Javascript
Vue实现选择城市功能
May 27 Javascript
JavaScript基于面向对象实现的猜拳游戏
Jan 03 Javascript
小程序如何支持使用 async/await详解
Sep 12 Javascript
Vue通过配置WebSocket并实现群聊功能
Dec 31 Javascript
基于Electron实现桌面应用开发代码实例
Jul 07 #Javascript
基于javascript处理nginx请求过程详解
Jul 07 #Javascript
vue-i18n实现中英文切换的方法
Jul 06 #Javascript
vue 实现动态路由的方法
Jul 06 #Javascript
Nuxt配置Element-UI按需引入的操作方法
Jul 06 #Javascript
解决Nuxt使用axios跨域问题
Jul 06 #Javascript
js实现星星打分效果
Jul 05 #Javascript
You might like
PHP编码规范-php coding standard
2007/03/16 PHP
php格式化金额函数分享
2015/02/02 PHP
Maps Javascript
2007/01/22 Javascript
20款超赞的jQuery插件 Web开发人员必备
2011/02/26 Javascript
常见效果实现之返回顶部(结合淡入、淡出、减速滚动)
2012/01/04 Javascript
Javascript 拖拽的一些简单的应用(逐行分析代码,让你轻松了拖拽的原理)
2015/01/23 Javascript
JavaScript通过join函数连接数组里所有元素的方法
2015/03/20 Javascript
JavaScript实现对下拉列表值进行排序的方法
2015/07/15 Javascript
JavaScript类型系统之布尔Boolean类型详解
2016/06/26 Javascript
运用js教你轻松制作html音乐播放器
2020/04/17 Javascript
vue.js使用v-pre与v-html输出HTML操作示例
2018/07/07 Javascript
详解vue-cli3使用
2018/08/14 Javascript
Vue项目History模式404问题解决方法
2018/10/31 Javascript
VUE前后端学习tab写法实例
2019/08/06 Javascript
ES6基础之 Promise 对象用法实例详解
2019/08/22 Javascript
解决layui的form里的元素进行动态生成,验证失效的问题
2019/09/14 Javascript
js实现删除json中指定的元素
2020/09/22 Javascript
[58:11]守擂赛第二周擂主赛 DeMonsTer vs Leopard
2020/04/28 DOTA
python3+PyQt5实现支持多线程的页面索引器应用程序
2018/04/20 Python
详解Python3 pandas.merge用法
2019/09/05 Python
Python中的上下文管理器相关知识详解
2019/09/19 Python
python zip()函数使用方法解析
2019/10/31 Python
Python一行代码解决矩阵旋转的问题
2019/11/30 Python
使用Python爬虫库requests发送表单数据和JSON数据
2020/01/25 Python
Python OpenCV读取显示视频的方法示例
2020/02/20 Python
python实现吃苹果小游戏
2020/03/21 Python
Python项目跨域问题解决方案
2020/06/22 Python
NEW LOOK官网:英国时装零售巨头之一,快时尚品牌
2017/01/11 全球购物
西班牙香水和化妆品购物网站:Arenal Perfumerías
2019/03/01 全球购物
Skyscanner香港:机票比价, 平机票和廉价航空机票预订
2020/02/07 全球购物
新年晚会主持词
2014/03/24 职场文书
监考失职检讨书
2015/01/26 职场文书
红色经典观后感
2015/06/18 职场文书
创作书写之导游词实用技巧分享(干货)
2019/12/20 职场文书
oracle数据库去除重复数据
2022/05/20 Oracle
Android开发手册自定义Switch开关按钮控件
2022/06/10 Java/Android