零、总结

前排总结，electron-egg启动失败的可能原因。
1、没有使用nvm
2、node版本太高
3、github连不上

半、本篇目的

测试electron-egg需要什么环境，你也可以按步骤搭建，没有什么技术要求，很简单

一、安装 VirtualBox

安装 VirtualBox 虚拟机软件。
VirtualBox官网
VirtualBox默认虚拟机位置：https://blog.csdn.net/wcy_1011/article/details/122537831
下载、安装、创建教程：VirtualBox7.0虚拟机 轻松安装win11系统 - Bilibili
建议下载最新版VirtualBox7.0，又不要钱你弄个旧的干什么

二、下载Windows11镜像

微软官网下载win11地址
访问微软官网下载镜像

二、下载Windows11镜像(替代步骤)

ITELLYOU网站
可能的Win11文件名：Windows 11 (consumer editions), version 22H2 (updated Dec 2022) (x64) - DVD （Chinese-Simplified)
登录ITELLYOU，筛选Windows，鼠标移动至Windows11点击详细信息，复制下载链接，获取到下载链接自行下载

三、创建虚拟电脑

简体中文创建向导
注意：虚拟电脑长时间不使用突然想用忘记密码登录不上太尴尬，登录微软账号或者把密码写在虚拟电脑名称里
黑屏没反应：在VirtualBox里动动你的鼠标键盘让win11虚拟机知道你还活着
漫长的等待。。。。。
内存海知己，天蓬若比猪。

其他、设置Win11系统(可选步骤)

安装VirtualBox增强功能
可有可无，安装之后鼠标更顺畅，文件拖拽时不时就报错，提前准备文件分享工具
1.依次点击虚拟机菜单栏的[]设备>>>安装增强功能，在光驱中可以看到新增的文件。
2.双击VBoxWindowsAdditions运行安装程序。
按自己习惯修改Win11的各种设置
设置共享剪贴板和拖放

四、安装node.js

手快安装了node.js?卸掉。
用nvm安装node.js：（node.js 安装教程）
nvm的github
可能的下载链接：nvm的github releases文件
可能的下载链接：nvm官网
运行以下命令

nvm node_mirror https://npmmirror.com/mirrors/node/
nvm npm_mirror https://npmmirror.com/mirrors/npm/
nvm install 16.9.1
nvm use 16.9.1

使用node的更高版本可能后续会收到以下提示(截取部分)，甚至再后续启动项目会报错失败
Unsupported engine {package: ‘@achrinza/node-ipc@9.2.2’,required: { node: ‘8 || 10 || 12 || 14 || 16 || 17’ },current: { node: ‘v18.12.1’, npm: ‘8.19.2’ }}
最后发现正确的node版本是

nvm install 16.9.1
nvm use 16.9.1

项目成功启动，成功启动在第八步

五、安装Git

可能的下载链接：Git的Github
可能的下载链接：Git的npm镜像

六、下载electron-egg

桌面上Shift右键点击Git Bash Here,运行以下命令

git clone https://gitee.com/dromara/electron-egg.git

终于要开始准备重要的东西了

七、设置镜像源并npm install

运行以下命令

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

进入electron-egg项目，运行以下命令

npm install
start cmd /k "cd frontend && npm install"

没错，npm install要在根目录和frontend目录分别运行一次
注意：electron-egg的安装文档，该文档的[安装-常用命令]部分在能正常使用项目之前不要看，那是给幸运儿看的，你看只会钻牛角尖，项目还一堆报错开不起来呢，看别人都启动了你不生气？？

八、真正的启动

可能的启动时间：11秒~15秒
在项目根目录运行A命令或者B命令
A.冷启动：

start cmd /k "cd frontend && npm run serve" && timeout /t 17 && npm run dev

B.已启动serve，只启动electron：

npm run dev

只想使用electron . 启动

在项目根目录运行以下命令

.\node_modules\electron\dist\electron.exe .

九、预发布模式，测试一下功能是否正常

根目录运行以下命令

npm run start

十、打包

1.构建前端资源

根目录运行以下命令

start cmd /k "cd frontend && npm run build"

等待build出现█DONE█字样

2.移动前端资源文件

根目录运行

npm run rd

3.代码加密，这里就跳过了

4.修改项目名称

这里就装模做样的改一下名字，位置在根目录下package.json中name属性
打开密码生成器，随便复制一串字符过来当项目名称

{"name": "ee-nds3fhER0PuCwxBHkXtq",//其他项//其他项//...
}

5.设置镜像

运行以下命令

npm config set electron_builder_binaries_mirror=https://registry.npmmirror.com/-/binary/electron-builder-binaries/

6.安装Python

莫名其妙：安装python3？干嘛用的？？？node不会调winapi？？？你确定不是安装python2
特殊：删除微软Python
特殊：win11菜单搜索【管理应用执行别名】关闭python和python3，治疗微软发癫0kb文件占茅坑
访问Python官网下载，此处下载最新的Python3
可能的下载链接：python官方ftp服务器
Python安装教程百度搜搜就行了
一定要保证在安装的第一个界面勾选Add python.exe to PATH
最后一个界面disable path length limit最好也点一下
安装python完成

