一. 从官网上clone一个例子

git clone https://github.com/electron/electron-quick-start

cd electron-quick-start

npm install

npm run start

项目跑起来之后，就会出现electron窗口页面，目录下自动生成文件main.js 和package.json

image

二. 使用vue 脚手架工具生成一个项目，并install相关依赖

vue init webpack test-exe

cd test-exe

npm install electron --save-dev

npm install electron-packager --save-dev

将一中的main.js拷贝到test-exe项目的build目录下，并更名为electron.js

@修改electron.js中的路径

image

更改config/index.js中build项的参数assetsPublicPth, 原本为** / **, 改为 **./ ** 。

image

三：修改根目录下的package.json文件

image

"main":"build/electron.js",
"test_exe": "electron .",
"electron_build": "electron-packager ./dist ming --platform=win32 --arch=x64 --overwrite"

执行npm run build 打包生成dist目录

运行npm run test_exe 打开项目

四：打包为exe文件

首先需要将build\electron.js文件和根目录下的package.json文件复制到dist/目录下，
electron.js

mainWindow.loadFile('./dist/index.html')
改为 mainWindow.loadFile('index.html')

package.json

参数 "main":"build/electron.js",
改为 "main":"electron.js",

然后执行npm run electron_build命令生成 ming-win32-x64目录，点击exe即可打开，finished

image

备注：electron-packager的打包基本命令：

electron-packager<locationofproject><nameofproject><platform><architecture><electronversion><optionaloptions>

location of project：项目路径
name of project：打包名字
platform：平台（Windows、Mac 、Linux）
architecture：x86 还是 x64 还是两个都有
electron version：electron 的版本，可选选项
optional options：可选选项
icon：可选选项