electron-egg使用
本研究文档主要对使用electron-egg框架将vue项目打包为C/S包的过程、所遇问题及对应解决方案进行说明。
第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
最后需要在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
输入node-gyp -v 可查看是否下载成功,成功截图如下
node-gyp -v
下载完成执行命令:npm run re-sqlite
npm run re-sqlite
2.2 离线环境
-
需要在在线环境下执行2.1中的所有操作
-
在在线环境下对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) 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 目录下
- 安装配置环境
(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包)
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:入口文件
4.3 常见配置
config.default.js 文件
1.配置开发环境参数,图中vue port需要与vue项目端口保持一致
2.开发者工具与打包后的顶部菜单配置(建议开启顶部菜单)
说明:开启开发者工具在启动时会自动弹出,即使不开启在顶部菜单栏也可以手动调出
3.主进程端口,打包后启动端口
- 修改应用名称、图标:
\# ./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)
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
更多推荐
所有评论(0)