Electron 安装踩坑实录

electron安装报错解决

一时兴起，想将自己的 Vue 项目打包成桌面应用，于是开始接触 Electron。然而刚进入安装环节就遇到了困难，屡次下载失败。经过查阅大量资料，参考多位开发者的经验，终于成功安装了 Electron，迈出了前端转跨平台桌面应用的第一步哈哈哈

报错问题：

typescript 复制代码

npm warn deprecated boolean@3.2.0: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.
npm error code 1
npm error path F:\个人开源项目\hsk-Training-End\elecron_test\node_modules\electron
npm error command failed
npm error command C:\WINDOWS\system32\cmd.exe /d /s /c node install.js
npm error RequestError: connect ETIMEDOUT 20.205.243.166:443
npm error     at ClientRequest.<anonymous> (F:\个人开源项目\hsk-Training-End\elecron_test\node_modules\got\dist\source\core\index.js:970:111)
npm error     at Object.onceWrapper (node:events:632:26)
npm error     at ClientRequest.emit (node:events:529:35)
npm error     at origin.emit (F:\个人开源项目\hsk-Training-End\elecron_test\node_modules\@szmarczak\http-timer\dist\source\index.js:43:20)
npm error     at TLSSocket.socketErrorListener (node:_http_client:501:9)
npm error     at TLSSocket.emit (node:events:517:28)
npm error     at emitErrorNT (node:internal/streams/destroy:151:8)
npm error     at emitErrorCloseNT (node:internal/streams/destroy:116:3)
npm error     at process.processTicksAndRejections (node:internal/process/task_queues:82:21)
npm error     at TCPConnectWrap.afterConnect [as oncomplete] (node:net:1555:16)
npm error A complete log of this run can be found in: D:\nvm\nvm\v16.19.1\node_cache\_logs\2025-09-24T01_12_03_875Z-debug-0.log

解决方案

第一步、清空缓存

typescript 复制代码

npm cache clean --force

第二步、删除`"package-lock.json"`文件

第三步、修改`"package.json"`文件

typescript 复制代码

{
  "name": "elecron_test",
  "version": "1.0.0",
  "main": "main.js",
  "electronMirror": "https://npmmirror.com/mirrors/electron/",
  "scripts": {
    "start": "electron .",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "config": {
    "electron": {
      "mirror": "registry.npmmirror.com"
    }
  },
  "author": "WuYouke",
  "license": "ISC",
  "description": "第一个测试桌面项目",
  "dependencies": {
    "electron": "^38.1.2"
  }
}

第四步、重新执行安装`electron`命令

typescript 复制代码

npm install --verbose electron

第五步、创建窗口运行

typescript 复制代码

const { app, BrowserWindow } = require('electron');
app.on('ready', () => {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    autoHideMenuBar: true
  })
  win.loadURL('http://192.168.60.37:31653/login'); 把自己的项目放入其中即可
})

运行效果：

Electron 安装踩坑实录

electron安装报错解决

报错问题：

解决方案

第一步、清空缓存

第二步、删除"package-lock.json"文件

第三步、修改"package.json"文件

第四步、重新执行安装electron命令

第五步、创建窗口运行

如有错误将继续更新~

第二步、删除`"package-lock.json"`文件

第三步、修改`"package.json"`文件

第四步、重新执行安装`electron`命令