Electron打包发布vue项目

1、安装electron

1、执行 npm install electron 进行下载，下载不下来可以切换到cnpm尝试（在下载过程中报有zip文件下载不下来的可以直接点击提示链接进行下载，放置到对应的cache文件夹下，在运行npm install即可），cache文件夹路劲如下：

 2、vue add electron-builder，electron-builder添加完成后会选择electron版本，直接选择最新版，如图：

 

2、在vue项目中配置electron

1、将vue.config.js 中publicPath: '/' 改为publicPath: './' 

2、package.json文件中配置main：background.js；如图：

3、vue.config.js中新增pluginOptions.electronBuilder 配置，详细配置如下：

pluginOptions: {
    electronBuilder: {
      chainWebpackMainProcess: (config) => {
        config.output.filename('background.js') //解决 运行 yarn run electron:serve 报[DEP0128] DeprecationWarning: Invalid 'main' field in '\dist_electron\package.json' of 'background.js'.
      },
      builderOptions: {
        "productName": "hsjm-admin111",
        "appId": "com.123",
        "copyright": "HSJM",
        // "directories": {
        //   "output": "./e_dist"
        // },                                  // build打包文件的输出路径
        //注意, 只有在配置了publish路径时, build之后才会生成latest.yml文件
        "publish": [
          {
            "provider": "generic",
            "url": "http://localhost:3000/update/",
            "channel": "latest" // 检查更新渠道(可省，走默认)
          }
        ]
      }
    }
  }

4、新增electron主进程文件background.js，如下：

'use strict'

import { app, protocol, BrowserWindow, Menu, ipcMain, dialog } from 'electron'
import { createProtocol } from 'vue-cli-plugin-electron-builder/lib'
import installExtension, { VUEJS_DEVTOOLS } from 'electron-devtools-installer'
const isDevelopment = process.env.NODE_ENV !== 'production'

// Scheme must be registered before the app is ready
protocol.registerSchemesAsPrivileged([
  { scheme: 'app', privileges: { secure: true, standard: true } }
])

async function createWindow() {
  // Create the browser window.
  Menu.setApplicationMenu(null) // null值取消顶部菜单栏
  const win = new BrowserWindow({
    width: 1366,
    height: 768,
    frame: false,
    // titleBarStyle: 'customButtonsOnHover',
    useContentSize: true, //width 和 height 将设置为 web 页面的尺寸(译注: 不包含边框), 这意味着窗口的实际尺寸将包括窗口边框的大小，稍微会大一点。 默认值为 false
    autoHideMenuBar: true,// 隐藏工具栏
    icon: "public/favicon.ico",//窗体图标路径
    show: false,//窗口是否在创建时显示
    webPreferences: {
      // Use pluginOptions.nodeIntegration, leave this alone     process.env.ELECTRON_NODE_INTEGRATION
      // See nklayman.github.io/vue-cli-plugin-electron-builder/guide/security.html#node-integration for more info
      nodeIntegration: true,
      contextIsolation: false,
      enableRemoteModule: true, // 解决remote为undefined问题

    }
  })
  win.webContents.send('test111', process.argv)
  // win.maximize() 
  win.show()
  //当win被关闭，触发下面事件,判断下是否直接退出
  win.on('close', (e) => {

    const choice = dialog.showMessageBoxSync(win, {
      type: "info",
      buttons: ["最小化", "直接退出"],
      title: "提示",
      message: "确定要关闭吗？",
      defaultId: 0,
      cancelId: 2
    });
    const leave = choice === 0;
    if (leave) {
      e.preventDefault();
      win.minimize();
    }
    if (choice == 2) e.preventDefault(); //当点击 X X 的时候，不进行操作
  })
  // win.setMenu(null);
  if (process.env.WEBPACK_DEV_SERVER_URL) {
    // Load the url of the dev server if in development mode
    await win.loadURL(process.env.WEBPACK_DEV_SERVER_URL)
  } else {
    createProtocol('app')
    // Load the index.html when not in development
    win.loadURL('app://./index.html')

  }
}

// Quit when all windows are closed.
app.on('window-all-closed', () => {
  // On macOS it is common for applications and their menu bar
  // to stay active until the user quits explicitly with Cmd + Q
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

app.on('activate', () => {
  // On macOS it's common to re-create a window in the app when the
  // dock icon is clicked and there are no other windows open.
  if (BrowserWindow.getAllWindows().length === 0) createWindow()
})

// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.on('ready', async () => {
  createWindow();
})

// Exit cleanly on request from parent process in development mode.
if (isDevelopment) {
  if (process.platform === 'win32') {
    process.on('message', (data) => {
      if (data === 'graceful-exit') {
        app.quit()
      }
    })
  } else {
    process.on('SIGTERM', () => {
      app.quit()
    })
  }
}


// 获取可执行文件位置
const ex = process.execPath;
// 定义事件，渲染进程中直接使用
// 开启 开机自启动
ipcMain.on('openAutoStart', () => {
  console.log('updateExe', ex)
  app.setLoginItemSettings({
    openAtLogin: true,
    path: ex,
    args: []
  });
});
// 关闭 开机自启动
ipcMain.on('closeAutoStart', () => {
  app.setLoginItemSettings({
    openAtLogin: false,
    path: ex,
    args: []
  });
})

5、再运行npm run electron:serve可以进行开发预览，没有问题执行npm run electron:build就打包成功了 

3、electron自动更新

1、 执行npm install --save electron-updater

2、将窗口初始化方法中的webPreferences下面的参数进行设置，如下：

