上次成功搭建了vue + electron的helloworld程序，這次將electron應(yīng)用打包及自動(dòng)升級(jí)的流程梳理了一下。

1. 應(yīng)用打包

使用electron builder打包只需要在vue.config.js中配置即可，這里需要注意的是，默認(rèn)情況下electron builder打包出來的安裝程序是不能修改安裝目錄的，需要allowToChangeInstallationDirectory這個(gè)配置設(shè)置為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
   }
  }
 }
}

接著執(zhí)行下面的命令進(jìn)行應(yīng)用打包

npm run electron:build

如果成功打包，將為在項(xiàng)目的dist_electron目錄中生成對(duì)應(yīng)的exe。

打包過程中可能出現(xiàn)favicon.icon must be at least 256x256的錯(cuò)誤，這里需要在網(wǎng)上用工具將icon轉(zhuǎn)化為256x256的即可。

2. 自動(dòng)升級(jí)

使用electron的自動(dòng)升級(jí)功能，需要安裝electron-updater這個(gè)依賴，這里只是開發(fā)時(shí)用到，所以使用-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
  // 這里先拉取更新信息，在對(duì)話框中顯示版本的更新內(nèi)容
  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}）請(qǐng)重啟應(yīng)用。`,
      detail: detail,
      buttons: ['確定']
     },
     idx => {
      // 點(diǎn)擊確定的時(shí)候執(zhí)行更新
      if (idx === 0) {
       autoUpdater.quitAndInstall()
      }
     }
    )
   })
  })
  req.end()
 }
})
export default autoUpdater

然后在程序啟動(dòng)的時(shí)候進(jìn)行版本檢測(cè)，如果有新版會(huì)自動(dòng)更新。

在background.js中引入update.js，并在ready事件中檢測(cè)版本。

import autoUpdater from './update'
app.on('ready', async () => {
 // 這里只在生產(chǎn)環(huán)境才執(zhí)行版本檢測(cè)。
 if (process.env.NODE_ENV === 'production') {
  autoUpdater.checkForUpdates()
 }
 createWindow()
})

這樣，Electron桌面應(yīng)用程序就支持在線自動(dòng)更新了，下面將使用nginx進(jìn)行自動(dòng)更新測(cè)試。

3. 升級(jí)測(cè)試

默認(rèn)情況下，創(chuàng)建應(yīng)用的版本為0.1.0，這里測(cè)試應(yīng)用從0.1.0自動(dòng)升級(jí)為0.1.1。

安裝 0.1.0 版本

為了測(cè)試應(yīng)用自動(dòng)更新，需要在本地安裝一個(gè)0.1.0版本，將應(yīng)用打包成exe，然后安裝在自己的電腦上。

升級(jí)版本為 0.1.1

將應(yīng)用升級(jí)為 0.1.1 版本，只需要將package.json中的版本號(hào)更新為0.1.1即可。

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

這里為了測(cè)試方便，可以在Helloworld.vue中加入版本，或者讀取應(yīng)用版本號(hào)。

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

重新打包應(yīng)用，打包成功后dist_electron目錄中會(huì)多出幾個(gè)文件，下面這三個(gè)是升級(jí)需要用到的：

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

發(fā)布新版本 0.1.1

新版本打包后需要發(fā)布到服務(wù)器中，這里可以使用nginx做為服務(wù)器。

需要注意的是，應(yīng)用程序中指定的服務(wù)器更新地址為：

http://192.168.1.3/itqn/electron/helloworld

所以必須將應(yīng)用發(fā)布到這里，才能實(shí)現(xiàn)自動(dòng)升級(jí)（這里我使用的是本地IP，實(shí)際使用應(yīng)該是用域名）。

使用nginx作為服務(wù)器，需要在本地安裝nginx，可以在官網(wǎng)下載nginx，解壓即可。

修改nginx的配置conf/nginx.conf

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

這里指定了nginx的root為D:/nginx/www，所以需要在www這個(gè)目錄下創(chuàng)建itqn/electron/helloworld這個(gè)目錄，最終的目錄路徑為：

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

將新版本打包的三個(gè)文件放到helloworld這個(gè)目錄中，然后新增一個(gè)info.txt文件編寫更新內(nèi)容，最后helloworld目錄下的文件如下：

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

啟動(dòng)nginx服務(wù)器

start nginx.exe

如果服務(wù)啟動(dòng)正常，通過瀏覽器訪問<http://192.168.1.3/itqn/electron/helloworld/info.txt>將可以看到更新內(nèi)容。

最后啟動(dòng)已經(jīng)安裝好0.1.0程序。

可以看到程序啟動(dòng)后，彈出了新版本的更新內(nèi)容，這里點(diǎn)擊確定執(zhí)行更新，更新成功后會(huì)自動(dòng)重啟應(yīng)用。

下面是更新后的界面，可以看到應(yīng)用已經(jīng)更新到了最新版本0.1.1。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

最新評(píng)論