AI助学:我的第一个Electron桌面程序诞生记【学习记录】

背景：为了将我的一个常用功能需求做成一个电脑程序，方便日常使用，我跟着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 funding  run `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

↓

发现文件不存在

询问ai后可能是Node.js版本太新的原因，

下面是解决方法 ↓

↑ 询问ai后的解决方法

最后成功启动了electron来打开这个项目，是以一个电脑程序的方式打开的！

【5】打包为EXE安装包

①安装打包工具“electron-builder”

npm install electron-builder --save-dev

②在package.json中添加启动脚本"build": "electron-builder"

  "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.dylib    ERROR: 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环境。