Vue (Vue Cli 3) + Electron 创建桌面应用

本文环境说明：vue 2.6 (vue-cli 3.7)， Electron 5+

安装Vue Cli

npm install -g @vue/cli
# OR
yarn global add @vue/cli

使用Vue Cli 创建一个新的Vue项目

vue create my-project
# OR
vue ui

**安装Vue插件vue-cli-plugin-electron-builder
**
electron-builder仅支持Vue Cli3

vue add electron-builder

运行Electron项目

npm run electron:serve
# OR
yarn electron:serve

编译Electron项目

npm run electron:build
# OR
yarn electron:build

开发过程中遇到的一些问题

1. 退出应用

electron.remote.app.exit(); // 可以指定退出值，正常退出默认0
# OR
electron.remote.app.quit()；

2. 如何修改应用图标

// 安装 electron-icon-builder
npm install --save-dev electron-icon-builder
# OR
yarn add --dev electron-icon-builder

// 添加编译脚本到package.json的scripts，确保public/icon.png文件存在
"electron:generate-icons": "electron-icon-builder --input=./public/icon.png --output=build --flatten"

// 生成带Icon的应用
npm run electron:generate-icons
# OR
yarn electron:generate-icons

// 设置托盘图标， 编辑background.(js|ts)文件
import path from 'path'

win = new BrowserWindow({
  width: 800,
  height: 600,
  icon: path.join(__static, 'icon.png')
})

一些说明

为什么不使用electron-vue

electron-vue 支持在Vue Cli2，有更多未知问题。

为什么不使用electron-quick-start

electron-quick-start 只是一个对Electron快速启动的能力，整合Vue需要手动处理很多事情。例如，默认不能调试