Electron打包Html项目成EXE

今天有项目需要，需要把html项目打包成exe，向客户展示体验，记录一下打包过程。

过程

第一步

这里使用electron打包html，所以先拉去electron代码

git clone https://github.com/electron/electron-quick-start

项目内容如图

第二步

拷贝html项目到electron项目下

output就是我的html项目

完整项目目录

第三步

修改main.js，只展示修改部分代码

const {app, BrowserWindow, Menu} = require('electron')
const path = require('path')
//因为项目使用server，添加了这个库，添加前，别忘了使用 npm i http-server 安装库。
const httpServer = require('http-server');



function createWindow () {
  // Create the browser window.
  const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js')
    }
  })
  //注意 这里是我添加的，去掉electron自带菜单
  Menu.setApplicationMenu(null)
  mainWindow.loadFile('output/index.html')
  httpServer.createServer({root:"./output"}).listen(80);
}

第四步

安装打包工具

npm i electron-packager

添加打包命令

  "scripts": {
    "start": "electron .",
    "packager": "electron-packager ./ APP --platform=win32 --arch=x64 --electron-version=19.0.6 --icon=logo.ico --overwrite"
  }

第五步

直接运行命令打包即可

npm run packager

打包完成后目录

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-GxQ1tI2L-1657182656661)(https://picshack.net/ib/QTkWcaf7TN.PNG)]

小结

整个使用挺方便，html代码基本可以无缝打包成exe，方便交付使用，缺点就是打包后，包的大小太大，抽空研究一下精简。

听说隔壁出了个Tauri，同样功能，打包后，包体积小的多，等研究后在记录吧。