使用Electron 打包程序成EXE

最新推荐文章于 2025-07-02 00:02:07 发布
转载 最新推荐文章于 2025-07-02 00:02:07 发布 · 5k 阅读 · 6
文章标签：

#nodejs #webpack #Electron

本文介绍了使用Node.js的npm项目打包命令，以及安装electron-package包的方法。详细说明了正式打包的两种方式，包括直接使用命令和在package.json里添加代码。还给出了两种打包exe的方法链接及Electron相关文档链接，帮助开发者完成项目打包。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

以下内容皆为网上资料转载整理： 原文地址 https://blog.youkuaiyun.com/Quincylk/article/details/78252475

一.使用nodejs 的npm 项目打包命令：
   npm run build  打包项目

二、安装 electron-packager

PS：安装之前，先复制一份package.json文件到./app目录下，然后改下./app目录下package.json里 “main”: “app/main.js”的路径（去掉app/），不这样子的话，下面打包的时候会报错，有的版本识别不了应用路径。

1、使用命令 npm install --save-dev electron-packager 
将electron-package包安装到在项目下面， 
这里写图片描述 
安装完成之后，项目根目录下面的package.json文件里，会多出一条electron-package的版本号配置信息 
这里写图片描述

二、正式打包 
有两种方法： 
1、直接使用命令打包，electron-packager的打包基本命令是：

electron-packager <location of project> <name of project> <platform> <architecture> <electron version> <optional options>
  • 1

命令说明： 
* location of project：项目所在路径 
* name of project：打包的项目名字 
* platform：确定了你要构建哪个平台的应用（Windows、Mac 还是 Linux） 
* architecture：决定了使用 x86 还是 x64 还是两个架构都用 
* electron version：electron 的版本 
* optional options：可选选项

命令比较长，每次要是都用这个命令来打包会很烦，可以使用第二种方法；

2、首先在项目根目录下面的 package.json 里添加代码， 
"packager": "electron-packager ./app HelloWorld --all --out ./OutApp --version 1.4.0 --overwrite --icon=./app/img/icon/icon.ico"

注："packager": "electron-packager . HelloWorld --win --out ./OutApp --version 1.7.9 --overwrite --icon=./app/icon/icon.ico --platform win32"

./app编译出来的exe文件执行时会报找不到app的错误。

PS：这里要注意，字段里的 项目名字，version，icon路径要改成自己的； 
具体添加位置如图， 

然后，在使用命令 npm run-script packager 

最后，打包完成之后如图 
 
运行对应包下的.exe文件，就可以看到我们的应用了。

注意： 如果发现ico图片无法显示可以试试 改变 ico文件的像素大小

三，转载 两种打包exe的方法：

  第一种实现方式：https://blog.youkuaiyun.com/Quincylk/article/details/78252475

  第二种实现方式：https://blog.youkuaiyun.com/qq_26769677/article/details/81369653

Electron 相关文档

https://electronjs.org/docs/tutorial/first-app#%E5%BC%80%E5%8F%91%E4%B8%80%E4%B8%AA%E7%AE%80%E6%98%93%E7%9A%84-electron

https://electronjs.org/docs/api/browser-window

