Electron 离线环境打包解决方案(electron-forge)

1.在线环境准备

  1. 创建新项目:
bash 复制代码
# 创建并进入项目目录
mkdir my-electron-app && cd my-electron-app

# 初始化项目
npm init -y

# 安装 electron
npm install --save-dev electron

# 安装 electron-forge
npm install --save-dev @electron-forge/cli @electron-forge/maker-squirrel @electron-forge/maker-zip @electron-forge/maker-deb @electron-forge/maker-rpm

# 使用 electron-forge 转换项目
npx electron-forge import
  1. 下载所需的离线资源包:
bash 复制代码
# 在项目根目录创建离线资源文件夹
mkdir electron-offline-packages
cd electron-offline-packages

# 下载需要的 npm 包
npm pack electron
npm pack @electron-forge/cli
npm pack @electron-forge/core
npm pack @electron-forge/maker-squirrel
npm pack @electron-forge/maker-zip
npm pack @electron-forge/maker-deb
npm pack @electron-forge/maker-rpm

# 下载 Electron 二进制文件
# 从 https://npmmirror.com/mirrors/electron/ 下载对应版本
# 例如下载 v25.9.8 版本:
wget https://npmmirror.com/mirrors/electron/25.9.8/electron-v25.9.8-win32-x64.zip
wget https://npmmirror.com/mirrors/electron/25.9.8/electron-v25.9.8-win32-ia32.zip
wget https://npmmirror.com/mirrors/electron/25.9.8/SHASUMS256.txt
  1. 创建完整的项目模板:

项目结构:

plain 复制代码
my-electron-app/
├── src/
│   ├── index.html
│   ├── index.css
│   ├── index.js
│   └── preload.js
├── electron-offline-packages/
│   ├── electron-25.9.8.tgz
│   ├── electron-forge-cli-6.4.2.tgz
│   ├── electron-v25.9.8-win32-x64.zip
│   └── ...
├── package.json
├── forge.config.js
└── .npmrc

package.json:

json 复制代码
{
  "name": "my-electron-app",
  "version": "1.0.0",
  "description": "My Electron App",
  "main": "src/index.js",
  "scripts": {
    "start": "electron-forge start",
    "package": "electron-forge package",
    "make": "electron-forge make"
  },
  "author": "author",
  "license": "ISC",
  "dependencies": {
    "electron-squirrel-startup": "^1.0.0"
  },
  "devDependencies": {
    "@electron-forge/cli": "^6.4.2",
    "@electron-forge/maker-deb": "^6.4.2",
    "@electron-forge/maker-rpm": "^6.4.2",
    "@electron-forge/maker-squirrel": "^6.4.2",
    "@electron-forge/maker-zip": "^6.4.2",
    "electron": "25.9.8"
  }
}

forge.config.js:

javascript 复制代码
module.exports = {
  packagerConfig: {
    asar: true,
    download: {
      mirror: "https://npmmirror.com/mirrors/electron/",
      cache: "./electron-cache"
    }
  },
  rebuildConfig: {},
  makers: [
    {
      name: '@electron-forge/maker-squirrel',
      config: {
        name: 'my_electron_app'
      }
    },
    {
      name: '@electron-forge/maker-zip',
      platforms: ['darwin', 'win32']
    }
  ]
};

.npmrc:

plain 复制代码
registry=https://registry.npmmirror.com/
electron_mirror=https://npmmirror.com/mirrors/electron/
electron-custom-dir=25.9.8
  1. 打包整个项目:
bash 复制代码
# 将项目打包为 zip
zip -r electron-project-template.zip my-electron-app

2.离线环境使用

  1. 解压项目模板:
bash 复制代码
unzip electron-project-template.zip
cd my-electron-app
  1. 创建 electron 缓存目录:
bash 复制代码
mkdir -p electron-cache/electron/25.9.8
  1. 复制 Electron 二进制文件:
