使用Electron将HTML项目打包为桌面应用（exe）

港控/mmm° 2022-12-10 10:25 468阅读 0赞

基础环境需要安装node.js和npm

1）进入需要打包的项目文件夹中，打开cmd进入该目录

2）npm init

之后会多出一个package.json文件，以下是默认内容

{
      "name": "exe",
      "version": "1.0.0",
      "description": "",
      "main": "main.js",
      "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1",
    	"start":"electron ."
      },
      "author": "bright2017",
      "license": "ISC"
    }

3）在根目录新建main.js，下面是默认内容

const { app, BrowserWindow } = require('electron')
      function createWindow () {   
    // 创建浏览器窗口
    const win = new BrowserWindow({
     width: 800,
     height: 600,
    resizable: false, //禁止改变主窗口尺寸
    // frame:false, //去掉边框和工具栏  去掉之后就不能拖拽窗口,需要自己写
    maximizable: false, //禁止最大化
     webPreferences: {
       nodeIntegration: true
     }
    })
    // 并且为你的应用加载index.html
    win.loadFile('index.html')
    
    // 打开开发者工具
    win.webContents.openDevTools()
    
     }
     
    
     // Electron会在初始化完成并且准备好创建浏览器窗口时调用这个方法
     // 部分 API 在 ready 事件触发后才能使用。
     app.whenReady().then(createWindow)
    
     //当所有窗口都被关闭后退出
     app.on('window-all-closed', () => {
     // 在 macOS 上，除非用户用 Cmd + Q 确定地退出，
     // 否则绝大部分应用及其菜单栏会保持激活。
     if (process.platform !== 'darwin') {
         app.quit()
     }
     })
    
     app.on('activate', () => {
     // 在macOS上，当单击dock图标并且没有其他窗口打开时，
     // 通常在应用程序中重新创建一个窗口。
     if (BrowserWindow.getAllWindows().length === 0) {
         createWindow()
     }
     })

4）开始安装 electron

npm install --save-dev electron

5）需要测试则执行

npm start

6）直接打包需要安装 electron-packager

npm install electron-packager -g

7）安装成功后执行打包命令

electron-packager . <应用目录> <应用名称> <打包平台> --out <输出目录> <架构> <应用版本>

electron-packager . exe --win --out ../exe --arch=x64 --electron-version=10.1.0

因为命令太长，每次打包都要输入太麻烦，所以可以写入 package.json中

{
      "name": "exe",
      "version": "1.0.0",
      "description": "",
      "main": "main.js",
      "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1",
    	"start":"electron .",
    	"package": "electron-packager . exe --win --out ../exe --arch=x64 --electron-version=10.1.0"
      },
      "author": "bright2017",
      "license": "ISC"
    }

这是32位的命令

// "package": "electron-packager . exe --win --out ../exe --arch=ia32 --electron-version=10.1.0 --overwrite --ignore=node_modules --electron-zip-dir=./electron-zip"

但是npm下载太慢了，所以可以直接下载压缩包，执行命令时指定路径即可

![20200925180001610.png][]

8）在根目录新建文件夹 命名为 electron-zip ，将下载好的压缩包放进去

下载压缩包网址 ：[https://npm.taobao.org/mirrors/electron][https_npm.taobao.org_mirrors_electron]

![20200925180312748.png][]

exe是我的项目目录，我下载的是10.1.0版本

下载好后，不用解压，直接放进去，更改package的执行命令即可

{
      "name": "exe",
      "version": "1.0.0",
      "description": "",
      "main": "main.js",
      "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1",
    	"start":"electron .",
    	"package": "electron-packager . exe --win --out ../exe --arch=x64 --electron-version=10.1.0 --overwrite --ignore=node_modules --electron-zip-dir=./electron-zip"
      },
      "author": "bright2017",
      "license": "ISC"
    }

命令行中直接运行命令  npm run-script package

最终生成结果，双击运行即可。

![20200925180918811.png][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JyaWdodDIwMTc_size_16_color_FFFFFF_t_70][]

9）如果需要更换图标，则需要继续执行命令

图标需要ioc格式，放在根目录，在package.json中 package后继续添加命令

{
      "name": "exe",
      "version": "1.0.0",
      "description": "",
      "main": "main.js",
      "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1",
        "start": "electron .",
        "package": "electron-packager . exe --win --out ../exe --arch=x64 --electron-version=10.1.0 --overwrite --ignore=node_modules --electron-zip-dir=./electron-zip --icon=app.ico"
      },
      "author": "bright2017",
      "license": "ISC"
    }

打包后图标更换

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JyaWdodDIwMTc_size_16_color_FFFFFF_t_70 1][]

页面当中监听关闭按钮

window.onbeforeunload = function(e) {
    	 console.log(e);
     	 // e.returnValue = false;
    };

**您的支持是对我最大的鼓励。**

**![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JyaWdodDIwMTc_size_16_color_FFFFFF_t_70 2][]**

[20200925180001610.png]: /images/20221123/74743027509547cfa3712aa21294660c.png
[https_npm.taobao.org_mirrors_electron]: https://npm.taobao.org/mirrors/electron
[20200925180312748.png]: /images/20221123/59cd5ff3d12841718d421a43ffaab119.png
[20200925180918811.png]: /images/20221123/53b70855f1c44b2b966a7a6b592381e7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JyaWdodDIwMTc_size_16_color_FFFFFF_t_70]: /images/20221123/bedf2eee5858470ea9d6e278ae9a9889.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JyaWdodDIwMTc_size_16_color_FFFFFF_t_70 1]: /images/20221123/cb44a20e89134790848202a99d23ec53.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JyaWdodDIwMTc_size_16_color_FFFFFF_t_70 2]: /images/20221123/5bcc090e1dbb4d10a47aaf6ff34976ae.png