electron-egg使用

第1章 前言

1.1 说明

本研究文档主要对使用electron-egg框架将vue项目打包为C/S包的过程、所遇问题及对应解决方案进行说明。

在本文档中使用案例为electron-egg V2 建模工具V9.2.1 node V16.16.0，windows10环境。

electron-egg文档地址：https://www.yuque.com/u34495/mivcfg/xnhmms

1.2. 注意事项

electron-egg V2推荐node版本>=14.16.0

windows7环境不支持node V16.16.0及以上版本，如使用建议参考electron-egg文档

第2章 环境搭建

2.1 在线环境

2.1.1 下载electron-egg框架demo

gitee地址：https://gitee.com/wallace5303/electron-egg

github地址：https://github.com/wallace5303/electron-egg

2.1.2 下载安装node

node官网：nodejs.org/zh-cn/

下载后开始安装，可自定义选择安装目录（不建议含中文路径），之后一直点击next，直至安装完成。node会自动配置系统变量。

安装完成后在命令框输入node -v 和npm -v显示下图表示安装成功。

如报错中包含：Use ‘–location=global’’ 请参考 常见问题 章节。

以下配置为更改node组件下载、缓存和日志全局目录，该配置为非必须配置，可以跳过

node全局默认路径

node_global：C:\Users\Lenovo\AppData\Roaming\npm

node_cache：C:\Users\Lenovo\AppData\Local\npm-cache

配置方法如下：在node安装路径下新建node_global、node_cache文件夹，右击两个文件夹，选择 属性-安全标签，点击 编辑，在 组或用户名 中选择Users，在Users的权限中 完全控制 一栏后打勾，然后点击应用。在命令框中输入

npm config set prefix “你创建的node_global绝对路径”

npm config set cache “你创建的node_cache绝对路径”

配置完成后在命令框中输入 npm config list 查看结果，

 npm config list
1

最后需要在path系统变量中手动配置全局模块目录使以上配置生效，如下图所示

2.1.3 安装electron-egg所需模块

2.1.3.1 设置npm国内镜像源（可选，提高下载速度，防止下载超时）

npm config set registry=https://registry.npmmirror.com

npm config set disturl=https://registry.npmmirror.com/-/binary/node

2.1.3.2 设置electron下载源（可选，下载慢时可以配置）

npm config set electron_mirror=https://registry.npmmirror.com/-/binary/electron/

2.1.3.3 下载electron-egg所需模块

进入下载的electron-egg目录 ./electron-egg/

下载命令：npm install

等待下载完成

如果报ERR electron下载失败，则进入 ./electron-egg/node_modules/electron 目录下再次执行 npm install 命令

如果下载失败后在./electron-egg下不存在node_modules目录，则考虑2.1.2中自定义全局目录node_global和node_cache的文件夹权限是否正确配置，如正确配置，可尝试将文件夹 属性-常规标签下只读取消并应用，然后尝试重新下载，再次执行2.1.3.3。如仍然不存在node_modules目录请参考本文档 常见问题 章节。

2.1.3.4 构建sqlite

需要python3环境（windows10环境自带无需下载）

需要node-gyp，下载命令：npm i node-gyp --location=global

npm i node-gyp --location=global
1

输入node-gyp -v 可查看是否下载成功，成功截图如下

node-gyp -v 
1

下载完成执行命令：npm run re-sqlite

npm run re-sqlite
1

2.2 离线环境

1. 需要在在线环境下执行2.1中的所有操作

2. 在在线环境下对electron-egg执行打包操作，原因：执行打包操作会额外自动下载打包模块。命令如下：

   (1) 进入electron-egg目录下，cd .\frontend\ 进入frontend目录（存放前端文件）
   
   (2) npm install 下载前端文件所需模块，electron-egg自带一个vue demo（demo不包含模块，所有需要执行该命令）
   
   (3) npm run build 打包前端
   
   (4) cd ../ 返回electron-egg目录下
   
   (5) npm run rd 移动前端静态文件
   
   (6) npm run build-w-64 打包为windows10 64位
   
   npm run build-w 打包为windows10 32位
   
   注1：打包mac和linux存在问题，本文档暂未考虑，命令请参考4.1 常用命令 或electron-egg文档（打包需要在对应操作系统下进行）
   
   注2：该操作中打包使用了electron-egg自带的vue demo，仅用于下载打包所需模块，打出的包可能报错，无法使用，解决方法请参考 常见问题 章节。
   
   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   12
   13
   14
   15
   16
   17
   18

3. 移动所需资源至离线环境，资源清单如下：

(1) node安装包

(2) node安装目录下的node_modules文件，node配置的

node_cache、node_global文件（所在位置参考2.1.2节中的说明）、

