文章目录
零、总结半、本篇目的一、安装 VirtualBox二、下载Windows11镜像二、下载Windows11镜像(替代步骤)三、创建虚拟电脑其他、设置Win11系统(可选步骤)四、安装node.js五、安装Git六、下载electron-egg七、设置镜像源并npm install八、真正的启动只想使用electron . 启动
九、预发布模式，测试一下功能是否正常十、打包1.构建前端资源2.移动前端资源文件3.代码加密，这里就跳过了4.修改项目名称5.设置镜像6.安装Python7.安装vs，Windows的C++构建工具8.连上程序员的老家，Github9.正式打包10.最终成果其他
十一.在electron-egg里创建一个 Vue 应用1.确认已安装nvm2.配置源地址3.create-vue搭建项目4.切换目录位置下载依赖并启动在根目录运行以下命令并等待安装完毕不要着急启动，给vue的项目添加serve脚本，编辑package.json文件不要着急启动，将electron和vue两个项目设置相同的ip地址和端口号启动electron-egg+vue
零、总结
前排总结，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，端口号为5174
server: {
host: "localhost",
port: 5174,
},
// vue的IP地址为localhost，端口号为5174
plugins: [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
成功启动项目！
推荐阅读
您阅读本篇文章共花了：
发表评论