通过electron-forge创建一个electron项目【electron教程】

最新推荐文章于 2025-06-06 09:11:17 发布

空未

最新推荐文章于 2025-06-06 09:11:17 发布

阅读量1.2k

点赞数

CC 4.0 BY-SA版权

文章标签： electron-forge electron-forge创建项目安装electron

本文链接：https://blog.csdn.net/htzhanglong/article/details/81011507

本文介绍如何使用Electron框架创建跨平台的桌面应用程序。通过安装Electron及使用electron-forge脚手架工具，读者将了解从零开始搭建项目的全过程。

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

Electron是一个跨平台的桌面应用开发框架，用html css js的技术开发桌面上面可以安装的软件。

下面我们看看通过electron-forge创建一个electron项目。

想看视频的同学访问：

https://pan.baidu.com/s/1Dol4tP6Jop6MXro0ULVapQ

地址失效访问：https://www.itying.com/goods-929.html

一、安装electron

npm install -g electron

二、通过electron-forge创建一个electron项目。

electron-forge相当于electron的一个脚手架，可以让我们更方便的创建、运行、打包electron项目。

npm install -g electron-forge

electron-forge init my-new-app

cd my-new-app

npm start

想看视频的同学访问：

https://pan.baidu.com/s/1Dol4tP6Jop6MXro0ULVapQ

地址失效访问：https://www.itying.com/goods-929.html

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

空未

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

Electron-02：Electron 安装、使用快速启动 demo 搭建 Electron 项目、单独搭建 Electron 项目、electron-forge 搭建项目

kerryqpw的博客

03-14

785

一、安装 electron npm install -g electron 二、克隆一个仓库、快速启动一个项目 # 克隆示例项目的仓库 git clone https://github.com/electron/electron-quick-start # 进入这个仓库 cd electron-quick-start # 安装依赖并运行 npm install && npm start 三、手动搭建一个 electron 项目 1、新建一个项目目录

Electron+Vue3+ElectronForge整合 - 打包时整合 -分步打包

northcastle的博客

04-23

3204

Electron + Vue3+Electron Forge 打包成桌面程序的全流程步骤，分布打包、手动配置的方式

参与评论您还未登录，请先登录后发表或查看评论

Electron Forge 打包

阿城的博客

03-06

4376

electron 应用打包方式有很多，比如 electron-builder。但现在官方主推的是 Electron Forge。

Electron实战系列五：构建工具Electron-Forge

wanmeijuhao的博客

01-03

1808

【代码】Electron实战系列五：构建工具Electron-Forge。

Electron Forge 项目贡献与开发指南深度解析

最新发布

gitblog_00913的博客

06-06

228

Electron Forge 项目贡献与开发指南深度解析前言 Electron Forge 作为 Electron 生态中的重要工具链项目，为开发者提供了完整的 Electron 应用打包、发布和工作流解决方案。本文将深入剖析如何参与 Electron Forge 项目的开发工作，包括本地环境搭建、代码修改规范、测试流程以及发布机制等核心内容。开发环境准备项目初始化首先需要获取项目源代码并...

electron-forge

学吧

10-13

3016

electron-forge创建项目运行项目打包项目简介：electron-forge是一个脚手架程序(和create-react-app类似), 它可以帮我们快速构建一个electron应用, 应用创建成功后, 我们直接编辑src/index.html即可快速上手electron桌面程序官网：https://www.electronforge.io/ electron-forge 官网提供了很多组合的脚手架有 TypeScript TypeScript + Webpack Webpack 但此次只用了

electron forge

codebooks的博客

05-04

1367

虽然内容些许简单，但是也是真的很简单。凡事都是一个思路，思路理解了什么事情都好办。

Electron Forge脚手架初始化构建electron项目

weixin_45226381的博客

09-13

550

解决用Electron Forge脚手架初始化构建electron项目时一直卡在 “Installing NPM Dependencies”不动解决方案： 1.直接就不用等了，退出这个初始化程序，这时你直接一手npm start 肯定失败不用想！ 2.将你刚才新建项目的node_modules文件删除 3.在项目的目录下运行cnpm install electron --save-dev，运行成功后会生成一个新的 node_modules文件夹，然后在运行npm start。 4.然后node_mod

electron在windows系统下打包出错(electron-forge和electron-builder)

Wjangia的博客

07-07

783

electron在windows系统下打包出错

$ npx electron-forge import 一直报权限问题 resource busy or locked,

qq_34328582的博客

02-14

997

搞了好长时间原来是后台进程太多了被占用了。

【electron】electron forge + vite + vue + electron-release-server 自动更新客户端

AsiWorld的博客

