【electron】一、安装，打包配置

Lucky_Turtle2025-08-29 18:11

文章目录

https://www.electronjs.org/zh/docs/latest/

安装

环境

node：v22.13.1

npm：10.9.2

js 复制代码 
npm init
npm install electron --save-dev

启动

先构建下面第一个项目

js 复制代码 
npm run start

打包工具

js 复制代码 
npm install --save-dev @electron-forge/cli
npx electron-forge import

打包一个exe

使用electron-builder

js 复制代码 
npm install electron-builder --save-dev

package.json中加入

js 复制代码 
"build": {
   "appId": "com.xh",
   "copyright":"xh",
   "productName":"xh",
   "icon": "logo.ico",
   "win": {
     "target": [
       "portable"
     ]
   }
 },

命令行参数（CLI）

js 复制代码 
electron-builder build                    构建命名                      [default]
electron-builder install-app-deps         下载app依赖
electron-builder node-gyp-rebuild         重建自己的本机代码
electron-builder create-self-signed-cert  为Windows应用程序创建自签名代码签名证书
electron-builder start                    使用electronic-webpack在开发模式下运行应用程序(须臾要electron-webpack模块支持)

配置npm代理（可能无效）

无效情况下选择手动下载

js 复制代码 
npm config set proxy http://localhost:7890
npm config set https-proxy https://localhost:7890
# 取消代理
npm config delete proxy
npm config delete https-proxy

第一个项目

https://gitee.com/encounterxh/cdn_element_plus_vue

js 复制代码 
|- my-project
	|- html
		|- index.html
	|- main.js
	|- node_modules
	|- package.json

main.js

js 复制代码 
const { app, BrowserWindow } = require("electron/main");

const createWindow = () => {
  //当app准备好后，执行createWindow创建窗口
  const win = new BrowserWindow({
    width: 800, //窗口宽度
    height: 600, //窗口高度
    autoHideMenuBar: true, //自动隐藏菜单档
    alwaysOnTop: true, //置顶
    x: 0, //窗口位置x坐标
    y: 0, //窗口位置y坐标
  });
  //加载一个远程页面

  // win.loadFile('./html/index.html')
  win.loadURL("http://baidu.com/");
};

app.whenReady().then(() => {
  createWindow();

  app.on("activate", () => {
    if (BrowserWindow.getAllWindows().length === 0) {
      createWindow();
    }
  });
});

app.on("window-all-closed", () => {
  if (process.platform !== "darwin") {
    app.quit();
  }
});

index.html （Vue2）

html 复制代码 
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta
      http-equiv="Content-Security-Policy"
      content="default-src 'self'; script-src 'self'"
    />
    <meta
      http-equiv="X-Content-Security-Policy"
      content="default-src 'self'; script-src 'self'"
    />
    <title>Hello from Electron renderer!</title>
  </head>
  <body>
    <h1>Hello from Electron renderer!</h1>
    <p>👋</p>
    <p id="info"></p>
  </body>
  <script src="./renderer.js"></script>
</html>

index.html （Vue3示例）

element plus

参考：https://www.cnblogs.com/wzhqueeen/p/18051474

js 复制代码 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=1000, initial-scale=1.0">
    <title>模型管理</title>
    <!-- Import style -->
    <link rel="stylesheet" href="//unpkg.com/element-plus/dist/index.css" />
    <!-- Import Vue 3 -->
    <script src="//unpkg.com/vue@3"></script>
    <!-- Import component library -->
    <script src="//unpkg.com/element-plus"></script>
    <script src="//unpkg.com/@element-plus/icons-vue"></script>
</head>