(3) 执行完此操作之前所有操作的electron-egg项目

(4) electron-egg打包相关模块，文件名：ee-updater、electron、electron-builder，位置：C:\Users\Lenovo\AppData\Local 目录下

4. 安装配置环境

(1) 安装node 参考2.1.2

(2) 将node_modules、node_cache、node_global文件覆盖到相应位置（node_modules文件在node安装目录下；node_cache、node_global文件所在位置参考2.1.2节中的说明）

(3) npm install -offline （建议以管理员模式执行命令） 等待离线安装完成，成功图片参考如下（node-gyp -v 检查node-gyp是否安装成功）

非管理员模式执行，可能卡住或报错

如与错误请检查上一步是否操作正确，检查node_modules、node_cache、node_global文件权限（权限可参考2.1.2或 常见问题 章节）。

(4) 将ee-updater、electron、electron-builder文件移动到 C:\Users\Lenovo\AppData\Local 目录下

第3章 打包

使用electron-egg框架进行前端打包，需要先将前端的所有文件复制到electron-egg框架中，并进行相关配置，然后进行打包。

3.1 打包前配置

(1) .\electron-egg\electron\config\config.default.js 配置打包后项目的ip和端口

(2) 如未使用electron-egg加密，则需要在 .\electron-egg\package.json 文件中build.files下删除 ‘“!electron”’（注释掉打包时会报错）

(3) 前端代码设置跨域代理，以连接后端，图中API_ROOT为后端ip和端口

| 前端项目配置，打包可仅配置生产环境
| 生产环境配置参考如下

使用配置，位置：前端 ./src/api/request.js （此跨域代理使用的是axios）

3.2 复制前端文件时有两种选择：

(1) 复制前端源码，将前端源码复制到frontend目录中，执行3.1后，使用npm run build命令打包前端，然后在根目录用npm run rd命令来移动刚刚打好的前端到public，然后可以在根目录进行测试（命令：npm run start ，该测试与实际打包结果存在差异，仅用于参考是否能运行），没有问题后用npm run build-w-64命令打包windows10 64位应用（npm run build-w 打包为windows10 32位），打包成功后会多一个out文件夹，这里就是打包好的文件，里面包含安装包，安装后就可以正常使用。

(2) 复制前端打包的静态文件，打包前需执行3.1，将前端打包好的dist文件放到electron-egg下的public文件夹中，然后可以在根目录进行测试（命令：npm run start ，该测试与实际打包结果存在差异，仅用于参考是否能运行），没有问题后用npm run build-w-64命令打包windows10 64位应用（npm run build-w 打包为windows10 32位），这就是打包好的文件，里面包含安装包，安装后就可以正常使用。

第4章 electron-egg说明

该章节对electron-egg作简单说明。

4.1 常用命令

electron-egg常用命令

\#预发布模式

npm run start

\#移动前端静态资源

npm run rd

\#打包 window版本

npm run build-w (32位)

npm run build-w-64 (64位)

npm run build-w-arm64 (arm64)

\#打包windows免安装版本

\#需要ee>=V2.2.1

npm run build-wz (32位)

npm run build-wz-64 (64位)

npm run build-wz-arm64 (arm64)

\#打包mac版本

npm run build-m

npm run build-m-arm64 (m1芯片架构)

\#打包linux版本

\#需要ee>=V2.2.1

npm run build-l (32位 deb包)

npm run build-l-64 (64位 deb包)

npm run build-l-arm64 (64位 deb包 arm64)

npm run build-l-armv71 (64位 deb包 armv71)

npm run build-lr-64 (64位 rpm包)

npm run build-lp-64 (64位 pacman包)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49

4.2 目录说明

build：打包用的资源和脚本

​         |——extraResources：额外资源目录

​         |——icons：软件图标（打包用到）

data：内置数据库文件

​         |——system.json：框架使用的数据库

electron：主进程服务

​         |——config：配置文件

​                 |——config.default.js：默认配置，都会加载

​                 |——config.loacl.js：dev环境加载

​                 |——config.prod.js：生产环境加载

​         |——controller：控制器

​         |——library：一些封装类

​         |——preload：预加载，在程序启动时加载，如自动升级功能，要提前加载代码

​         |——service：业务层

frontend：前端目录

logs：日志

out：打包后生成的执行文件

​         |——latest.yml：自动升级文件

​         |——***.exe：window应用安装包

public：资源目录

​         |——dist：前端资源会移动到这里，生产环境加载

​         |——html：一些模板

​         |——images：一些图片

main.js：入口文件
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47

4.3 常见配置

config.default.js 文件

1.配置开发环境参数，图中vue port需要与vue项目端口保持一致

