鸿蒙 Electron 应用打包指南：从开发到鸿蒙应用市场分发

本文详细介绍了两种将Electron应用打包为鸿蒙系统支持的安装格式的方法。方案一使用electron-builder快速打包.deb格式，适合桌面端优先场景；方案二通过DevEcoStudio打包HAP格式，支持多设备分布式部署。文章包含完整的配置步骤，从依赖安装、资源准备到打包测试，并介绍了鸿蒙应用市场的上架规范，包括资质要求、审核注意事项等。两种方案各有优势，开发者可根据需求选择适合的打包方

2301_81549453

764人浏览 · 2025-11-28 14:20:43

2301_81549453 · 2025-11-28 14:20:43 发布

导语

开发完鸿蒙 Electron 应用后，如何将其打包为鸿蒙系统支持的安装格式，并顺利上架应用市场？本文详解两种打包方案（快速部署 + 分布式部署），附完整配置步骤和市场上架规范，让你的应用快速落地！

一、打包核心目标与格式选择

1. 核心目标

格式兼容：生成鸿蒙桌面 / 移动端可安装文件
生态适配：添加鸿蒙应用图标、权限配置、启动逻辑
分发支持：满足鸿蒙应用市场审核要求

2. 主流打包格式对比

格式	适用场景	优势	缺点
.deb	鸿蒙桌面端快速部署	安装简单，支持软件中心安装	不支持移动端，分布式能力弱
.hap	鸿蒙多端分布式部署	支持手机 / 平板 / 桌面多设备协同	配置复杂，需鸿蒙开发工具

二、方案一：Electron-builder 快速打包（桌面端优先）

1. 安装依赖与配置 package.json

bash

运行

# 项目根目录执行，安装打包工具
npm install electron-builder --save-dev

修改 package.json，添加打包配置（关键适配鸿蒙系统）：

json

{
  "name": "harmony-electron-notepad",
  "version": "1.0.0",
  "main": "./src/main.js",
  "scripts": {
    "start": "electron .",
    "build": "electron-builder" // 新增打包脚本
  },
  "build": {
    "appId": "com.harmony.electron.notepad", // 应用唯一标识（市场必填）
    "productName": "鸿蒙记事本", // 应用名称（贴合鸿蒙风格）
    "copyright": "Copyright © 2025 Your Name",
    "directories": {
      "output": "dist" // 打包输出目录
    },
    "linux": {
      "target": ["deb", "AppImage"], // 鸿蒙支持的Linux格式
      "icon": "./build/icon.png", // 应用图标（512x512像素）
      "category": "Utility" // 应用分类（鸿蒙市场适配）
    }
  },
  "dependencies": {
    "@harmonyos/node-adapter": "^1.0.0"
  },
  "devDependencies": {
    "electron": "^28.0.0",
    "electron-builder": "^24.9.1"
  }
}

2. 准备打包资源

应用图标：在项目根目录创建build文件夹，放入icon.png（推荐 512x512 像素，鸿蒙风格图标）
权限配置：在build文件夹创建harmony-permissions.json，配置鸿蒙应用权限：

json

{
  "permissions": [
    { "name": "ohos.permission.NOTIFICATION" },
    { "name": "ohos.permission.READ_USER_STORAGE" },
    { "name": "ohos.permission.WRITE_USER_STORAGE" }
  ]
}

3. 执行打包与安装测试

bash

运行

# 执行打包命令
npm run build

打包完成后，dist目录会生成两个文件：

.deb：通过鸿蒙软件中心安装（推荐正式分发）
.AppImage：无需安装，双击直接运行（适合测试）

安装步骤：

右键点击.deb文件 → 选择 “通过软件中心安装”
安装完成后，在鸿蒙应用列表中找到 “鸿蒙记事本” 启动
验证所有功能正常（保存、通知、设备信息获取）

配图 14：dist 目录文件截图、鸿蒙软件中心安装过程截图

三、方案二：DevEco Studio 打包 HAP（分布式部署）

1. 前置准备

下载安装 DevEco Studio：官方下载地址
安装 HarmonyOS SDK（Tools → SDK Manager → 选择 4.0 + 版本）
关联 Node.js 环境（DevEco Studio → Settings → Node.js → 选择已安装的 Node.js 路径）

2. 创建鸿蒙 ArkUI 工程并嵌入 Electron 资源

打开 DevEco Studio → Create Project → 选择 “Empty Ability” → 配置项目：
- Project Name：鸿蒙记事本
- Package Name：com.harmony.electron.notepad（与 package.json 的 appId 一致）
- Compile SDK：HarmonyOS 4.0+
- UI Syntax：ArkTS
生成 Electron 静态资源：

bash

运行

# 在Electron项目根目录执行
electron-builder --dir

复制资源：将dist/linux-unpacked目录下的资源（除可执行文件外）复制到鸿蒙工程的main_pages文件夹下的web目录
通过 Web 组件加载 Electron 资源，修改main_pages/Index.ets：

typescript

运行

import web_webview from '@ohos.web.webview';

@Entry
@Component
struct Index {
  private controller: web_webview.WebviewController = new web_webview.WebviewController();

  build() {
    Row() {
      Column() {
        Web({
          src: $rawfile('index.html'), // 指向复制的Electron页面
          controller: this.controller
        })
        .width('100%')
        .height('100%')
        .allowWindowOpen(true) // 允许窗口打开
        .allowFileAccess(true) // 允许文件访问
      }
      .width('100%')
    }
    .height('100%')
  }
}