Electron+vue开发桌面程序全流程vue项目接入electron，使用electron-builder打包时碰到

一、前言

Electron是一个使用 JavaScript、HTML 和 CSS 构建桌面应用程序的框架。嵌入 Chromium 和 Node.js 到二进制的 Electron 允许您保持一个 JavaScript 代码代码库并创建在Windows上运行的跨平台应用 macOS和Linux——不需要本地开发经验。

接下来介绍搭建项目，打包，生成exe或app的图标，如何将配置文件拷贝到指定的文件夹，以及在开发过程中碰到的一些问题。

二、vue+elelctron项目搭建

1、构建vue初始项目

// 安装最新版本
npm install -g @vue/cli

vue create demo

cd demo
vue run serve

2、vue项目中添加electron

electron 的打包工具有如下这几种，本文采用的是第二种electron-builder，在mac系统打包默认为dmg格式，在windows系统打包默认为exe格式。

electron-packager；
electron-builder；
grunt-electron-installer（windows-installer）；

// Electron安装 
npm install electron -g 或 cnpm install electron -g 

// Vue项目添加Electron-builder打包工具 
vue add electron-builder

命令执行后，会在package.json中添加四个命令，执行npm run electron:serve通过electron 启动项目。

三、生成mac或windows桌面图标

需要准备一张png图片，尺寸最小为512x512，最好为1024x1024

1、 mac篇（icns图标）

创建一个临时目录存放不同大小的图片icons.iconset.(目录必须采用.iconset保存)
运行如下命令，会在icons.iconset.文件夹下生成不同尺寸的图片

sips -z 16 16     ./icon.png --out icons.iconset/icon_16x16.png
 
sips -z 32 32     ./icon.png --out icons.iconset/icon_16x16@2x.png
 
sips -z 32 32     ./icon.png --out icons.iconset/icon_32x32.png
 
sips -z 64 64     ./icon.png --out icons.iconset/icon_32x32@2x.png
	 
sips -z 64 64     ./icon.png --out icons.iconset/icon_64x64.png
	 
sips -z 128 128   ./icon.png --out icons.iconset/icon_64x64@2x.png
	 
sips -z 128 128   ./icon.png --out icons.iconset/icon_128x128.png
	 
sips -z 256 256   ./icon.png --out icons.iconset/icon_128x128@2x.png
	 
sips -z 256 256   ./icon.png --out icons.iconset/icon_256x256.png
	 
sips -z 512 512   ./icon.png --out icons.iconset/icon_256x256@2x.png
	 
sips -z 512 512   ./icon.png --out icons.iconset/icon_512x512.png
	 
sips -z 1024 1024  ./icon.png --out icons.iconset/icon_512x512@2x.png

运行如下命令，生成icns

iconutil -c icns icons.iconset -o Icon.icns

2、 windows篇（ico图标）

安装icoutils，如果卡在updating homebrew…时，可以按下control+c暂停brew更新，接着执行后续逻辑。

brew install icoutils

前往icon.png同级目录，运行如下命令，会生成windows系统的对应图标

icotool -c -o icon.ico icon.png

四、项目打包

执行npm run electron:build命令打包时，在下载一个包时很慢，需要去github上找到对应的文件，下载到本地前往/Library/Caches/electron，替换掉。
在项目根目录创建文件夹build/icons，将上一步生成的ico和icns文件拷贝进来，打包的时候会读取该文件夹的图标。

在打包时，还可以将指定文件拷贝到打包后的目录，不进行编译。如果有配置文件，可以用这种方式进行操作。在vue.config.js中配置

module.exports = {
  pluginOptions: {
    electronBuilder: {
      nodeIntegration: true,
      builderOptions: {
        "productName": "项目名",
        "appId": "com.example.yourapp",
        "extraResources": [ // 可以配置多个文件、文件夹
          {
            "from": "./config.json",
            "to": "../"
          }
        ]
      }
    }
  }
}