使用electron-packager electron-builder electron-updater 打包vue項目，支持在線更新

1.如何用electron-packager electron-builder打包vue項目，打包成桌面程序。

步驟一、

 

   執行npm run build 打包你的vue項目。

    打包成功后，生成dist打包后的文件。

    在dist打開命令行， 安裝electron-packager electron-builder 

    安裝命令  npm install electron-packager    npm install electron-builder 

    在dist中新增main.js文件，其中內容包括

    

const {app, BrowserWindow,globalShortcut,ipcMain} =require('electron')
let win;
let windowConfig = {
  fullscreen:true,
  width:800,
  height:600
};
const  {autoUpdater}=require('electron-updater');
function createWindow(){
  win = new BrowserWindow(windowConfig);
  win.loadURL(`file://${__dirname}/index.html`);
  app.setApplicationMenu(null);//關閉菜單欄
  // 注冊一個 'CommandOrControl+X' 的全局快捷鍵
  globalShortcut.register('CommandOrControl+Alt+K', () => {
    win.webContents.openDevTools();  //開啟調試工具
  });
  win.on('close',() => {
    //回收BrowserWindow對象
    win = null;
  });
  win.on('resize',() => {
    win.reload();
  })
}
app.on('ready',createWindow);
app.on('window-all-closed',() => {
  app.quit();
});
app.on('activate',() => {
  if(win == null){
    createWindow();
  }
});

// 檢測更新，在你想要檢查更新的時候執行，renderer事件觸發后的操作自行編寫
!function updateHandle() {
  let message = {
    error: '檢查更新出錯',
    checking: '正在檢查更新……',
    updateAva: '檢測到新版本，正在下載……',
    updateNotAva: '現在使用的就是最新版本，不用更新',
  };
  const uploadUrl = "更新包所在的服務器地址"; // 下載地址，不加后面的**.exe
  autoUpdater.setFeedURL(uploadUrl);
  autoUpdater.on('error', function (error) {
    console.log(autoUpdater.error);
    sendUpdateMessage(message.error)
  });
  autoUpdater.on('checking-for-update', function () {
    sendUpdateMessage(message.checking)
  });
  autoUpdater.on('update-available', function (info) {
    sendUpdateMessage(message.updateAva)
  });
  autoUpdater.on('update-not-available', function (info) {
    sendUpdateMessage(message.updateNotAva)
  });

  // 更新下載進度事件
  autoUpdater.on('download-progress', function (progressObj) {
    win.webContents.send('downloadProgress', progressObj)
  });
  autoUpdater.on('update-downloaded', function (event, releaseNotes, releaseName, releaseDate, updateUrl, quitAndUpdate) {

    ipcMain.on('isUpdateNow', (e, arg) => {
      //some code here to handle event
      autoUpdater.quitAndInstall();
    });

    win.webContents.send('isUpdateNow')
  });

  ipcMain.on("checkForUpdate",()=>{
    //執行自動更新檢查
    autoUpdater.checkForUpdates();
  })
}();

// 通過main進程發送事件給renderer進程，提示更新信息
function sendUpdateMessage(text) {
  win.webContents.send('message', text)
}

　　在dist文件夾下新增package.json文件，其中包括內容為

       

{
  "name": "名稱",
  "productName": "項目名稱",
  "author": "作者",
  "version": "1.1.1",//版本
  "main": "main.js",
  "description": "項目描述",
  "scripts": {
    "pack": "electron-builder --dir",
    "dist": "electron-builder",
    "postinstall": "electron-builder install-app-deps"
  },
  "build": {
    "electronVersion": "1.8.4",
    "win": {
      "requestedExecutionLevel": "highestAvailable",
      "target": [
        {
          "target": "nsis",
          "arch": [
            "x64"
          ]
        }
      ]
    },
    "appId": "項目的id,唯一id",
    "artifactName": "名稱-${version}-${arch}.${ext}",
    "nsis": {
      "artifactName": "名稱-${version}-${arch}.${ext}"
    },
    "publish": [
      {
        "provider": "generic",
        "url": "服務器最新安裝包的位置"
      }
    ]
  },
  "dependencies": {
    "core-js": "^2.4.1",
    "electron-updater": "^2.22.1",
    "fs-extra": "^4.0.1",
    "install.js": "^1.0.1",
    "moment": "^2.18.1",
    "moment-es6": "^1.0.0"
  }
}

　　在你的vue項目里面App.vue生命周期里面新增如下代碼：這是自動檢測更新

mounted: function () {
      if (window.require) {
        let ipc = window.require('electron').ipcRenderer;
        ipc.send("checkForUpdate");
        ipc.on("message", (event, text) => {
          this.tips = text;
          console.log('message1',this.tips)
        });
        ipc.on("downloadProgress", (event, progressObj)=> {
          this.downloadPercent = progressObj.percent || 0;
          console.log('message2',this.downloadPercent)
        });
        ipc.on("isUpdateNow", () => {
          ipc.send("isUpdateNow");
        });
      }
    },

　一切准備就緒之后在終端里面執行命令： electron-builder 

  成功之后會生成一個安裝包及版本文件

     雙擊exe程序安裝之后就在桌面有快捷圖標就可以使用了，

如果你的程序有更新，一點要把你的安裝包及latest.yml放到你剛剛在package.json里面更新文件在服務器的位置。

"publish": [
      {
        "provider": "generic",
        "url": "http:/xxxx.com/download/"
      }
    ]

download的文件下面，
注意有個坑：

http:/xxxx.com/download/latest.yml一定要能訪問到並且在瀏覽器里面可以輸出里面的內容，否則更新程序會失敗。
文件目錄如下：