electron-egg使用

已于 2022-11-07 23:51:02 修改
阅读量5.7k 收藏 17
点赞数 3
文章标签： electron vue.js npm
于 2022-11-07 20:53:36 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45371023/article/details/127738851
版权

第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 离线环境

  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，仅用于下载打包所需模块，打出的包可能报错，无法使用，解决方法请参考 常见问题 章节。

  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 目录下

  1. 安装配置环境

(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.主进程端口，打包后启动端口

在这里插入图片描述

  1. 修改应用名称、图标：
\# ./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

我不是你的梦
关注
  • 3
    点赞
  • 踩
  • 17
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
简化部署流程，提升开发效率：介绍 Electron Egg 打包优化
算命de博客
02-19 1404
在开发桌面应用程序时，优化打包流程是至关重要的，可以帮助开发人员节省时间和精力，提高生产力。本文将介绍如何使用 Electron Egg 框架进行打包优化，使得打包过程更加高效顺畅。通过以上步骤，我们可以优化 Electron Egg 的打包流程，使得整个部署过程更加顺畅高效。借助这些优化，开发人员可以更专注于应用程序的开发和功能实现，提高开发效率，加快产品上线速度。Electron Egg 框架为我们提供了一套完整的开发工具和打包流程，让桌面应用程序的开发变得更加简单、便捷。
electron-egg 如何把任意网站打包成桌面软件
qq_38847914的博客
04-07 788
以前，开发一个桌面软件要花费大量的人力和时间。现在随着Electron的出现，大大简化了开发门槛。今天，给大家介绍一个工具，让你5分钟之内就把一个网站变成一个可安装的桌面软件。所需工具electron-egg是一个简单、快速、功能丰富的跨平台桌面软件开发框架。
高频面试题：electron/Egg前端面试频率较高的面试题和答案（十二）
最新发布
05-13 1151
Electron 和 Egg.js 是两个不同的 JavaScript 技术，分别用于构建桌面应用和后端服务。以下是一些可能会在前端面试中问到的关于 Electron 和 Egg.js 的高频面试题及答案：
成功启动electron-egg项目，electron+vue的傻瓜式搭建
三巧的博客
12-23 8880
electron-egg项目的初步使用
electron-egg: 一个入门简单、跨平台、企业级桌面软件开发框架
skywalk8163的专栏
03-28 702
electron-egg: 一个入门简单、跨平台、企业级桌面软件开发框架。
基于Electron-Egg框架开发发票报销记录软件简记
Theirsky的博客
02-27 1632
基于electron-egg开发的发票报销记录软件。
electron-egg: 新一代桌面应用开发框架
qq_32660241的博客
06-20 3851
EE框架已经应用于医疗、学校、政务、股票交易、ERP、娱乐、视频、企业等领域客户端。
探索 Electron Egg：构建跨平台桌面应用的理想选择
算命de博客
02-19 1256
Electron Egg是一个基于Electron和Vue.js的框架，旨在简化构建桌面应用的开发流程。它提供了一个完整的开发环境，包括自动更新、调试工具、插件支持等功能，使开发者能够专注于应用的逻辑和用户界面的设计，而无需关注底层的技术细节。Electron Egg为开发者提供了一个快速、简单、强大的框架来构建跨平台桌面应用。它集成了Electron和Vue.js的优势，为开发者提供了丰富的功能和灵活的扩展性。如果你正在寻找一个理想的工具来构建你的下一个桌面应用，不妨考虑一下Electron Egg！
electron-egg:一个快速的、易于使用的桌面软件开发框架
04-28
electron-egg 一个简单、快速、功能丰富的跨平台桌面软件开发框架。 查看： :trophy: 码云最有价值开源项目 特性 直接打包成windows版、Mac版、Linux版或者以web网站运行。 可以用服务端的开发思维，来编写桌面软件。 也可以用前端来开发，数据服务请求外部api即可。 服务端的技术场景几乎都可以使用，如：路由、中间件、控制器、服务、定时任务、队列、插件等。 桌面软件常见功能，后续逐步集成并完善或提供demo。 软件自动更新。 默认UI 使用vue编写，经典三栏样式，可自定义 开始使用 下载 # gitee git clone https://gitee.com/wallace5303/electron-egg.git # github git clone https://github.com/wallace5303/electron-egg.git 安装 # 提升安装速度，使
前端知识笔记（二十四）———快速创建桌面端(electron-egg)
lrx276的博客
12-04 1711
electron-egg是一个基于Electron和Egg.js的框架，可以用于快速构建跨平台的桌面应用程序。2.简单易用：electron-egg提供了一些简单易用的API，窗口管理、菜单管理、文件操作等功能。1.兼容平台：electron-egg可以在Windows、MacOS和Linux等多个平台上运行。3.可定制化：electron-egg提供了丰富的插件和扩展机制，方便进行高度定制化。electron-egg: 一个入门简单、跨平台、企业级桌面软件开发框架。介绍 | electron-egg。
electron-egg-master.zip
12-06
**标题：“electron-egg-master.zip”** 这是一款基于Electron、Vue.js和Node.js的桌面应用程序开发框架，名为“electron-egg”。它专为简化企业级桌面应用的创建而设计，提供了一套全面的工具链和结构化方案，使得...
eggjs简介和项目地址，帮你快速入门
05-31
Egg.js 为企业级框架和应用而生，我们希望由 Egg.js 孕育出更多上层框架，帮助开发团队和开发人员降低开发和维护成本。
electron-go-picnic:在Electron应用程序内使用Go程序的工具
05-16
包含用于将Go程序与Electron一起使用的工具的软件包。 最初是从我的提取，该使用我的程序监视整个系统中实时的git repo变化。 职能 getAppPath ，获取开发和生产中的应用程序路径（从存档中解压缩应用程序时）。 ...
electron-egg桌面软件开发框架 v3.10.0.zip
03-21
5. 打包与发布：完成开发后，使用Electron-egg提供的打包工具生成可分发的安装包。 五、应用场景与案例 Electron-egg适用于需要跨平台桌面应用的场景，如办公软件、媒体播放器、开发工具等。许多开源项目和商业产品...
electron-egg桌面软件开发框架 v2.5.0.zip
03-21
同时，"electron-egg-v2.5.0"文件夹包含了框架的源代码，这为我们提供了深入学习和理解Electron-egg架构的机会。 对于毕业设计论文或者计算机案例研究，Electron-egg是一个理想的选题。它既能让学生接触到前沿的Web...
electron-egg打包国产系统arm64遇到的问题和解决记录
weixin_55088768的博客
09-18 1949
使用electron-egg框架开发客户端软件，适配国产系统打包时出现的问题及解决办法
ElectronEgg v3.8.0 发布，快速开发一个桌面应用
qq_32660241的博客
10-23 407
桌面软件（办公方向、 个人工具），仍然是未来十几年 PC 端需求之一，提高工作效率。electron 技术是流行趋势，QQ、百度翻译、阿里网盘、迅雷、有道云笔记 …
独立开发者工具：electron-egg桌面软件开发框架
qq_32660241的博客
09-27 1268
独立开发者工具：electron-egg桌面软件开发框架
将vue项目使用electron-egg打包成桌面程序
weixin_43822237的博客
04-19 2497
使用electron-egg打包成桌面程序.exe格式的，electron-egg打包框架一直在进行维护，electron-vue现在不建议使用了，因为已经不维护了，使用这个打包会出现很多毛病，本人就是受害者呀，使用electron-vue打包后iframe、embed、webview都不兼容还有其他一些就不一一举例说明； 第一步：先将vue项目执行指令打包成dist 文件夹 npm run build 第二步：新建一个文件夹使用git指令下载electron-egg框架 # gitee .
electron-egg项目打包成exe
05-22
你可以使用 electron-builder 来将 Electron-egg 项目打包成可执行文件。 以下是基本步骤： 1. 安装 electron-builder： ``` npm install electron-builder --save-dev ``` 2. 在 package.json 文件中添加以下代码： ``` "build": { "productName": "Your App Name", "appId": "com.yourcompany.yourapp", "directories": { "output": "build" }, "files": [ "app/**/*", "config/**/*", "public/**/*", "server/**/*", "package.json" ], "asar": true, "win": { "icon": "build/icon.ico", "target": "nsis" } } ``` 其中，productName 是你的应用程序名称，appId 是你的应用程序 ID，directories.output 是输出目录，files 包含需要打包的文件和文件夹，asar 是启用 asar 包装，win.icon 是 Windows 平台的图标，win.target 是打包目标，这里使用 NSIS 安装程序。 3. 在终端中运行以下命令： ``` npm run build ``` 这将会在 build 文件夹中生成可执行文件。 注意: 打包时需要注意一些细节问题，例如：打包时可能会出现缺少依赖包的问题，需要在 package.json 文件中添加依赖项。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值