Electron打包文件生成.exe文件打开即可使用

news2025/3/25 19:05:40

1 、Electron 打包，包括需要下载的内容和环境配置步骤

注意：Electron 是一个使用 JavaScript、HTML 和 CSS 构建跨平台桌面应用程序的框架

首先需要电脑环境有Node.js 和 npm我之前的文章有关nvm下载node的说明也可以去官网下载

检查是否有node和npm环境命令

node -v
npm -v

输出版本号，说明安装成功

2、创建 Electron 项目

2.1 创建项目目录
打开命令行工具，创建一个新的项目目录并进入该目录：

mkdir electron-app
cd electron-app

2.2 初始化项目

npm init -y

2.3 安装 Electron

npm install electron --save-dev

2.4 创建项目文件(可在vscode或者hbuilder打开并创建)

在项目根目录下创建 main.js 和 index.html 文件。
main.js 文件内容如下：

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

function createWindow () {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true,
      contextIsolation: false
    }
  })

  win.loadFile('index.html')
}

app.whenReady().then(() => {
  createWindow()

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

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

index.html 文件内容如下：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Hello World!</title>
</head>
<body>
  <h1>Hello World!</h1>
  We are using Node.js <script>document.write(process.versions.node)</script>,
  Chromium <script>document.write(process.versions.chrome)</script>,
  and Electron <script>document.write(process.versions.electron)</script>.
</body>
</html>

2.5 配置启动脚本

在 package.json 文件中添加启动脚本：

{
  "name": "electron-app",
  "version": "1.0.0",
  "description": "",
  "main": "main.js",
  "scripts": {
    "start": "electron ."
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "electron": "^23.2.1"
  }
}

2.6 启动项目

在命令行中执行以下命令启动 Electron 应用：

npm start

3. 选择打包工具并安装

常见的 Electron 打包工具有 electron-builder 和 electron-packager，这里以 electron-builder 为例。

3.1 安装 electron-builder

在项目目录下执行以下命令安装 electron-builder：

npm install electron-builder --save-dev

4. 配置 electron-builder

在 package.json 文件中添加 build 字段来配置打包选项：

{
  "name": "electron-app",
  "version": "1.0.0",
  "description": "",
  "main": "main.js",
  "scripts": {
    "start": "electron .",
    "pack": "electron-builder --dir",
    "dist": "electron-builder"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "electron": "^23.2.1",
    "electron-builder": "^23.6.0"
  },
  "build": {
    "appId": "com.example.electron-app",
    "productName": "Electron App",
    "directories": {
      "output": "dist"
    },
    "win": {
      "target": [
        "nsis"
      ]
    },
    "mac": {
      "target": [
        "dmg"
      ]
    },
    "linux": {
      "target": [
        "deb"
      ]
    }
  }
}

上述配置中，appId 是应用的唯一标识符，productName 是应用的名称，directories.output 是打包输出的目录。win、mac 和 linux 分别指定了不同操作系统下的打包目标。

5. 打包应用

5.1 打包测试
执行以下命令进行打包测试，该命令会在 dist 目录下生成一个未压缩的应用包：