<body>
<div id="app">
    <div class="container">
        <el-form :model="form" label-width="80px" label-position="left">
            <el-text class="mx-1" size="large">模型管理 - </el-text>
            <el-text class="b" size="large">新增模型</el-text>
            <el-form-item label="模型标题" style="margin-top: 30px;">
                <el-input v-model="form.name" size="large" placeholder="请输入模型标题" />
            </el-form-item>
            <el-form-item label="备注">
                <el-input v-model="form.desc" type="textarea" rows="5" placeholder="请输入模型标题" />
            </el-form-item>
            <el-form-item label="模型地址">
                <el-input v-model="form.name" size="large" placeholder="请输入模型标题" />
            </el-form-item>
            <el-form-item label="模型动作">
                <el-input v-model="form.name" size="large" placeholder="请输入模型标题" />
            </el-form-item>
            <el-form-item label="封面">
                <el-upload v-model:file-list="fileList" action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
                           list-type="picture-card" :on-preview="handlePictureCardPreview" :on-remove="handleRemove">
                    <el-icon>
                        <Plus />
                    </el-icon>
                </el-upload>
                <el-dialog v-model="dialogVisible">
                    <img w-full :src="dialogImageUrl" alt="Preview Image" />
                </el-dialog>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="">提交</el-button>
                <el-button>取消</el-button>
            </el-form-item>
        </el-form>
    </div>
</div>

<script>
    const { createApp, ref } = Vue
    const App = {
        setup() {
            const form = ref({
                name: '',
                desc: '',
            })
            const dialogImageUrl = ref('');
            const dialogVisible = ref(false);
            const disabled = ref(false);
            const fileList = ref([]);
            const handleRemove = (file) => {
                console.log(file)
            }
            const handlePictureCardPreview = (file) => {
                dialogImageUrl.value = file.url
                dialogVisible.value = true
            }
            const handleDownload = (file) => {
                console.log(file)
            }
            return {
                form,
                dialogImageUrl,
                dialogVisible,
                disabled,
                fileList,
                handleRemove,
                handlePictureCardPreview,
                handleDownload
            }
        }
    }

    const app = createApp(App);
    app.component('Plus', ElementPlusIconsVue.Plus)
    app.use(ElementPlus);
    app.mount("#app");
</script>

<style>
    * {
        margin: 0;
        padding: 0;
        list-style: none;
    }

    #app {
        width: 1000px;
        height: 650px;
        margin: 30px auto;
        border: 2px solid #cccccc;
    }

    .container {
        width: 600px;
        margin: 50px auto;
    }

    .b {
        font-weight: 600;
    }

    .el-input {
        --el-input-width: 220px;
    }
</style>
</body>

</html>

package.json

js 复制代码 
{
  "name": "node_project_ts",
  "version": "1.0.0",
  "main": "main.js",
  "scripts": {
    "start": "electron-forge start",
    "test": "echo \"Error: no test specified\" && exit 1",
    "package": "electron-forge package",
    "make": "electron-forge make"
  },
  "author": "xh",
  "license": "ISC",
  "description": "xh",
  "devDependencies": {
    "@electron-forge/cli": "^7.8.1",
    "@electron-forge/maker-deb": "^7.8.1",
    "@electron-forge/maker-rpm": "^7.8.1",
    "@electron-forge/maker-squirrel": "^7.8.1",
    "@electron-forge/maker-zip": "^7.8.1",
    "@electron-forge/plugin-auto-unpack-natives": "^7.8.1",
    "@electron-forge/plugin-fuses": "^7.8.1",
    "@electron/fuses": "^1.8.0",
    "electron": "^37.2.4"
  },
  "dependencies": {
    "electron-squirrel-startup": "^1.0.1"
  }
}

打包

https://www.cnblogs.com/mrwh/p/12961446.html

打包
https://blog.csdn.net/ly124100427/article/details/89210343
https://www.psvmc.cn/article/2019-03-14-electron-package.html

单exe

json 复制代码 
{
  "name": "electron-app",
  "version": "1.0.0",
  "description": "An Electron application with Vue",
  "main": "./out/main/index.js",
  "author": "example.com",
  "homepage": "https://electron-vite.org",
  "scripts": {
    "format": "prettier --write .",
    "lint": "eslint --cache .",
    "start": "electron-vite preview",
    "dev": "electron-vite dev",
    "build": "electron-vite build",
    "postinstall": "electron-builder install-app-deps",
    "build:win": "npm run build && electron-builder --win"
  },
  "dependencies": {
    "@electron-toolkit/preload": "^3.0.2",
    "@electron-toolkit/utils": "^4.0.0",
    "@element-plus/icons-vue": "^2.3.1",
    "element-plus": "^2.10.4"
  },
  "build": {
    "appId": "com.zheyuevr",
    "copyright": "zheyu",
    "productName": "zheyu_推流机",
    "icon": "./resources/logo.ico",
    "win": {
      "target": [
       "portable"
      ]
    },
    "extraResources": {
      "from": "./node/",
      "to": "node"
    }
  },
  "devDependencies": {
    "@electron-toolkit/eslint-config": "^2.0.0",
    "@electron-toolkit/eslint-config-prettier": "^3.0.0",
    "@vitejs/plugin-vue": "^6.0.0",
    "axios": "^1.7.9",
    "electron": "^37.2.3",
    "electron-builder": "^25.1.8",
    "electron-vite": "^4.0.0",
    "eslint": "^9.31.0",
    "eslint-plugin-vue": "^10.3.0",
    "prettier": "^3.6.2",
    "vite": "^7.0.5",
    "vue": "^3.5.17",
    "vue-eslint-parser": "^10.2.0"
  }
}

