error: 'build' in the application package.json is not supported since 3.0 anymore

打開vue.config.js

pluginOptions:{
    ...
    electronBuilder: {
      nodeIntegration: true,
      contextIsolation: false,
      builderOptions: {
        productName: "vue-config-package",
        appId: "123",
        //注意, 只有在配置了publish路徑時(shí), build之后才會(huì)生成latest.yml文件
        publish: [
          {
            "provider": "generic",
            "url": "http://127.0.0.1:8000/"
          }
        ]
      }
    }
}

搭建文件服務(wù)器

在本地搭建文件服務(wù)器, 用于存放最新的安裝包和latest.yml文件

• latest.yml文件是自動(dòng)更新的重要依據(jù), 里面記錄了版本號(hào), 安裝exe路徑, 打包release時(shí)間等

npm i -g simplehttpserver
//進(jìn)入根目錄, 執(zhí)行下列代碼
simplehttpserver
//默認(rèn)8000端口, 也可以自定義端口:  simplehttpserver -p 8080

前期準(zhǔn)備和安裝工作已經(jīng)完成, 接下來要編寫update.js腳本(主進(jìn)程), 以及渲染頁面中的監(jiān)聽和后續(xù)操作

主進(jìn)程update.js

在background.js同級(jí)目錄新增update.js, 用于封裝主進(jìn)程的electron-update的事件回調(diào)

import {
    autoUpdater
} from 'electron-updater'
 
import {
    ipcMain
} from 'electron'
let mainWindow = null;
export function updateHandle(window, feedUrl) {
    debugger
    mainWindow = window;
    let message = {
        error: '檢查更新出錯(cuò)',
        checking: '正在檢查更新……',
        updateAva: '檢測(cè)到新版本，正在下載……',
        updateNotAva: '現(xiàn)在使用的就是最新版本鲸拥，不用更新',
    };
    //設(shè)置更新包的地址
    autoUpdater.setFeedURL(feedUrl);
    //監(jiān)聽升級(jí)失敗事件
    autoUpdater.on('error', function (error) {
        sendUpdateMessage({
            cmd: 'error',
            message: error
        })
    });
    //監(jiān)聽開始檢測(cè)更新事件
    autoUpdater.on('checking-for-update', function (message) {
        sendUpdateMessage({
            cmd: 'checking-for-update',
            message: message
        })
    });
    //監(jiān)聽發(fā)現(xiàn)可用更新事件
    autoUpdater.on('update-available', function (message) {
        sendUpdateMessage({
            cmd: 'update-available',
            message: message
        })
    });
    //監(jiān)聽沒有可用更新事件
    autoUpdater.on('update-not-available', function (message) {
        sendUpdateMessage({
            cmd: 'update-not-available',
            message: message
        })
    });
 
    // 更新下載進(jìn)度事件
    autoUpdater.on('download-progress', function (progressObj) {
        sendUpdateMessage({
            cmd: 'download-progress',
            message: progressObj
        })
    });
    //監(jiān)聽下載完成事件
    autoUpdater.on('update-downloaded', function (event, releaseNotes, releaseName, releaseDate, updateUrl) {
        sendUpdateMessage({
            cmd: 'update-downloaded',
            message: {
                releaseNotes,
                releaseName,
                releaseDate,
                updateUrl
            }
        })
        //退出并安裝更新包
        autoUpdater.quitAndInstall();
    });
 
    //接收渲染進(jìn)程消息皆尔，開始檢查更新
    ipcMain.on("checkForUpdate", (e, arg) => {
        //執(zhí)行自動(dòng)更新檢查
        // sendUpdateMessage({cmd:'checkForUpdate',message:arg})
        autoUpdater.checkForUpdates();
    })
}
//給渲染進(jìn)程發(fā)送消息
function sendUpdateMessage(text) {
    mainWindow.webContents.send('message', text)
}

background.js中:

//自動(dòng)更新腳本
import { updateHandle } from './update.js';

async function createWindow() {
  ...
  //這里是文件服務(wù)器的根路徑地址
  let feedUrl = "http://127.0.0.1:8000/";
  updateHandle(win,feedUrl);
}

渲染進(jìn)程

App.vue

<template>
  <div>
      <p>當(dāng)前版本1.0</p>
      <p v-if="dialogVisible">正在更新新版本,請(qǐng)稍候...</p>
  </div>
</tempalte>
<script>
let ipcRenderer = require("electron").ipcRenderer;
let _this = this;

//接收主進(jìn)程版本更新消息
ipcRenderer.on("message", (event, arg) => {
  // for (var i = 0; i < arg.length; i++) {
  console.log('Appvue:',arg);
  if ("update-available" == arg.cmd) {
    //顯示升級(jí)對(duì)話框
    _this.dialogVisible = true;
  } else if ("download-progress" == arg.cmd) {
    //更新升級(jí)進(jìn)度
    console.log(arg.message.percent);
    let percent = Math.round(parseFloat(arg.message.percent));
    _this.percentage = percent;
  } else if ("error" == arg.cmd) {
    _this.dialogVisible = false;
    alert("更新失敗");
  }
  // }
});
//2秒后開始檢測(cè)新版本
let timeOut = window.setTimeout(() => {
  ipcRenderer.send("checkForUpdate");
}, 2000);
clearTimeout;
//間隔1分鐘檢測(cè)一次
let interval = window.setInterval(() => {
  ipcRenderer.send("checkForUpdate");
}, 60000);

export default {
  data(){
    return{
      dialogVisible: false,
      closeOnClickModal: false,
      closeOnPressEscape: false,
      showClose: false,
      percentage: 0,
      strokeWidth:200
    }
  },
  mounted(){
    _this = this;
  },
  methods:{
    ipcRenderer(keyword){
      this.$electron.ipcRenderer.send(keyword,"123");
    },
  },
  destroyed() {
    window.clearInterval(interval);
    window.clearInterval(timeOut);
  }
}
</script>

測(cè)試步驟

1. 更改package.json中的version和App.vue中任意內(nèi)容(例如當(dāng)前版本X.X可以看出當(dāng)前版本效果特性的內(nèi)容)
2. 將最新的安裝包放到simplehttpserver運(yùn)行的本地文件服務(wù)根目錄中
3. 安裝運(yùn)行舊版本的包, 則會(huì)進(jìn)入并且自動(dòng)更新下載打開新的資源包

參考文檔
1.electron官方文檔:https://www.electronjs.org/docs/tutorial/quick-start
2.electron-builder官方文檔:https://www.electron.build/api/electron-builder
3.electron-builder常用配置中文注釋https://blog.csdn.net/sw7662504/article/details/109241935?utm_medium=distribute.pc_relevant.none-task-blog-baidujs_title-8&spm=1001.2101.3001.4242
4.vue-cli2.0+electron配置教程https://blog.csdn.net/gsj4719896/article/details/100131840