如何将现有 HTML 的项目直接打包成 Electron

前言

Electron 是一个开源框架，可以让您使用 JavaScript、HTML 和 CSS 构建跨平台桌面应用程序。

本教程将向您展示如何使用 Electron 将一个现有的 HTML 项目 打包成桌面应用程序。

安装 Node 环境

首先，您需要安装 Node.js 和 npm。如果您还没有安装，请到 Node.js 官网 下载并安装。

如已安装，请忽略此步骤

创建 Electron 项目

创建一个新文件夹并在文件下 新建如下几个文件：

修改package.json文件

打开 package.json 的文件，并复制粘贴以下代码:
例如:

{
  "name": "my-electron-app",
  "version": "1.0.0",
  "main": "main.js",
  "scripts": {
    "start": "electron .",
    "package": "electron-packager . --overwrite",
    "package-windows32": "electron-packager . --overwrite --platform=win32 --arch=x64" 
  },
  "devDependencies": {
    "electron-packager": "^17.1.1"
  },
  "dependencies": {
    "electron": "^23.0.0"
  }
}

修改 main.js文件

打开 main.js 的文件，并复制粘贴以下代码：
例如：

const { app, BrowserWindow } = require('electron')

function createWindow () {
  // 创建浏览器窗口
  const win = new BrowserWindow({
    width: 800,
    height: 800,
    webPreferences: {
      nodeIntegration: true
    }
  })

  // 加载index.html文件
  win.loadFile('index.html')
}

app.whenReady().then(createWindow)

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

app.on('activate', () => {
  if (BrowserWindow.getAllWindows().length === 0) {
    createWindow()
  }
})

安装electron,electron-packager：

npm install electron electron-packager

构建应用：使用以下命令构建electron应用：

electron .

此时 您的 Electron 应用现在应该正常运行，并显示您的 HTML

打包成桌面端应用：

npm run package

此时 在您的根目录会生成一个 文件夹，里面会有一个exe应用

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

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

图标需要ioc格式，新建一个logo文件 app.ico 放在根目录，在package.json中 package后继续添加命令

{
  "name": "my-electron-app",
  "version": "1.0.0",
  "main": "main.js",
  "scripts": {
    "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"
  },
  "devDependencies": {
    "electron-packager": "^17.1.1"
  },
  "dependencies": {
    "electron": "^23.0.0"
  }
}