2.开发者工具与打包后的顶部菜单配置（建议开启顶部菜单）

说明：开启开发者工具在启动时会自动弹出，即使不开启在顶部菜单栏也可以手动调出

3.主进程端口，打包后启动端口

4. 修改应用名称、图标：

\# ./package.json 文件

name: 项目名称（英文）

productName：可执行程序名称（英文）

appId：软件id

shortcutName：桌面快捷方式名称

\# ./frontend/vue.config.js

args[0].title=软件运行时头部名称

 

图标路径：

./build/icons/256*256.png (名称和尺寸必须一致 windows或linux 位深度32)

./build/icons/512*512.png (名称和尺寸必须一致 windows或linux 位深度32)

./build/icons/icon.ico (macOs) (名称和尺寸必须一致 256*256 位深度32 小于40kb)

 

最小化托盘图标

路径：./public/images/tray_logo.png (建议32*32或16*16)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

4.4 不打包运行

需要前端源码，进入frontend目录，运行前端，在electron-egg根目录运行项目，命令：npm run dev

运行前config.default.js 文件中端口需要与前端端口一致

第5章 常见问题

5.1 node -v 或 node -install -g 报错

错误中一般包含：Use ‘–location=global’’

解决方法：

(1) 以管理员模式修改node安装目录下npm和npm.cmd文件，参考下图

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9TRbCqjR-1667824815611)(file:///C:/Users/98091/AppData/Local/Temp/msohtmlclip1/01/clip_image002.jpg)]

(2) 所有使用-g的命令改为–location=global，例如node -install -g的命令改为node -install --location=global

5.2 下载electron-egg所需模块报错或卡住

如果超时查看是否执行2.1.3.1和2.1.3.2，如果执行，问题仍存在建议稍后重试

如果报ERR electron下载失败，则进入 ./electron-egg/node_modules/electron 目录下再次执行 npm install 命令

如果下载失败后在./electron-egg下不存在node_modules目录，则考虑2.1.2中自定义全局目录node_global和node_cache的文件夹权限是否正确配置，如正确配置，可尝试将文件夹 属性-常规标签 下 只读 取消并应用，然后尝试重新下载，再次执行2.1.3.3。如果仍不存在node_modules目录可使用vscode执行2.1.3.3。

使用vscode执行2.1.3.3可能会卡住较长时间，一般情况可使用命令框执行（建议以管理员模式）

如仍无法解决可使用命令框（管理员模式）和vscode多次尝试，或寻求其他帮助。

5.3 npm install -offline遭遇错误

卡住：使用管理员模式再次执行

报错：检查node_modules、node_global、node_cache文件夹权限，右击文件夹，选择 属性-安全标签，点击 编辑，在 组或用户名 中选择Users，在Users的权限中 完全控制 一栏后打勾，然后点击应用。在 属性-常规标签 中取消只读 。

5.4 打包错误

可能是环境没有安装成功，建议重新检查2.2节步骤，详细说明：使用npm run build-w-64进行打包时，需要下载环境，下载好的环境在C:\Users\Lenovo\AppData\Local目录下的electrone和electron-builder文件，离线环境需要拷贝这两个文件放到电脑上同样的位置

5.5 ERROR gyp python环境问题

检查是否安装node-gyp，安装后在electron-egg目录下执行npm run re-sqlite命令

5.6 打包后提示app.asar does not exist，过滤问题

原因为未使用electron-egg加密但过滤了源码，在package.json文件中删除 “!electron/”,删除后表示没有被过滤。

5.7 打包后只有前端页面，连接不到后端

开发者工具显示访问地址错误，

需要修改前端的request.js文件中baseURL，具体方法参考3.1

5.8 打包后白屏

尝试重新加载（ctrl+r）

5.9 关于打包其他操作系统应用

命令参考4.1 常见命令

注意打包时需要在对应操作系统中进行

5.10 关于修改应用名称及图标

参考4.3 常见配置 4

的位置

5.5 ERROR gyp python环境问题

检查是否安装node-gyp，安装后在electron-egg目录下执行npm run re-sqlite命令

5.6 打包后提示app.asar does not exist，过滤问题

原因为未使用electron-egg加密但过滤了源码，在package.json文件中删除 “!electron/”,删除后表示没有被过滤。

5.7 打包后只有前端页面，连接不到后端

开发者工具显示访问地址错误，

需要修改前端的request.js文件中baseURL，具体方法参考3.1

5.8 打包后白屏

尝试重新加载（ctrl+r）

5.9 关于打包其他操作系统应用

命令参考4.1 常见命令

注意打包时需要在对应操作系统中进行

5.10 关于修改应用名称及图标

参考4.3 常见配置 4