win安装程序

json 复制代码 
{
  "name": "electron-app",
  "version": "1.0.0",
  "description": "An Electron application with Vue",
  "main": "./out/main/index.js",
  "author": "example.com",
  "homepage": "https://electron-vite.org",
  "scripts": {
    "format": "prettier --write .",
    "lint": "eslint --cache .",
    "start": "electron-vite preview",
    "dev": "electron-vite dev",
    "build": "electron-vite build",
    "postinstall": "electron-builder install-app-deps",
    "build:win": "npm run build && electron-builder --win"
  },
  "dependencies": {
    "@electron-toolkit/preload": "^3.0.2",
    "@electron-toolkit/utils": "^4.0.0",
    "@element-plus/icons-vue": "^2.3.1",
    "element-plus": "^2.10.4"
  },
  "build": {
    "appId": "com.zheyuevr",
    "copyright": "zheyue",
    "productName": "zheyue_推流机",
    "icon": "./resources/logo.ico",
    "win": {
      "target": [
        {
          "target": "nsis",
          "arch": [
            "ia32"
          ]
        }
      ]
    },
    "nsis": {
      "oneClick": false,
      "perMachine": true,
      "allowElevation": true,
      "allowToChangeInstallationDirectory": true,
      "installerIcon": "./resources/logo.ico",
      "uninstallerIcon": "./resources/logo.ico",
      "installerHeaderIcon": "./resources/logo.ico",
      "createDesktopShortcut": true,
      "createStartMenuShortcut": true,
      "shortcutName": "zheyue_推流机"
    },
    "extraResources": {
      "from": "./node/",
      "to": "node"
    }
  },
  "devDependencies": {
    "@electron-toolkit/eslint-config": "^2.0.0",
    "@electron-toolkit/eslint-config-prettier": "^3.0.0",
    "@vitejs/plugin-vue": "^6.0.0",
    "axios": "^1.7.9",
    "electron": "^37.2.3",
    "electron-builder": "^25.1.8",
    "electron-vite": "^4.0.0",
    "eslint": "^9.31.0",
    "eslint-plugin-vue": "^10.3.0",
    "prettier": "^3.6.2",
    "vite": "^7.0.5",
    "vue": "^3.5.17",
    "vue-eslint-parser": "^10.2.0"
  }
}

报错

打包报错1

js 复制代码 
报错信息：

An unhandled rejection has occurred inside Forge:
Error: Failed with exit code: 1
���ڳ��Դӡ�eletest.nuspec�����ɳ������
Authors is required.
Description is required.
at ChildProcess.<anonymous> (C:\WWW\eletest\node_modules\electron-winstaller\lib\spawn-promise.js:49:24)
    at ChildProcess.emit (node:events:513:28)
    at ChildProcess.emit (node:domain:489:12)
    at maybeClose (node:internal/child_process:1100:16)
    at Process.ChildProcess._handle.onexit (node:internal/child_process:304:5)

 

解决方法：

package.json补充Authors和Description信息

electron-builder打包报错

手动下载包
https://blog.csdn.net/weixin_44490021/article/details/141465519

  1. 手动下载这三个包
    electron-userland/electron-builder-binaries

    链接中找到对应的三个版本的包，下载压缩包

  2. 解压三个文件放Electron-builder缓存中

    整个解压三个文件，放到对应的缓存位置中

    默认路径一般是在C盘的 AppData\Local 文件夹下，例如：【C:\Users\Lenovo\AppData\Local】

打开electron-builder文件夹下的Cache文件夹，在Cache文件夹里面放解压后的缓存文件

