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的即可。
豌豆資源搜索網站https://55wd.com 電腦刺綉綉花廠 ttp://www.szhdn.com
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程序。