# 安裝 vue-cli 和 腳手架樣板代碼
npm install -g vue-cli
vue init simulatedgreg/electron-vue autoUpdataTest

# 安裝依賴(lài)并運(yùn)行你的程序
cd autoUpdataTest
npm install
npm run dev

|- autoUpdateTest
 |- .electron-vue # 壓縮及運(yùn)行環(huán)境的配置文件
 |- build # 
 |- icons # 圖標(biāo)文件
 |- ... # 打包生成的文件在此處 
 |- dist # 用 webpack 壓縮項(xiàng)目后生成的壓縮文件在此處
 |- node_modules
 |- src # 資源文件
 |- main # 主進(jìn)程
 |- renderer # 渲染進(jìn)程
 |- index.ejx # 入口文件
 |- static # 靜態(tài)資源
 |- .babelrc
 |- .gitignore
 |- .travis
 |- appveyor.yml
 |- package-lock.json # npm 自動(dòng)生成的文件
 |- package.json
 |- README.md

{
 "name": "autoupdatetest",
 "version": "0.0.0",
 "author": "wonder <xxxxxxxxx@qq.com>",
 "description": "An electron-vue project",
 "main": "./dist/electron/main.js", 
 "scripts": {
 "build": "node .electron-vue/build.js && electron-builder",
 "dev": "node .electron-vue/dev-runner.js",
 },
 "build": {
 "productName": "autoupdateteset",
 "appId": "org.simulatedgreg.electron-vue",
 "directories": {
  "output": "build"
 },
 "files": "dist/electron/**/*",
 "win": {
  "icon": "build/icons/icon.ico"
 }
 },
 "dependencies": {
 },
 "devDependencies": {
 }
}

# 目錄 E:\GitHub\autoupdateteset
npm i electron-updater --save # 必須安裝為運(yùn)行依賴(lài)，否則運(yùn)行會(huì)出錯(cuò)

"build": {
 "publish": [
  {
   "provider": "generic",
   "url": "http://127.0.0.1:5500/" #這里是我本地開(kāi)的服務(wù)器的地址
  }
 ],
 ...
}

import { 
app,   // app 模塊是為了控制整個(gè)應(yīng)用的生命周期設(shè)計(jì)的。
BrowserWindow, // BrowserWindow 類(lèi)讓你有創(chuàng)建一個(gè)瀏覽器窗口的權(quán)力。
ipcMain 
} from 'electron';

// 引入自動(dòng)更新模塊
const { autoUpdater } = require('electron-updater');
// 不支持 ES6 則用如下方式引入
// const autoUpdater = require("electron-updater").autoUpdater

const feedUrl = `http://127.0.0.1:5500/win32`; // 更新包位置


/**
 * Set `__static` path to static files in production
 * https://simulatedgreg.gitbooks.io/electron-vue/content/en/using-static-assets.html
 */
if (process.env.NODE_ENV !== 'development') {
 global.__static = require('path').join(__dirname, '/static').replace(/\\/g, '\\\\');
}

let mainWindow, webContents;
const winURL = process.env.NODE_ENV === 'development' ?
 `http://localhost:9080` :
 `file://${__dirname}/index.html`;

function createWindow() {
 /**
  * Initial window options
  */
 mainWindow = new BrowserWindow({
  height: 563,
  useContentSize: true,
  width: 1000
 });

 mainWindow.loadURL(winURL);

 webContents = mainWindow.webContents;

 mainWindow.on('closed', () => {
  mainWindow = null;
 });
}

// 主進(jìn)程監(jiān)聽(tīng)渲染進(jìn)程傳來(lái)的信息
ipcMain.on('update', (e, arg) => {
 console.log("update");
 checkForUpdates();
});

let checkForUpdates = () => {
 // 配置安裝包遠(yuǎn)端服務(wù)器
 autoUpdater.setFeedURL(feedUrl);

 // 下面是自動(dòng)更新的整個(gè)生命周期所發(fā)生的事件
 autoUpdater.on('error', function(message) {
  sendUpdateMessage('error', message);
 });
 autoUpdater.on('checking-for-update', function(message) {
  sendUpdateMessage('checking-for-update', message);
 });
 autoUpdater.on('update-available', function(message) {
  sendUpdateMessage('update-available', message);
 });
 autoUpdater.on('update-not-available', function(message) {
  sendUpdateMessage('update-not-available', message);
 });

 // 更新下載進(jìn)度事件
 autoUpdater.on('download-progress', function(progressObj) {
  sendUpdateMessage('downloadProgress', progressObj);
 });
 // 更新下載完成事件
 autoUpdater.on('update-downloaded', function(event, releaseNotes, releaseName, releaseDate, updateUrl, quitAndUpdate) {
  sendUpdateMessage('isUpdateNow');
  ipcMain.on('updateNow', (e, arg) => {
   autoUpdater.quitAndInstall();
  });
 });

 //執(zhí)行自動(dòng)更新檢查
 autoUpdater.checkForUpdates();
};

// 主進(jìn)程主動(dòng)發(fā)送消息給渲染進(jìn)程函數(shù)
function sendUpdateMessage(message, data) {
 console.log({ message, data });
 webContents.send('message', { message, data });
}

app.on('ready', () => {
 createWindow();
});

app.on('window-all-closed', () => {
 if (process.platform !== 'darwin') {
  app.quit();
 }
});

app.on('activate', () => {
 if (mainWindow === null) {
  createWindow();
 }
});

<template>
 <div id="app">
  <!-- <router-view></router-view> -->
  <button @click="autoUpdate()">獲取更新</button>
  <ol id="content">
   <li>生命周期過(guò)程展示</li>
  </ol>
 </div>
</template>

<script>
// import { ipcRenderer } from 'electron';
const { ipcRenderer } = require('electron');
export default {
 name: 'my-project1',
 mounted() {
  var _ol = document.getElementById("content");
  ipcRenderer.on('message',(event,{message,data}) => {
   let _li = document.createElement("li");
   _li.innerHTML = message + " <br>data:" + JSON.stringify(data) +"<hr>";
   _ol.appendChild(_li);
   if (message === 'isUpdateNow') {
    if (confirm('是否現(xiàn)在更新？')) {
     ipcRenderer.send('updateNow');
    }
   }
  });
 },
 methods: {
 autoUpdate() {
  ipcRenderer.send('update');
 }
 }
};
</script>

<style>
/* CSS */
</style>