转载参考：
https://www.jianshu.com/p/eaacfc40504d
从官网上clone一个例子
官网：https://electronjs.org/docs
git clone https://github.com/electron/electron-quick-start
cd electron-quick-start
npm install
npm start
项目跑起来之后，就会出现electron的桌面页面，大概看一下入口文件main.js 和package.json
mainWindow.loadURL(url.format({
pathname: path.join(__dirname, 'index.html'), //index.html即是入口html文件。
protocol: 'file:',
slashes: true
}))
//package.json
{
"name": "electron-quick-start",
"version": "1.0.0",
"description": "A minimal Electron application",
"main": "main.js", //设置入口文件main.js
"scripts": {
"start": "electron ."
}
...
}
使用 vue-cli 新建一个项目，并安装相关依赖
npm install electron --save-dev
npm install electron-packager --save-dev
其中electron-packager是打成exe文件的插件
将步骤一中的main.js拷贝到新建项目的build目录下，并更名为electron.js
按照实际项目路径更改electron.js中的路径
mainWindow.loadURL(url.format({
pathname: path.join(__dirname, '../dist/index.html'),
protocol: 'file:',
slashes: true
}))
更改config/index.js中生产模式下（build）的assetsPublicPth, 原本为 /, 改为 ./
在新建项目package.json文件中增加一条指令
// test-electron/package.json
"scripts": {
...
"lint": "eslint --ext .js,.vue src test/unit/specs test/e2e/specs",
"build": "node build/build.js",
"electron_dev": "npm run build && electron build/electron.js" //增加这条,JSON文件不支持注释，引用时请清除
},
执行npm run build 生成dist目录
执行npm run electron_dev 启动electron
即可看到生成的应用程序
打包exe文件
复制build目录下的electron.js到dist目录中，并注意修改路径
.复制官网上clone的例子中的package.json到dist目录中,注意修改路径(官网上的)
在项目的package.json中（注意不是dist下的package.json）为之前下载好的electron-packager，增加一条启动命令
"scripts": {
...
"lint": "eslint --ext .js,.vue src test/unit/specs test/e2e/specs",
"build": "node build/build.js",
"electron_dev": "npm run build && electron build/electron.js",
"electron_build": "electron-packager ./dist helloworld --platform=win32 --arch=x64 --icon=./src/assets/home.ico --overwrite" //增加这条
},
electron-packager <sourcedir> <appname> –platform=<platform> –arch=<arch> [optional flags…]
sourcedir: 资源(dist/package.json)路径，在本例中既是./dist/
appname:打包出的exe名称,这里取名为helloworld
platform :平台名称（windows是win32）
arch: 版本，本例为x64
后边的配置项都是选填，默认是没有这些的，这里只选填了exe的图标。
（注意：不可通过重命名的方式将一个png或jpg格式的文件改为ico格式，会导致无法build成功）
生成exe
执行npm run electron_build，可以看到项目目录中多了一个helloworld-win32-x64文件，找到里面的helloworld.exe运行即可。
