一、下载运行electron项目
git clone https://github.com/electron/electron-quick-start
cd electron-quick-start
npm install
npm start
项目跑起来以后， 就会出现electron的桌面项目，找到clone下来项目的入口文件main.js 和package.json.接下来修改路径和配置。
//----main.js----
function createWindow () {
// and load the index.html of the app.
mainWindow.loadURL(`file://${
__dirname}/../dist/index.html`) //修改这里
//package.json
{
"name": "electron-quick-start",
"version": "1.0.0",
"description": "A minimal Electron application",
"main": "electron.js", //--修改的，为后面做准备
"scripts": {
"start": "electron ."
}
二、 接下来，在已创建好的vue-cli项目中，安装electron依赖，运行如下命令：
#创建vue-cli（有的话无视）
npm install -g vue-cli
cd 文件夹
vue init webpack vue-app
cd vue-app
npm run dev
#安装electron依赖
npm install electron --save-dev
npm install electron-packager --save-dev
现在将clone项目中的main.js拷到vue项目中的build文件夹下，并重命名为electron.js , 并更改config/index.js中生产模式下（build）的assetsPublicPth
build: {
// Paths
assetsRoot: path.resolve(__dirname, '../dist'),
assetsSubDirectory: 'static',
assetsPublicPath: './', //这里改为./
三、在vue项目的package.json文件中增加一条指令，如下：
"scripts": {
"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
"start": "npm run dev",
"unit": "jest --config test/unit/jest.conf.js --coverage",
"e2e": "node test/e2e/runner.js",
"test": "npm run unit && npm run e2e",
"build": "node build/build.js",
"electron_dev": "npm run build && electron build/electron.js" //增加的指令
}
接着执行：
npm run build //生成dist目录(包含静态资源文件)
npm run electron_dev //启动electron
现在，生成桌面应用跑起来了
打包！
首先，复制build目录下的electron.js到dist目录中，注意很关键的一步是复制过来之后，要调整一下loadURL路径的格式，
像这样：
function createWindow () {
// Create the browser window.
mainWindow = new BrowserWindow({
})
// and load the index.html of the app.
mainWindow.loadURL(`${
__dirname}/index.html`) //--修改的--
接着，复制clone的electron例子的package.json到vue项目的dist目录中。在vue项目的package.json中（注意不是dist下的package.json）为之前下载好的electron-packager，增加一条启动命令。
"build": "node build/build.js",
"electron_dev": "npm run build && electron build/electron.js",
"electron_build": "electron-packager ./dist/ --platform=win32 --arch=ia32 --icon=./src/assets/olami.ico --overwrite" //--新增的命令--
接着，如果你要替换应用图标的话，就在项目中的src文件夹下的assets目录下，放入你要设置的exe文件的图标，为.ico格式。在electron_build里面的路径改
最后，运行
npm run build //刷新静态资源文件
npm run electron_build //启动
这个时候已经生成了aps-win32-ia32文件夹，找到里面的helloworld.exe文件即可运行。当然，我这里没有给文件重命名，你们可以自行命名。
到这里，exe文件已经最终完成。
用electron打包之后遇到的坑：
1.ico桌面图标
用系统自带的画图工具生成或者是强转，都会报以下错误：
rcedit.exe failed with exit code 1. Reserved header is not 0 or image type is not icon for './src/assets/olami.ico'
解决方法：
下载生成ico工具：
https://icofx.ro/
下载之后，选择需要的图片（其他格式），后ctrl+s生成.ico图片
2.button点击事件(项目中有长按事件)
在vue框架中@touchstart=“Fn” 打包后改为 @mousedown=“Fn”
在vue框架中@touchend=“Fn” 打包之后 @mouseup=“Fn”
3.网络请求
打包之后请求接口会变成file:///C:xxx/xxx/这是请求不通的, 正确的应该是http://xxx或者https://xxx
解决方法：
在vue的main.js中写入下面一段代码
Vue.prototype.$api = "https://xxxx";
再在需要的位置使用
this.$axios.post(this.$api+'/xxx/xxx', params)
windows (.exe)程序 设置
宽高导航栏工具栏调试器
function createWindow () {
// Create the browser window.
const mainWindow = new BrowserWindow({
width: 400,//打开窗口的宽
height: 818,//高
frame:false//是否隐藏导航菜单栏，隐藏了之后不可拖动程序，需要额外编写
webPreferences: {
preload: path.join(__dirname, 'preload.js')
}
})
// and load the index.html of the app.
// mainWindow.loadFile('index.html')
mainWindow.loadURL(`${
__dirname}/index.html`)
// Open the DevTools.是否开启调试工具
mainWindow.webContents.openDevTools()
//是否隐藏隐藏工具栏
mainWindow.setMenu(null)
}