winCodeSign-2.6.0

nsis-resources-3.4.1

nsis-3.0.4.1

复制代码 
  • electron-builder  version=24.9.1 os=10.0.22631
  • loaded configuration  file=package.json ("build" field)
  • description is missed in the package.json  appPackageFile=D:\project\electron-vite\package.json
  • author is missed in the package.json  appPackageFile=D:\project\electron-vite\package.json
  • writing effective config  file=dist_electron\builder-effective-config.yaml
  • packaging       platform=win32 arch=x64 electron=27.1.2 appOutDir=dist_electron\win-unpacked
  • default Electron icon is used  reason=application icon is not set
  • downloading     url=https://mirrors.huaweicloud.com/electron-builder-binaries/winCodeSign-2.6.0/winCodeSign-2.6.0.7z size=5.6 MB parts=1
  • downloaded      url=https://mirrors.huaweicloud.com/electron-builder-binaries/winCodeSign-2.6.0/winCodeSign-2.6.0.7z duration=7.871s
  ⨯ cannot execute  cause=exit status 2
                    out=
    7-Zip (a) 21.07 (x64) : Copyright (c) 1999-2021 Igor Pavlov : 2021-12-26
    
    Scanning the drive for archives:
    1 file, 5635384 bytes (5504 KiB)
    
    Extracting archive: C:\Users\gys\AppData\Local\electron-builder\Cache\winCodeSign\807703091.7z
    --
    Path = C:\Users\gys\AppData\Local\electron-builder\Cache\winCodeSign\807703091.7z
    Type = 7z
    Physical Size = 5635384
    Headers Size = 1492
    Method = LZMA2:24m LZMA:20 BCJ2
    Solid = +
    Blocks = 2


    Sub items Errors: 2

    Archives with Errors: 1

    Sub items Errors: 2

解决办法：

使用管理员身份运行PowerShell，在项目目录执行打包命令即可（之后在vscode等工具可输入打包命令直接打包）
https://blog.csdn.net/vifaceeeeee/article/details/134693524

附加：安装界面改英文

https://www.jianshu.com/p/eebe047db2ca

设置electron-builder参数

nsis中新增一项

json 复制代码 
"nsis": {
      ...
      "installerLanguages": ["en_US"],
    }

默认情况下，electron-builder会选取用户系统语言作为安装器的语言，比如在英文的windows下，安装器也是英文的，想要在中文系统下，也显示英文的安装器，就需要指定installerLanguages这个参数

参考：

复制代码 
https://github.com/electron-userland/electron-builder/issues/646
相关推荐
weixin_4903543413 分钟前
Vue设计与实现
前端·javascript·vue.js
GISer_Jing1 小时前
React过渡更新：优化渲染性能的秘密
javascript·react.js·ecmascript
烛阴1 小时前
带你用TS彻底搞懂ECS架构模式
前端·javascript·typescript
wayhome在哪2 小时前
3 分钟上手！用 WebAssembly 优化前端图片处理性能（附完整代码）
javascript·性能优化·webassembly
web前端1233 小时前
# 多行文本溢出实现方法
前端·javascript
人间观察员3 小时前
如何在 Vue 项目的 template 中使用 JSX
前端·javascript·vue.js
EndingCoder3 小时前
安装与环境搭建：准备你的 Electron 开发环境
前端·javascript·electron·前端框架
Running_slave3 小时前
Web跨标签页通信应该怎么玩？
javascript·css·后端
雪中何以赠君别3 小时前
Vue 2 与 Vue 3 双向绑定 (v-model) 区别详解
前端·javascript·vue.js
热门推荐
01UV安装并设置国内源02KGG转MP3工具|非KGM文件|解密音频03不再让Windows更新！&Edge游戏助手卸载及关闭自动更新04奈飞工厂官网，国内Netflix影视在线看|中文网页电脑版入口05Qwen3-Coder 快速上手教程 | Qwen Code + Claude Code06【2025.08.06最新版】Android Studio下载、安装及配置记录（自动下载sdk）07Linux下V2Ray安装配置指南08突破百度网盘的下载限速，两种方法教会你【超详细】09Claude Code VSCode集成开发指南：AI编程助手完整配置10LMArena 图生图，生成产品图提示词prompt