问题背景

在开发基于 Electron 的鸿蒙应用时，我们遇到了两个常见问题：

  1. 版本配置问题：需要将 Electron 版本升级到 34
  2. 网络安装问题：使用默认 npm 源安装 Electron 时出现网络超时或连接失败

问题描述

问题一：Electron 版本配置

在 package.json 中配置 Electron 34 版本后，执行 npm install 时遇到以下错误：

npm error path /path/to/node_modules/electron
npm error command failed
npm error signal SIGINT
npm error command sh -c node install.js

问题二：网络连接问题

使用国内网络环境时，Electron 二进制文件下载失败：

npm error RequestError: socket hang up
npm error     at ClientRequest.<anonymous>

这是因为 Electron 的二进制文件托管在 GitHub 上，国内访问速度慢且不稳定。

解决方案

方案一：配置 npm 镜像源

创建 .npmrc 文件，配置使用国内镜像源：

文件位置：web_engine/src/main/resources/resfile/resources/app/.npmrc

registry=https://registry.npmmirror.com
electron_mirror=https://npmmirror.com/mirrors/electron/

方案二：package.json 配置

确保 package.json 中正确配置了 Electron 34：

{
  "name": "hello-world-app",
  "version": "1.0.0",
  "description": "Simple Hello World Electron App",
  "main": "main.js",
  "scripts": {
    "start": "electron ."
  },
  "dependencies": {},
  "devDependencies": {
    "electron": "^34.0.0"
  }
}

实施步骤

步骤 1：创建 .npmrc 文件

在项目根目录（app 文件夹）创建 .npmrc 文件：

cd web_engine/src/main/resources/resfile/resources/app
touch .npmrc

步骤 2：配置镜像源

编辑 .npmrc 文件，添加以下内容：

registry=https://registry.npmmirror.com
electron_mirror=https://npmmirror.com/mirrors/electron/

步骤 3：安装依赖

执行安装命令：

npm install

步骤 4：验证安装

安装成功后，会看到类似输出：

npm warn deprecated boolean@3.2.0: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

added 70 packages in 7s

17 packages are looking for funding
  run `npm fund` for details

镜像源说明

为什么使用 npmmirror.com？

  1. 速度快：国内 CDN 加速，下载速度显著提升
  2. 稳定性好：避免 GitHub 连接超时问题
  3. 同步及时：与官方源保持同步
  4. 免费使用：无需注册，直接使用

其他可选镜像源

如果 npmmirror.com 不可用，可以尝试：

# 淘宝镜像（已停止维护，不推荐）
registry=https://registry.npmmirror.com

# 腾讯云镜像
registry=https://mirrors.cloud.tencent.com/npm/

# 华为云镜像
registry=https://repo.huaweicloud.com/repository/npm/

完整示例代码

main.js（简化版）

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

function createWindow() {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: false,
      contextIsolation: true,
      preload: path.join(__dirname, 'preload.js'),
    },
  });

  win.loadFile('index.html');
  return win;
}

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

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

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

index.html（Hello World）

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Hello World</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', Arial, sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        }

        h1 {
            color: white;
            font-size: 48px;
            text-align: center;
        }
    </style>
</head>
<body>
    <h1>Hello World</h1>
</body>
</html>

preload.js

const { contextBridge } = require('electron');

contextBridge.exposeInMainWorld('electronAPI', {
    versions: {
        chrome: process.versions.chrome,
        node: process.versions.node,
        electron: process.versions.electron
    }
});

常见问题排查

Q1: 安装后仍然无法运行？

解决方案：

  • 检查 Electron 版本是否正确安装：npx electron --version
  • 确认 main.js 路径正确
  • 检查 index.html 文件是否存在

Q2: 镜像源配置不生效？

解决方案：

  • 确认 .npmrc 文件位置正确（在 package.json 同级目录）
  • 删除 node_modules 和 package-lock.json 后重新安装
  • 检查是否有全局 npm 配置覆盖本地配置

Q3: 仍然出现网络错误？

解决方案：

  • 尝试使用代理：npm config set proxy http://proxy.example.com:8080
  • 检查防火墙设置
  • 尝试使用其他镜像源

最佳实践

  1. 版本锁定：使用精确版本号而非 ^，确保团队环境一致

    "electron": "34.0.0"  // 而非 "^34.0.0"

  2. 镜像源管理：将 .npmrc 加入版本控制，确保团队统一使用

    git add .npmrc

  3. 环境变量：也可以使用环境变量配置镜像源

    export ELECTRON_MIRROR=https://npmmirror.com/mirrors/electron/

  4. CI/CD 配置：在持续集成环境中也要配置镜像源

image-20251120105220363

总结

通过配置 .npmrc 文件使用国内镜像源，我们成功解决了 Electron 34 安装时的网络问题。这种方法不仅适用于 Electron，对于其他 npm 包的安装也同样有效。

关键要点：

  • ✅ 使用 .npmrc 配置本地镜像源
  • ✅ 优先使用 npmmirror.com 镜像
  • ✅ 将配置文件纳入版本控制
  • ✅ 定期更新 Electron 版本以获得安全补丁

参考资料

# flutter # electron # 鸿蒙
Logo
Harmony PC 开发者社区

赋能鸿蒙PC开发者，共建全场景原生生态，共享一次开发多端部署创新价值。

更多推荐

鸿蒙 PC 底层开发技术详解（二）：OpenHarmony、HarmonyOS 与 GNU/Linux 的关系

OpenHarmony：非 GNU 系的 Linux 发行版；HarmonyOS：OpenHarmony 的商业发行版。

avatar Harmony PC 开发者社区

鸿蒙 PC 底层开发技术详解（五）：应用沙箱环境和非应用沙箱环境的区别

本文分析了鸿蒙系统（HarmonyOS/OpenHarmony）的应用沙箱机制及其对终端操作的影响。系统通过类似Docker容器的沙箱隔离每个应用，HiShell终端运行在这种受限环境中，导致诸多限制：挂载点隔离、DAC机制差异、SELinux管控和seccomp过滤等，使得常规UNIX命令和调试工具无法正常工作。相比之下，通过hdc shell接入的调试终端虽能脱离沙箱限制，但仍受权限约束，仅在

avatar Harmony PC 开发者社区

鸿蒙 PC 底层开发技术详解（四）：代码签名机制对我们的影响

在鸿蒙 PC 的 HiShell 环境中运行二进制文件时，系统会强制校验该文件及其加载的所有 `.so` 库的代码签名。若签名无效，系统将拦截运行并报错 `permission denied`。

avatar Harmony PC 开发者社区