12-12

625

electron forge vue页面（中文）：https://forge.electron.js.cn/guides/framework-integration/vue-3electron forge vue页面（英文，中文版下面的tab无法点击）：https://www.electronforge.io/guides/framework-integration/vue-3。

Electron 离线环境打包解决方案（electron-forge）

liora6的博客

10-24

1943

本文提供了Electron应用在在线和离线环境下的完整开发流程。在线部分详细介绍了项目初始化、依赖安装和项目模板创建步骤，包括package.json、forge.config.js等核心配置文件的设置。离线部分重点解决了网络环境下的常见问题，通过配置.npmrc和forge.config.js文件实现完全离线打包，特别强调了Electron二进制文件缓存路径的正确设置。文章还提供了完整的项目目录结构和关键命令，如npm run make的离线执行方式，确保在没有网络连接的情况下也能成功构建Electron

什么是Electron Forge

qq_43071699的博客

12-28

927

定义：Electron Forge是Electron官方推荐的打包、分发工具，它将Electron的构建工具生态系统统一到一个可扩展的界面中，以便任何人都可以快速开始制作Electron应用程序。功能打包应用程序：Electron Forge可以将Electron应用程序的代码与Electron二进制包结合起来，生成适用于不同操作系统的可执行文件和安装程序。分发应用程序：它支持将生成的可执行文件和安装程序发布到在线平台供用户下载。

Electron项目打包

越陌度阡

05-05

4027

1. electron-packager模块打包 1. 安装模块 npm install electron-packager --save-dev 2. 配置打包命令 electron-packager <sourcedir> <appname> <platform> <architecture> <electron version> <optional options> 参数说明： sourcedir：项目所在....

Electron教程（三）如何打包 electron 程序：electron-forge 的使用教程

热门推荐

学习笔记

07-25

3万+

中定义的是生成的可执行文件的 icon 、名字、关于信息等，packgerConfig 是另一个插件使用的配置，其官方的具体配置说明如下：electron-forge 官方对应 packgerConfig 的说明：electron-packger 官方配置参数说明：外层是通用的，各平台 macOS Windows Linux 通用。

用 electron-forge 搭建 React + Ts 的项目

深坑妙脆角的博客

01-19

1061

如果你有桌面应用开发的需求，且比较熟悉Web相关的技术，那么Electron会是一个非常不错的选择，本文将介绍如何用其构建一个应用Demo项目

Electron Forge + Vite 项目 Electron 静态资源处理

腊肉的博客

05-21

2481

在 Vite 打包时，它只会包括那些被静态分析到的资源文件（例如 JavaScript、CSS、图片文件等），这些文件通常是通过相对路径或模块解析方式引用的。 Electron 中使用的大多都是系统路径（例如通过 __dirname 或 process.resourcesPath 生成的路径），这些路径在 Vite 的打包过程中是无法被正确识别的。在 Vite 不支持指定将某个目录打包至指定编译目录的情况下，问题逐渐变得复杂化（Forge 也没找到相关的功能）。

Electron Forge + Vite + Vue3 + Ts 搭建 Electron 项目到应用打包

腊肉的博客

05-08

3319

npm init electron-app@latest my-app -- --template=vite-typescript

gitblog_00039的博客

05-11

618

使用 electron-forge 打包已完成的Electron 应用程序

05-18

使用 electron-forge 打包已完成的 Electron 应用程序可以简化打包过程，并且支持多平台打包。以下是使用 electron-forge 打包 Electron 应用程序的步骤： 1. 在命令行中运行以下命令来安装 electron-forge： ``` npm install -g electron-forge ``` 2. 进入你的 Electron 应用程序根目录，并且运行以下命令来初始化 electron-forge： ``` electron-forge init ``` 这个命令将创建一些文件和目录，其中包括 package.json 文件、src 目录以及一些模板文件。 3. 确保你已经在 package.json 文件中设置好了应用程序的名称、版本号、描述等信息。 4. 运行以下命令来打包你的应用程序： ``` electron-forge make ``` 这个命令将会打包你的应用程序，并将生成的安装程序或者包放在 out 目录下。 5. 如果你想要打包为特定平台的安装程序，你可以使用以下命令： ``` electron-forge make --platform=<platform> ``` 其中，<platform> 可以是 darwin、linux、win32 等操作系统平台。 6. 如果你想要打包为特定架构的安装程序，你可以使用以下命令： ``` electron-forge make --arch=<arch> ``` 其中，<arch> 可以是 x64、ia32 等架构类型。 7. 打包完成后，你可以在 out 目录下找到生成的安装程序或者包，以便你进行安装或者分发。