上次成功搭建了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程式。

可以看到程式啟動後，彈出了新版本的更新內容，這裡點選確定執行更新，更新成功後會自動重啟應用。

下面是更新後的介面，可以看到應用已經更新到了最新版本0.1.1。

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。