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
最后需要在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.1npm run build-wz (32位)npm run build-wz-64 (64位)npm run build-wz-arm64 (arm64)\#打包mac版本npm run build-mnpm run build-m-arm64 (m1芯片架构)\#打包linux版本\#需要ee>=V2.2.1npm 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：软件idshortcutName：桌面快捷方式名称\# ./frontend/vue.config.jsargs[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
electron-egg使用相关推荐
- Sugar-Electron 基于Electron的轻量级开发框架
Sugar-Electron 基于Electron的轻量级开发框架 前言 关于应用稳定性 关于开发效率低 特性 设计原则 安装 脚手架 核心功能 基础进程类--BaseWindow 举个例子 服务进程 ...
- Electron、QT和JAVA PC桌面开发技术比较
近几年PC桌面开发越来越多的被Electron,QT和Java技术占领.下面简单比较一下它们的优劣. Electron,势是开发用时快,社区轮子多,整合一下就能用.缺点是打包大,js计算弱. Java ...
- linux egg,Linux服务器部署egg，日志
如果Linux服务器node,mysql环境还不会配置,请先看https://blog.csdn.net/bocongbo/article/details/83788950 1.将项目git clon ...
- electron调用python_在Electron app中运行python脚本
asar Whether to package the application's source code into an archive, using Electron's archive form ...
- 【亲测可用】用Electron和electron-builder打包Vue项目为exe可执行文件安装包（不推荐，个人觉得没有VNISEdit和NW好用，而且有些配置文件还挺脑残！）
官方帮助文档http://www.electronjs.org/docs 有时候运行安装依赖包会很慢建议在(c)npm config edit之后弹出的.(c)npmrc记事本里面加入 electro ...
- 使用Rust + Electron开发跨平台桌面应用 ( 一 )
前言 近段时间学习了Rust,一直想着做点什么东西深入学习,因为是刚学习,很多地方都不熟悉,所以也就不能拿它来做编译器这些,至于web开发,实际上我并不建议拿这个来学习一门语言,大概有几个方面,一是w ...
- electron打包可选择安装位置，可自动更新
Electron打包调参软件(windows版) ----------------------------------可选安装位置,可自动更新,手动更新 一:引包:electron,electron- ...
- electron.js_在使用Electron.js之前我希望知道的事情
electron.js In this article, I'll share how you can avoid some of the mistakes I made when learning ...
- 学习使用React和Electron一次构建自己的桌面聊天应用程序
by Alex Booker 通过亚历克斯布克 学习使用React和Electron一次构建自己的桌面聊天应用程序 (Learn to build your own desktop chat app ...
- Electron的代码调试
刚接触Electron,尝试调试程序时,竟无从下手,所以把这个过程做了下记录 参考工程 根据Electron的官方文档:使用 VSCode 进行主进程调试:https://electronjs.org ...
最新文章
- ntfs 格式在linux下挂载
- Cocoa原理指南-学习和实践1
- C++ primer第六章6.5函数的学习 之特殊用途的语言特性
- 深入分析Java ClassLoader原理
- TiDB 增加 MySQL 内建函数
- Oracle Bitmap 索引结构、如何存储及其优势
- poj3557 Map Generator
- 瑞友企业私有云显示连接负载服务器错误,荣誉资质 | 瑞友天翼-应用虚拟化|远程接入|桌面虚拟化|国内虚拟化整体解决方案领导者...
- mathtype2022数学公式编辑器快捷键及操作技巧分享教程
- 渗透中POC、EXP、Payload、Shellcode和exploit的区别
- 使用3g模块SIM5360E收发短信
- 将.pyc反编译成.py
- Java菜鸟如何入门？1分钟入门
- 如何找到联盟营销人员：招募合适会员的10个方法
- 斐波那契回调线怎么画_交易者必备——斐波那契回调线的绝妙用法
- 恒生指数、国企指数以及红筹股指数
- 5C.炫酷迷宫（C++）
- 圆弧防线用计算机怎么算,一种圆弧形放线工具的制作方法
- 傅里叶分析和图像的傅里叶频谱解析
- 我的 2020 年终总结 - 成长不及预期的 3 年之痒