bash 复制代码
# 将之前下载的 electron 二进制文件复制到缓存目录
cp electron-offline-packages/electron-v25.9.8-win32-x64.zip electron-cache/electron/25.9.8/
cp electron-offline-packages/SHASUMS256.txt electron-cache/electron/25.9.8/
  1. 离线安装依赖:
bash 复制代码
# 安装离线包
npm install ./electron-offline-packages/*.tgz
  1. 执行打包:
bash 复制代码
# 打包应用
npm run make

打包后的输出目录:

plain 复制代码
out/
├── make/
│   └── squirrel.windows/
│       └── x64/
│           ├── my_electron_app-1.0.0 Setup.exe
│           └── ...
└── my-electron-app-win32-x64/
    └── my-electron-app.exe

3.网络问题

离线环境 npm run make 时会出现 econnrefuesd ip地址 错误

这个错误是因为在离线环境下还在尝试连接 npm 镜像源。需要完全禁用网络请求:

  1. 首先修改 .npmrc 文件:
plain 复制代码
registry=https://registry.npmmirror.com/  //或者换成本地代理地址http://localhost:4873/
electron_mirror=file:///D:/Electron/my-electron-app/electron-cache/ //换成
electron_custom_dir=25.9.8
offline=true
prefer-offline=true
no-proxy=true
https-proxy=false
proxy=false
  1. 修改 forge.config.js
javascript 复制代码
module.exports = {
  packagerConfig: {
    asar: true,
    download: {
      mirror: "file:///D:/Electron/my-electron-app/electron-cache/",
      cache: "./electron-cache",
      force: false
    },
    electronZipDir:'./electron-cache/electron/25.9.8/' // 这行☆☆☆☆☆
  },
  makers: [
    {
      name: '@electron-forge/maker-squirrel',
      config: {
        name: 'my_electron_app'
      }
    },
    {
      name: '@electron-forge/maker-zip',
      platforms: ['win32']
    }
  ],
  // 添加离线配置 ☆☆☆☆☆
  electronRebuildConfig: {
    onlyModules: [],
    force: false,
    offline: true
  }
};
  1. 确保电子缓存目录结构正确:
plain 复制代码
electron-cache/
└── electron/
    └── 25.9.8/
        ├── electron-v25.9.8-win32-x64.zip
        ├── electron-v25.9.8-win32-ia32.zip (如果需要)
        └── SHASUMS256.txt
  1. 运行打包时使用离线模式:
bash 复制代码
# Windows
set ELECTRON_ENABLE_OFFLINE_MODE=1
npm run make --offline

# Linux/Mac
export ELECTRON_ENABLE_OFFLINE_MODE=1
npm run make --offline
相关推荐
长潇若雪7 分钟前
结构体(C 语言)
c语言·开发语言·经验分享·1024程序员节
DARLING Zero two♡41 分钟前
关于我、重生到500年前凭借C语言改变世界科技vlog.12——深入理解指针(2)
c语言·开发语言·科技·1024程序员节
独行soc1 小时前
#渗透测试#SRC漏洞挖掘# 信息收集-Shodan进阶之Jenkins组件
安全·jenkins·安全威胁分析·1024程序员节·shodan
dawn1912282 小时前
Java 中的正则表达式详解
java·开发语言·算法·正则表达式·1024程序员节
黑不拉几的小白兔2 小时前
PTA L1系列题解(C语言)(L1_097 -- L1_104)
数据结构·算法·1024程序员节
小言从不摸鱼2 小时前
【Python】元组、字典与集合详解:数据容器的实战应用
人工智能·python·1024程序员节
魔法自动机3 小时前
Unity3D学习FPS游戏(3)玩家第一人称视角转动和移动
unity·1024程序员节·fps
Ylucius3 小时前
14天速成前端 ------学习日志(已完结)------ 后端程序员学习了解前端
java·开发语言·前端·vue.js·学习·状态模式·1024程序员节
清酒伴风(面试准备中......)3 小时前
计算机网络——开放系统互连参考模型
网络·计算机网络·1024程序员节