webPreferences: {
      // Use pluginOptions.nodeIntegration, leave this alone     process.env.ELECTRON_NODE_INTEGRATION
      // See nklayman.github.io/vue-cli-plugin-electron-builder/guide/security.html#node-integration for more info
      nodeIntegration: true,
      contextIsolation: false,
      enableRemoteModule: true, // 解决remote为undefined问题
    }

3、编写handleUpdate.js文件，里面包含了监听渲染进程发送过来的检查更新和更新的方法，代码如下： 

import { autoUpdater } from 'electron-updater'

import { ipcMain, dialog } from 'electron'
let mainWindow = null;
export function handleUpdate(window, feedUrl) {
  mainWindow = window;
  let message = {
    error: '检查更新出错',
    checking: '正在检查更新……',
    updateAva: '检测到新版本，正在下载……',
    updateNotAva: '现在使用的就是最新版本，不用更新',
  };

  // `autoUpdater.autoDownload = false;` //取消自动下载
  //设置更新包的地址
  autoUpdater.setFeedURL(feedUrl);
  //监听升级失败事件
  autoUpdater.on('error', function (error) {
    sendUpdateMessage({
      cmd: 'error',
      message: error
    })
  });
  //监听开始检测更新事件
  autoUpdater.on('checking-for-update', function (message) {
    sendUpdateMessage({
      cmd: 'checking-for-update',
      message: message
    })
  });
  //监听发现可用更新事件
  autoUpdater.on('update-available', function (message) {
    sendUpdateMessage({
      cmd: 'update-available',
      message: message
    })
      //新加内容
    const options = {
			type: 'info',
			buttons: ['确定', '取消'],
			title: '更新提示',
			message: '发现有新版本，是否更新？',
			cancelId: 1
		}
		dialog.showMessageBox(options).then(res => {
			if (res.response === 0) {
				sendUpdateMessage({
					cmd: 'confimUpdate',
					message: message
				})
				autoUpdater.downloadUpdate()
			} else {
				return;
			}
		})
  });
  //监听没有可用更新事件
  autoUpdater.on('update-not-available', function (message) {
    sendUpdateMessage({
      cmd: 'update-not-available',
      message: message
    })
  });

  // 更新下载进度事件
  autoUpdater.on('download-progress', function (progressObj) {
    sendUpdateMessage({
      cmd: 'download-progress',
      message: progressObj
    })
  });
  //监听下载完成事件
  autoUpdater.on('update-downloaded', function (event, releaseNotes, releaseName, releaseDate, updateUrl) {
    sendUpdateMessage({
      cmd: 'update-downloaded',
      message: {
        releaseNotes,
        releaseName,
        releaseDate,
        updateUrl
      }
    })
    //退出并安装更新包
    autoUpdater.quitAndInstall();
  });

  //接收渲染进程消息，开始检查更新
  ipcMain.on("checkForUpdate", (e, arg) => {
    //执行自动更新检查
    // sendUpdateMessage({cmd:'checkForUpdate',message:arg})
    autoUpdater.checkForUpdates();
  })
}

//给渲染进程发送消息
function sendUpdateMessage(text) {
  mainWindow.webContents.send('message', text)
}

4、在主进程中引入handleUpdate.js文件，并在初始化窗口时调用监听更新方法， 如下： 

5、在渲染进程中发送消息给主进程进行更新检测和更新，在App.vue中增加如下代码：

mounted() {
    let userAgent = navigator.userAgent.toLowerCase()
    if (userAgent.indexOf(' electron/') > -1)
    {
      let ipcRenderer = window.require('electron').ipcRenderer;
      this.electronCheckForUpdate(ipcRenderer)
    }
  },
  methods: {
    /**
     * @description: 渲染进程发送消息给主进程检查更新
     * @return {*}
     */
    electronCheckForUpdate(ipcRenderer)
    {
      let _this = this;
      //接收主进程版本更新消息
      ipcRenderer.on("message", (event, arg) => {
        if ("update-available" == arg.cmd) {
          //显示升级对话框
          _this.dialogVisible = true;
        } else if ("download-progress" == arg.cmd) {
          let percent = Math.round(parseFloat(arg.message.percent));
          _this.percentage = percent;
        } else if ("error" == arg.cmd) {
          _this.dialogVisible = false;
          _this.$message("更新失败");
        }
      });
      ipcRenderer.once('test111', (event, msg) => {
          console.log(msg)
        })
      ipcRenderer.send("checkForUpdate");
    }
  }

 6、修改主进程文件background.js中handleupdate方法传入的文件服务器地址和vue.config.js中electron配置的文件服务器地址（文件服务器地址为方式更新包的位置），修改位置如下：

background.js

 vue.config.js

 使用npm run electron:build进行打包，将第一次打包的文件作为初始版本进行安装；

7、修改代码，然后package.json中修改版本号（重要，更新就是根据版本来判断程序是否有更新），如下：

  8、再次打包，将打包文件夹中的新版本的.exe文件和latest.yml文件拷贝到文件服务器上面，我这里是拷贝到node.js搭建的一个简单的文件服务器，如下：

 10 . 点击启动第一次安装的程序，则会去检查配置的文件服务器地址是否有latest.yml文件，进行版本比对，存在更新版本则会进行程序更新；

4、替换vue打包后的图标

1、在项目根目录安装electron-icon-builder，命令npm i electron-icon-builder

2、在package.json的scripts中添加一条命令并保存：“electron:generate-icons”: “electron-icon-builder --input=./public/icon.png --output=build --flatten”

3、将你准备的图片命名为icon.png并复制到public目录下

4、执行命令：npm run electron:generate-icons

 5、生成的一系列图片在项目中多出来的build目录下的icons下，删除dist_electron文件夹，重新执行打包命令，npm run electron:build

目录

1、安装electron

2、在vue项目中配置electron

 3、electron自动更新

 4、替换vue打包后的图标

---