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 相关文章推荐
Javascript客户端脚本的设计和应用
Aug 21 Javascript
javascript 动态数据下的锚点错位问题解决方法
Dec 24 Javascript
url 编码 js url传参中文乱码解决方案
Apr 11 Javascript
用js模拟JQuery的show与hide动画函数代码
Sep 20 Javascript
使用js 设置url参数
Jul 08 Javascript
js下将阿拉伯数字每三位一逗号分隔(如:15000000转化为15,000,000)
Jun 02 Javascript
js+jquery常用知识点汇总
Mar 03 Javascript
学习JavaScript设计模式之单例模式
Jan 19 Javascript
详解angular2实现ng2-router 路由和嵌套路由
Mar 24 Javascript
JS实现判断图片是否加载完成的方法分析
Jul 31 Javascript
Vue编写可显示周和月模式的日历 Vue自定义日历内容的显示
Jun 26 Javascript
编写v-for循环的技巧汇总
Dec 01 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
PHP5中MVC结构学习
2006/10/09 PHP
PHP以指定字段为索引返回数据库所取的数据数组
2013/06/30 PHP
PHP正则表达式入门教程(推荐)
2016/05/18 PHP
Laravel框架实现多个视图共享相同数据的方法详解
2019/07/09 PHP
学习JavaScript的最佳方法分享
2011/10/21 Javascript
jquery js 重置表单 reset()具体实现代码
2013/08/05 Javascript
Firefox下无法正常显示年份的解决方法
2014/09/04 Javascript
JavaScript将当前时间转换成UTC标准时间的方法
2015/04/06 Javascript
jQuery form插件之formDdata参数校验表单及验证后提交
2016/01/23 Javascript
原生JS实现垂直手风琴效果
2017/02/19 Javascript
微信小程序 五星评分的实现实例
2017/08/04 Javascript
jquery 输入框查找关键字并提亮颜色的实例代码
2018/01/23 jQuery
让 babel webpack vue 配置文件支持智能提示的方法
2019/06/22 Javascript
js实现烟花特效
2020/03/02 Javascript
使用next.js开发网址缩短服务的方法
2020/06/17 Javascript
echarts实现晶体球面投影的实例教程
2020/10/10 Javascript
Python中的列表知识点汇总
2015/04/14 Python
介绍Python的Urllib库的一些高级用法
2015/04/30 Python
python内存动态分配过程详解
2019/07/15 Python
Python2与Python3的区别详解
2020/02/09 Python
selenium+python配置chrome浏览器的选项的实现
2020/03/18 Python
python不同系统中打开方法
2020/06/23 Python
Python钉钉报警及Zabbix集成钉钉报警的示例代码
2020/08/17 Python
python matplotlib绘制三维图的示例
2020/09/24 Python
使用Html5多媒体实现微信语音功能
2019/07/26 HTML / CSS
卡西欧G-SHOCK英国官网: 防水防震手表
2018/01/08 全球购物
Furla官网:意大利著名的皮革品牌
2019/08/06 全球购物
党的群众路线教育实践活动心得体会900字
2014/03/07 职场文书
预备党员个人总结
2015/02/14 职场文书
2015年社区创卫工作总结
2015/04/21 职场文书
志愿者服务活动总结报告
2015/05/06 职场文书
2015年预防青少年违法犯罪工作总结
2015/05/22 职场文书
整脏治乱工作简报
2015/07/21 职场文书
2016党风廉政建设心得体会范文
2016/01/25 职场文书
Win11开始菜单添加休眠选项
2022/04/19 数码科技
SpringBoot项目部署到阿里云服务器的实现步骤
2022/06/28 Java/Android