electron打包exe
weixin_44094034的博客
12-26 992
/ { role: 'services', submenu: [] }, // 如果不是 macOS 可以移除这个子菜单。if (BrowserWindow.getAllWindows().length === 0) { // 如果没有打开任何窗口。{ label: '导入', click: importFile } // 新增的导入菜单。== 'darwin') { // 如果不是 macOS。label: '视图',
使用Electron打包vue文件变成exe应用程序
Abenazhan的博客
01-23 2196
然后在Electron 项目中执行npm run package，进行打包exe，打完包之后在根目录下的release的文件夹中有打包好的exe文件。修改生产环境配置，配置为后端得地址，http://127.0.0.1:8080/ 避免避免Electron打包exe后接口调用不通得问题。修改跳转到其他页面空白得问题，路由跳转得问题，把history修改成hash。打包后得路径修改成为./，避免Electron打包exe后显示空白。把vue项目打成dist的包，放到Electron项目的根目录下。
electron打包生成exe程序
12-03 3400
一、步骤 1、package.json中添加配置如下： "scripts": { "package":"electron-packager . demoName --platform=win32 --arch=x64 --icon=favicon.ico --out=./out --asar --app-version=0.0.1 --overwrite --ignore=node_modules" }, 其中， demoName-生成的应用程序.exe的名称
Electron 应用打包与分发：从开发到交付的完整指南
最新发布
vvilkin的学习备忘
07-02 862
Electron 是一个强大的框架，允许开发者使用 JavaScript、HTML 和 CSS 构建跨平台的桌面应用程序。然而，开发完成后，如何将应用打包并分发给用户，仍然是一个关键问题。不同的操作系统（Windows、macOS、Linux）有不同的打包格式和分发方式，同时还需要考虑自动更新、代码签名等问题。
electron打包exe文件
qq_39554744的博客
01-16 1643
electron文档：https://www.electronjs.org/docs/latest/tutorial/tutorial-first-app。npx命令可能执行失败，提示no such file…此时需要升级node到最新版本。node之前的版本是 14.21.3, 下载依赖失败，换成了20.11.0就好使了。打包为单独的可分发文件。
Electron 打包exe方法
hamster204的专栏
08-10 2560
本文介绍了如何使用打包工具位electron程序打包
electron打包成exe的方法
热门推荐
qq_46664185的博客
01-11 1万+
Electron 是由 Github开发的开源框架，它允许开发者使用Web技术构建跨平台的桌面应用。electron是通过将Chromium和Node.js合并到同一个运行时环境中，用html，css，JavaScript来构建跨平台桌面应用的一个开源库，并将其打包为Mac，Windows和linux系统下的应用来实现这一目的。 Electron = Chromium + Node.js + Native API Chromium : 为Electron提供了强大的UI能力，可以不考虑...
Vue项目使用electron打包成.exe文件
08-22
在本文中，我们将深入探讨如何使用 Electron 将 Vue 项目打包成 .exe 文件，以便满足甲方的需求。Vue 项目与 Electron 结合可以创建桌面应用程序，而 Electron 是一个开源框架，允许开发者使用 JavaScript、HTML 和 ...
linux上electron打包成exe,将electron打包成exe文件并生成安装版本exe
weixin_26848497的博客
05-16 1589
本教程中除了特别指明的安装包外，均是安装在本地目录，即命令行所在目录下的node_modules.使用Electron-package打包exe转：//https://blog.youkuaiyun.com/xiaozhu2hao/article/details/77557548cd到你的项目根目录下，安装electron-packagenpm install electron-packager修改packa...
electron框架+打包vue+react 成exe 安装下一步客户端桌面程序
08-28
在开发桌面应用时，`Electron`框架是...通过解决上述问题，可以成功将项目打包为可执行的`.exe`文件，实现客户端桌面程序的部署。同时，持续关注官方更新和社区资源，可以有效地解决新出现的问题，保证项目的顺利进行。
electron打包生成exe文件
q907811175的博客
09-29 1341
打包方式1：DOS窗口命令打包 DOS 下，输入npm install electron-packager -g全局安装我们的打包神器： cnpm install electron-packager -g 在项目文件夹下面，也就是根目录下面打开DOS执行打包命令： electron-packager . HelloWorld --platform=win32 --arch=x64 --icon=computer.ico --out=./out --asar --app-version=0.0..
electron打包成exe和dmg
09-12
win使用electron-packager打包成exe安装文件，实现和其他pc应用一样的安装步骤如 选择安装路径还有安装进度以及桌面快捷键功能，解决了出现electron默认的安装效果。Mac使用electron-builder打包成dmg文件，直接运行在Mac上
electron打包生成exe
Half of if的博客
11-17 469
为您的项目创建一个文件夹并安装Electron： mkdir my-electron-app && cd my-electron-app npm init -y npm i --save-dev electron
Electron系列 -- vue项目打包成.exe文件(通过官方demo的方式)
m0_71071209的博客
07-15 2894
在Inno Setup 里面搭建一个脚本, 通过脚本编辑安装程序的名称, 版本. 快捷键生成, 安装目录等, 是很有必要的, 生成一次后,后续可以一直沿用 ,二次使用选择上一次创建好的脚本, 一键打包即可。打包完毕, node_modules同级 会生成out文件, 点开exe包就是打包好 , 可安装在windows系统上。重点是： mainWindow.loadFile(“./dist/index.html”) 的修改。通过将vue项目打包, 会生成一个dist文件。1. npm 出现 镜像问题。
通过Electron打包前端项目为exe
爱蹦跶的全栈大A阿
03-08 2647
从electron官网上拉取代码，把官网上拉取下来项目中的index.html替换成 自己vue项目打包好的dist文件中的index.html，输入打包exe的命令即可
electron 编译成exe
weixin_30251587的博客
03-05 733
前提：现在有一个electron项目，等待打包成exe。 一，运行”electron .“，看运行是否正常。不正常则继续调试，正常可进入到第二步。 二，运行“electron-packager . myClient --win --out ../myClient --arch=x64 --app-version=0.0.1 --electron-version=2.0.0”命令，编译win64...
Electron项目打包成exe应用
hong
09-21 1032
Elenctron项目创建 继上一章我们相继完成了Electron项目的运行与打包 这一章就让我们继续学习怎么把打包好的项目打包成一个exe应用 需要在全局安装aras包 npm i aras -g 需要下载安装nisi软件进行项目的编译与安装（软件自行百度下载即可） 博主这边安装的版本是2.51 出现上面那个界面点击编译工具（HW VNISEdit） 点击文件，然后点击新建脚本:向导 在应用程序信息中，可以修改编译之后的应用名称 安装程序选项中，可以自定义编译包的名称 到第三步可以直接跳过
electron 打包成 exe
司马懿的西山居
04-26 1725
简介 Electron 基于 Chromium（开源 CEF 内核） 和 Node.js, 让你可以使用 HTML, CSS 和 JavaScript 构建应用，兼容 Mac、Windows 和 Linux，可以构建出三个平台的应用程序。 环境搭建 首先安装 node.js（ node -v 查看当前版本 ） 然后安装 npm 的淘宝镜像 npm install -g cnpm --regist...
【electron】分分钟钟把网页打包成可安装的exe
孑立
09-13 1672
安装完毕后继续修改package.json中scripts配置，删除原来的内容，新增一条start配置，其中的electron-forge start命令是安装了@electron-forge/cli才可以使用的，类似@vue/cli。上面所有带icon都指向了一个文件./ico/logo.ico，ico图标实际上是多张不同格式的图片的集合体，用作不同屏幕尺寸下的适配，当然这里我们就不展开了，我们先去得到一个logo.ico文件来实现可安装包。注意，json文件不能带注释，复制上面的文本后记得注释去掉。
vue3使用electron打包成exe
02-09
### 使用 Electron 将 Vue 3 项目打包成 EXE 文件 #### 准备工作 为了将 Vue 3 项目打包成可执行文件 (EXE)，需要先安装必要的工具和库。确保已经全局安装了 Node.js 和 npm。 #### 创建并配置 Vue 3 项目 如果还没有创建 Vue 3 项目，则可以通过 Vite 或者 Vue CLI 来快速搭建一个新的应用： ```bash npm create vite@latest my-vue-app --template vue cd my-vue-app ``` 对于现有的 Vue 3 项目，可以直接跳到下一步骤。 #### 添加 Electron 支持 通过命令行安装 `electron` 及其构建工具 `electron-builder`: ```bash npm install electron electron-builder --save-dev ``` 这一步会下载所需的依赖项来支持桌面应用程序的开发环境[^1]。 #### 配置 package.json 编辑项目的根目录下的 `package.json` 文件，在其中加入用于启动和发展模式下运行的应用脚本以及生产环境中使用的构建指令： ```json { "scripts": { "start": "vite", "build": "vite build && electron-builder" }, ... } ``` 这里定义了一个新的构建命令 `"build"` ，它不仅负责编译前端资源还调用了 `electron-builder` 进行最终的产品化处理[^2]。 #### 设置主进程入口文件(main.js) 在源码树中新建一个名为 `main.js` 的 JavaScript 文件作为Electron 应用的主要控制逻辑起点。此文件应该位于 src 目录之外以避免被 Webpack 处理。下面是一个简单的例子： ```javascript const { app, BrowserWindow } = require('electron') function createWindow () { const win = new BrowserWindow({ width: 800, height: 600, webPreferences: { preload: path.join(__dirname, 'preload.js'), nodeIntegration: true } }) win.loadURL(process.env.VITE_DEV_SERVER_URL || url.format({ pathname: path.join(__dirname, './index.html'), protocol: 'file:', slashes: true })) } app.whenReady().then(createWindow) app.on('window-all-closed', () => { if (process.platform !== 'darwin') { app.quit() } }) app.on('activate', () => { if (BrowserWindow.getAllWindows().length === 0) { createWindow() } }) ``` 这段代码设置了窗口大小和其他属性，并加载了由Vite生成的HTML页面[^4]。 #### 构建与发布 完成上述设置之后就可以尝试构建整个项目了。只需简单地输入如下命令即可触发完整的构建流程： ```bash npm run build ``` 该操作将会按照之前提到过的顺序依次执行：先是利用 Vite 编译静态资产；接着借助于 `electron-builder` 工具集自动生成适用于目标平台的操作系统特定版本的应用程序包——即 Windows 下面就是 `.exe` 文件格式[^3]。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值