一、准备好h5静态资源：
uniapp打包的h5配置：
需要修改打包的路径以及取消启用https协议，不然打包后无法访问后端接口
打包后即可生成静态访问资源
使用vite打包/uniapp使用vue3打包：
使用vite打包出的文件不再是静态资源，默认只能使用服务端渲染，显然不满足electron的打包条件，可通过下面方法转为静态资源访问：
zhuanlan.zhihu.com/p/650561443
二、创建并初始化项目
cmd
npm init三、安装electron以及electron-builder依赖
cmd
npm i electron
npm i electron-builder -g四、配置文件
安装完依赖的目录：
在项目根目录下新建main.js文件并且将打包好的h5静态资源放入根目录下
main.js文件写入创建桌面窗口：
main.js
const {app, BrowserWindow} = require('electron')
const path = require('path')
const url = require('url')
let win
//创建主进程窗口
function createWindow () {
//设置窗口大小
win = new BrowserWindow({width: 1920, height: 1080})
//配置h5页面的文件路径
win.loadURL(url.format({
pathname: path.join(__dirname, 'index.html'),
protocol: 'file:',
slashes: true
}))
win.on('closed', () => {
win = null
})
}
app.on('ready', createWindow)
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') {
app.quit()
}
})
app.on('activate', () => {
if (win === null) {
createWindow()
}
})进入package.json文件修改：将入口文件换成刚刚新建的main
填写运行以及打包脚本命令:
package.json
"scripts":{
"dev":"electron .",
"build":"electron-builder build --win --x64", //打包win64位
"build32":"electron-builder build --win --ia32", //打包win32位
"buildMac":"electron-builder build --universal --mac", //打包mac通用包，兼容m芯片和inte芯片
}继续在package.json填写打包配置：
package.json
"build": {
"appId": "com.xxx.app",
"productName": "xxx",
//win打包配置
"win": {
"icon": "static/icon.ico", //设置打包好的windows桌面图标
"artifactName": "${productName}_setup_${version}.${ext}", //设置安装包的名
},
//mac打包配置
"afterSign":"notarize.js", //打包mac需要提供的公证文件，打包win可以不填写
"dmg": {
"sign": false //设置是否开启mac的签名，本地测试可以不用，如打包发布则需要
},
"mac": {
"icon": "static/icon.png", //设置打包好的mac桌面图标
"hardenedRuntime": true,
"gatekeeperAssess": false,
"entitlements": "entitlements.mac.plist",
"entitlementsInherit": "entitlements.mac.plist",
"artifactName": "${productName}-${platform}-${arch}-${version}.${ext}",
"target": [
"dmg",
"zip"
]
},五、执行打包
配置好后，运行打包命令：
cmd
npm run build点击即可安装使用：