7.安装vs，Windows的C++构建工具

其实windows-build-tools会自行找Python2运行，不注意命令行输出是完全感觉不到Python的存在的
安装并使用VSCode，本次使用目的，实时监听log文件输出，VSCode官网
打开%temp%文件夹，删除该缓存文件夹中的内容排除干扰(个别删不了跳过)，保留窗口后续要用
以管理员模式运行以下命令

npm install -g windows-build-tools

在%temp%文件夹中找到最新的文件名类似于dd_installer_20221223130500.log的文件，用VSCode打开
查看这个dd_installer_***.log文件，确保日志中输出了这行内容
[0518:0001][2022-12-23T13:05:09] Closing the installer with exit code 0
在%temp%目录下创建一个名为dd_client_.log的文件
编辑%Temp%\dd_client_.log，输入以下内容并保存

Closing installer. Return code: 3010.

回头查看windows-build-tools的安装进度，发现命令行非常痛快的输出了changed 104 packages in 24m并完美结束

8.连上程序员的老家，Github

访问https://steampp.net/下载软件 Watt Toolkit「原名 Steam++」，连接Github

9.正式打包

根目录运行以下命令(预计运行时间：3分钟)

npm run build-w-64

啊！漂亮的蓝色！

10.最终成果

你将在以下路径找到打包好的程序，此文件为安装包

.\electron-egg\out\ee-win-2.4.0-x64.exe

你将在以下路径找到打包好的程序文件夹，此文件夹中的可执行文件即程序启动文件

.\electron-egg\out\win-unpacked

其他

删除npm日志文件，运行以下命令(反正也看不懂，笑死)

del %localappdata%\npm-cache\_logs\*.log

十一.在electron-egg里创建一个 Vue 应用

1.确认已安装nvm

运行以下命令

nvm -v

如果输出了版本号则已安装nvm，未安装则需要把nvm、node、npm全家桶装上，nvm官网

2.配置源地址

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

3.create-vue搭建项目

在项目根目录运行以下命令(是的，项目根目录，安装向导会创建文件夹)(本篇文章项目根目录永远是.\electron-egg)

npm init vue@latest

什么？报错了？别管，再运行一遍，是嘞泰斯投，不是拉丝泰斯投

npm init vue@latest

接着会出现安装导航选项
第一项、提示安装create-vue@latest
当然得安装，输入y回车
第二项、项目名称(当然也是文件夹名称)
输入frontend，直接回车
其他项全部回车，选择默认No

4.切换目录位置下载依赖并启动

在根目录运行以下命令并等待安装完毕

start cmd /k "cd frontend && npm install"

不要着急启动，给vue的项目添加serve脚本，编辑package.json文件

.\electron-egg\frontend\package.json
编辑前(注意，以下内容仅显示了一部分文件)

  "scripts": {"dev": "vite","build": "vite build","preview": "vite preview"},

编辑后(添加一条serve脚本，内容与dev一致)

  "scripts": {"dev": "vite","serve": "vite","build": "vite build","preview": "vite preview"},

不要着急启动，将electron和vue两个项目设置相同的ip地址和端口号

此处设置：IP地址：localhost，端口号：5174
明确设置vue的IP地址为localhost，端口号为5174，编辑以下文件
.\electron-egg\frontend\vite.config.js
编辑前(注意，以下内容仅显示了一部分文件)

// https://vitejs.dev/config/
export default defineConfig({plugins: [vue()],resolve: {alias: {'@': fileURLToPath(new URL('./src', import.meta.url))}}
})

编辑后(vue的IP地址为localhost，端口号为5174)
(如果vue的服务器正在运行，服务器将会在你修改配置文件后立即生效，无需干预)

// https://vitejs.dev/config/
export default defineConfig({// vue的IP地址为localhost，端口号为5174server: {host: "localhost",port: 5174,},// vue的IP地址为localhost，端口号为5174plugins: [vue()],resolve: {alias: {'@': fileURLToPath(new URL('./src', import.meta.url))}}
})

将vue的IP地址、端口号告知electron，编辑以下文件
.\electron-egg\electron\config\config.default.js
编辑前(注意，以下内容仅显示了一部分文件)

  config.developmentMode = {default: 'vue',mode: {vue: {hostname: 'localhost',port: 8080},react: {hostname: 'localhost',port: 3000},html: {hostname: 'localhost',indexPage: 'index.html'},}};

编辑后(将vue的设置抄下来，default为vue，hostname为localhost，port为5174)

  config.developmentMode = {default: 'vue',mode: {vue: {hostname: 'localhost',port: 5174},react: {hostname: 'localhost',port: 3000},html: {hostname: 'localhost',indexPage: 'index.html'},}};

启动electron-egg+vue

