electron打包h5为桌面应用

一、准备好h5静态资源：

uniapp打包的h5配置：

需要修改打包的路径以及取消启用https协议，不然打包后无法访问后端接口

打包后即可生成静态访问资源

使用vite打包/uniapp使用vue3打包：

使用vite打包出的文件不再是静态资源，默认只能使用服务端渲染，显然不满足electron的打包条件，可通过下面方法转为静态资源访问：

zhuanlan.zhihu.com/p/650561443

二、创建并初始化项目

npm init

三、安装electron以及electron-builder依赖

npm i electron
npm i electron-builder -g

四、配置文件

安装完依赖的目录：

在项目根目录下新建main.js文件并且将打包好的h5静态资源放入根目录下

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

填写运行以及打包脚本命令:

"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填写打包配置：

"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"
               ]
    },

五、执行打包

配置好后，运行打包命令：

npm run build

点击即可安装使用：