Electron + vue 打包桌面操做 流程

提早准备一个vue项目，也能够使用初始的vue项目
vue init webpack
安装到后边有的会出现报错，能够忽略，启动npm run dev 启动成功就能够

在vue项目下执行下载如下依赖，会用到
cnpm install electron --save-dev
cnpm install electron-packager --save-dev //这个是打成exe文件的插件，以后要用，提早下载好
获取Electron的资源
git clone https://github.com/electron/e...
cd electron-quick-start
cnpm install //这里我用的是cnpm,npm太慢了

将Electron获取到资源的main.js复制到vue里面的bulid里面并修改成electron.js

而后修改

将assetsPublicPath: '/' 改成./，都是为了获取准确的路径
而后再修改electron.js

改成 这个pathname: path.join(__dirname, '../dist/index.html')
不懂的能够去搜vue 的 dist

这些改好了以后配置package.json

用来启动 npm run abc

启动成功为

启动成功能够执行下一步
在配置打包的package.json

关于electron-packager的配置，简单介绍一下。
electron-packager <sourcedir> <appname> --platform=<platform> --arch=<arch> [optional flags...]

sourcedir 资源路径，在本例中既是./dist/

appname 打包出的exe名称

platform 平台名称（windows是win32）

arch 版本，本例为x64

到这里尚未完由于还有坑呢
我就把坑跳过

将bulid的electron.js文件复制到dist中，将package.json也复制到当中（提示dist文件和里面内容自动生成不用本身建立）
而后修改electron.js

mainWindow.loadURL(url.format({

pathname: path.join(__dirname, 'index.html'),
protocol: 'file:',
slashes: true

}))
再修改复制到dist中的package.json

再启动npm run go 会出现打包成功的文件夹再从里面寻找exe文件 就能够了！！！！！