本教程基于uni-app开发的项目，按照下面步骤操作即可
# 第一步(安装)
1.1、安装electron（主程序）
npm install electron -g
1.2、安装electron-packager（打包用）
npm install electron-packager -g
1.3、安装完成之后请看下一步
# 第二步
2.1、在项目根目录新建文件夹vue-electron,也就是与manifest.json同级
2.2、在vue-electron中新建main.js，内容如下：
const {app, BrowserWindow} = require('electron')
const path = require('path')
const url = require('url')
let win
function createWindow () {
win = new BrowserWindow({
width: 375, // 窗口宽度
height: 667, // 窗口高度
minWidth: 375, // 最小窗口宽度
minHeight: 667, // 最小窗口高度
webPreferences: {
defaultFontFamily: {
standard: 'Microsoft YaHei' // 设置字体为微软雅黑，不然默认为宋体
}
}
})
win.maximize() // 窗口打开时默认最大化
win.loadURL(url.format({
pathname: path.join(__dirname, 'index.html'),
protocol: 'file:',
slashes: true
}))
win.on('closed', () => {
win = null
})
win.on('resize',() => {
win.reload() // 窗口变化时重新加载（刷新），由于uni-app的在改变窗口大小时内容不会自适应，所以需要执行刷新
})
}
app.on('ready', createWindow)
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') {
app.quit()
}
})
app.on('activate', () => {
if (win === null) {
createWindow()
}
})
2.3、在vue-electron中新建package.json，内容如下：
{
"name" : "app-name",
"version" : "0.1.0",
"main" : "main.js"
}
# 第三步
将manifest.json配置文件中H5配置的运行基础路径改为./，取消勾选启用HTTPS协议，如下图：
然后发行H5项目，如下图：
发行后的代码路径在unpackage\dist\build\h5
将发行后的static文件夹与index.html文件复制到vue-electron中，如下图：
# 第四步
在vue-electron文件夹中执行
electron-packager . APP-NAME --win --out APP-NAME --arch=x64 --electron-version 1.4.14 --overwrite --ignore=node_modules --icon=logo.ico
如果需要添加ico图标则把ico文件放到vue-electron根目录，并修改命令的ico图标名称即可