项目根目录运行以下命令(本篇文章项目根目录永远是.\electron-egg)
冷启动：

start cmd /k "cd frontend && npm run serve" && timeout /t 2 && npm run dev

或者仅启动electron：

npm run dev

成功启动项目！

成功启动electron-egg项目，electron+vue的傻瓜式搭建相关推荐

1. 凯迪生态携手海通安恒，成功启动SAP实施项目

   2017年4月10日上午,凯迪生态环境科技股份有限公司(以下简称"凯迪生态")信息化项目启动会暨战略合作协议签订仪式在武汉隆重召开,标志着项目的成功启动. 凯迪生态联合创始人唐宏明 ...

2. egg项目部署及PM2的使用

   egg代码部署 在本地开发时,我们可以使用 egg-bin dev 即npm run dev来启动服务,但是在部署应用的时候不可以这样使用.因为dev的方式是针对本地开发做很多处理,而生产运行需要一个 ...

3. electron 打包 php,electron 将现有vue项目改成支持electron桌面端应用

   vue过滤器和组件化 !DOCTYPE htmlhtml lang="en"head meta charset="UTF-8" meta name=" ...

4. Electron桌面项目-解决throw new Error('Electron failed to install correctly, please delete node_modules..

   安装这个网站走完安装部署步骤 创建electron桌面项目代码等结构参照以下链接github 一开始按照网上进行操作,最后会报错,无法执行,直接抛出--throw new Error('Electro ...

5. Vue.js-Day03-PM【组件通信（安装Vetur插件、父子组件通信、子父组件通信）、项目发送与启动（项目发给别人、启动别人的项目）】

   Vue.js实训[基础理论(5天)+项目实战(5天)]博客汇总表[详细笔记] 目   录 6.组件通信 安装 Vetur 插件 6.1.父子组件通信 子定义props 父组件模板 图解 6.2.子父组 ...

6. tomcat启动成功 未加载项目_新里程|尚品食品国际贸易合伙人项目成功启动

   2019,是河南尚品食品有限公司的"管理元年",管理升级.机制完善及模式创新已成为公司治理层面的规划和方向.2月28日,河南尚品食品国际贸易合伙人项目正式启动,开创了公司项目合伙人 ...

7. tomcat启动成功并能运行项目，但无法显示那只小猫

   今天无意中遇到这个问题,很奇怪,一番search之后,发现了原因(可能是原因之一,不一定适合每种情况) 1.最好是本地(不用IDE)启动tomcat,看看情况,是否能成功启动,是否能显示tom猫 2. ...

8. 启动egg项目时报错ERROR 11104 nodejs AgentWorkerDiedError [master] agent_worker#1:9544 died (code : 1, signa

   今天在使用命令行启动egg项目,执行 npm run dev时总是报错 2020-06-11 10:44:32,332 ERROR 11104 nodejs.AgentWorkerDiedError: ...

9. 如何使用创业项目计划书模板成功启动你的创业之路

   创业是每个有追求的年轻人都会考虑的问题.但是在创业过程中,许多人仍然处于懵懂的状态,对创业思路没有清晰的规划或没有足够的实操经验.因此,编写一个创业计划书模板是非常重要的.在这篇文章中,我们将介绍如何 ...

最新文章

1. 游戏中每日刷新实现思路浅析
2. 机器学习导论（张志华）：核定义
3. 使用gulp和vsc构建高效的typescript开发环境
4. 【简便代码】1063 计算谱半径 (20分)_10行代码AC
5. android 百分数与进度显示
6. ubuntu远程连接windows工具rdesktop
7. DOM Element对象的offsetXXX方法
8. 数据结构--赫夫曼树及其应用
9. Knative 健康检查机制分析
10. 通用模块 -- Dubbo 用户模块
11. 解放原画师！Wav2Lip 用 AI 听音同步人物口型
12. 提气！阿里平头哥三篇论文入选 ISCA
13. [Yii Framework] yii中如何不加载layout
14. 全国计算机等级考试在线报名,全国计算机等级考试网上报考具体流程
15. drony+fiddler抓包
16. 【渝粤教育】国家开放大学2018年秋季 2129T药物化学 参考试题
17. 网络层（四）划分子网
18. SaaS部署和私有化部署的区别及各自的优点
19. 调用高德接口查询经纬度(根据地址)
20. android源代码下载

热门文章

1. 手写redis@Cacheable注解 支持过期时间设置
2. 有哪些简单好用的国产数据库？
3. 自媒体平台今日头条申请秘籍(转)
4. 时间序列分析——基于R | 第2章 时间序列的预处理习题代码
5. Android预置默认输入法
6. 关于电子科技大学内共享单车使用的调查报告
7. 算法笔记 胡凡 codeup 吃糖果
8. 编码通信与魔术初步（一）——通信浅谈
9. 医保是不是只有住院才能在单位报销,什么样的病才能报销
10. 网络营销之网络炒作案例分析、精髓及方法讨论