夜雨聆风背景：为了将我的一个常用功能需求做成一个电脑程序，方便日常使用，我跟着ai做了一个最小化的程序，思路是利用electron来打包网页应用为exe，exe的功能只有一个标题显示和会弹窗的按钮。先跑通这个流程，后期再一步一步增加其他功能。
步骤梳理如下：
【1】环境搭建：安装Node.js、配置VScode
【2】项目初始化：创建目录、初始化配置文件package.json
【3】编写代码：
①main.js:程序的大脑（负责窗口管理）
②index.html：程序的外衣（界面展示）
【4】配置文件调整与运行：解决首次启动时的报错
【5】打包发布：下载打包工具，解决网络镜像与相同权限问题
【1】环境搭建
在官网安装Node.j后，打开cmd验证，
C:\Users\xxxxx>node -vv24.16.0
成功出现版本号，安装成功。
VS code已安装配置。
【2】项目初始化
创建项目文件夹my-first-app，在其中打开终端，运行：
npm init -y得到初始配置文件package.json，
{"name": "test","version": "1.0.0","description": "","main": "index.js","scripts": {"test": "echo \"Error: no test specified\" && exit 1"},"keywords": [],"author": "","license": "ISC"}
随后安装核心依赖：
npm install electron依赖被写入package.json末尾↓
{......,"dependencies": {"electron": "^42.3.0"}}
并自动生成node_modules文件夹存放工具库，package-lock.json用来
记录当前项目所有插件及其嵌套依赖具体版本的
↑安装依赖后项目配置文件package.json中的代码解读
【3】编写核心代码
①大脑（main.js）：控制程序何时打开窗口、加载哪个文件。
const { app, BrowserWindow } = require('electron')functioncreateWindow() {const win = new BrowserWindow({width: 1000,height: 700})win.loadFile('index.html')}app.whenReady().then(() => {createWindow()})
↑项目入口文件main.js中的代码解读
②外衣（index.html）：网页界面
<!DOCTYPE html><html><head><title>我的软件</title></head><body><h1>Hello Electron!</h1><buttononclick="alert('成功了！')">点击我</button></body></html>
↑项目界面文件index.html中的代码解读
【4】配置文件调整与运行
修改package.json，将入口对齐并增加启动脚本：
①“main”: "index.js" → “main”: "main.js"
②添加脚本“start”："start": "electron ."
"scripts": {"test": "echo \"Error: no test specified\" && exit 1","start": "electron ."},
下面是坑（一）
首次运行npm start 时，Electron需要下载核心二进制运行文件。
Downloading electron-v42.3.0-win32-x64.zip: [=-------------------------------------------------] 1% ETA: 356.0 seconds在首次下载过程中出现以下错误↓
Error: Electron failed to install correctly. Please delete `node_modules/electron` and run "npx install-electron --no" manually.询问ai后（应该直接遵循错误提示也可以），删除node_modules和package-lock.json文件，再运行 npm install来重新生成。
C:\Users\xxxxx\Documents\my-first-app>npm installadded 23 packages, and audited 24 packages in 11s2 packages are looking for fundingrun `npm fund` for detailsfound 0 vulnerabilities
再次运行 npm start ，下载electron核心文件，时间较长，完成后出现以下问题 ↓
C:\Users\xxxxx\Documents\my-first-app>npm start...Error: ENOENT: no such file or directory, open 'C:\Users\xxxxx\Documents\my-first-app\node_modules\electron\path.txt'...
想读取 path.txt
↓
发现文件不存在
最后成功启动了electron来打开这个项目，是以一个电脑程序的方式打开的！
【5】打包为EXE安装包
①安装打包工具“electron-builder”
npm install electron-builder --save-dev"scripts": {"test": "echo \"Error: no test specified\" && exit 1","start": "electron .","build": "electron-builder"},
③运行npm run build进行打包，build不是内置的命令，需要加run来运行。
下面是坑（二）
报错。
C:\Users\xxxxx\Documents\my-first-app>npm run build....⨯ Package "electron" is only allowed in "devDependencies". Please remove it from the "dependencies" section in your package.json.
问题描述：
Electron 只能放在 配置文件中的devDependencies中
不能放在 dependencies
询问ai后获得解决方法 ↓
将Electron从dependencies转移到devDependencies中，并重新打包
首次打包的过程中需要下载【发布版 Electron】和【Windows代码签名工具】
...• downloading url=https://github.com/electron/electron/releases/download/v42.3.0/electron-v42.3.0-win32-x64.zip size=144 MB parts=8• downloaded url=https://github.com/electron/electron/releases/download/v42.3.0/electron-v42.3.0-win32-x64.zip duration=3m4.645s...• downloading url=https://github.com/electron-userland/electron-builder-binaries/releases/download/winCodeSign-2.6.0/winCodeSign-2.6.0.7z size=5.6 MB parts=1• downloaded url=https://github.com/electron-userland/electron-builder-binaries/releases/download/winCodeSign-2.6.0/winCodeSign-2.6.0.7z duration=31.89s（下面报错了）
下面是坑（三）
紧接着报错的代码为↓
...errorOut=ERROR: Cannot create symbolic link : �ͻ���û����������Ȩ�� : C:\Users\xxxxx\AppData\Local\electron-builder\Cache\winCodeSign\737252963\darwin\10.12\lib\libcrypto.dylibERROR: Cannot create symbolic link : �ͻ���û����������Ȩ�� : C:\Users\xxxxx\AppData\Local\electron-builder\Cache\winCodeSign\737252963\darwin\10.12\lib\libssl.dylib
问题描述：
cmd没有管理员权限
↓
无法创建symbolic link
这个问题不解决，也能打包出一个可以运行的exe，但是没有setup安装包，还少了一些其他的东西。
解决方法：
在项目文件夹下，用管理员权限启动cmd
下面是坑（四）
重新打包后出现另一问题
....⨯ Get "https://github.com/electron-userland/electron-builder-binaries/releases/download/winCodeSign-2.6.0/winCodeSign-2.6.0.7z": read tcp 192.168.3.140:59151->20.205.243.166:443: wsarecv: A connection attempt failed because the connected party did not properly respond after a period of time, or established connection failed because connected host has failed to respond.....
网络原因
↓
从github下载打包工具失败
通过国内的镜像网站下载，在管理员权限下的cmd中运行以下代码↓
set ELECTRON_BUILDER_BINARIES_MIRROR=https://npmmirror.com/mirrors/electron-builder-binaries/将下载的地址设置到国内镜像站后，重新进行打包。
【6】最终成果
完工后，dist文件夹下顺利生成了：
①免安装版：解压即用的 win-unpacked 文件夹。
②安装包：my-first-app Setup 1.0.0.exe。
打包后的程序体积会比较大，因为Electron内置了一个完整的Chromium浏览器和Node.js环境。
