使用electron将vue项目打包成exe桌面应用

最新推荐文章于 2026-06-01 14:17:12 发布
原创 最新推荐文章于 2026-06-01 14:17:12 发布 · 5.8k 阅读 · 29 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
收录于
vue

当前文章被收录于：

vue
29 篇文章 7 人学习

记录学习中遇到的问题，和对基础知识小案例的总结

订阅专栏 查看详情
本文介绍了如何将Vue项目转化为 Electron 桌面应用。通过`vue add electron-builder`添加 Electron 支持，然后使用`npm run electron:serve`启动项目。配置文件位于`src/background.js`，例如移除窗口菜单栏。最后，使用`npm run electron:build`打包应用，生成的.exe文件可在win-unpacked文件夹中找到。

Electron相当于一个浏览器的外壳，可以把现有的vue程序嵌入到壳里面，可以运行在桌面上的一个程序，通俗来说就是软件，比如像QQ、优酷、网易音乐等等。
Electron官网：https://electronjs.org/

文章目录

一、vue项目中添加 electron 模块

在终端中输入以下命令

vue add electron-builder

选择13.0.0版本回车后等待安装完成

在这里插入图片描述

二、使用 npm run electron:serve 进行启动项目

安装完成后，使用以下命令启动 electron 项目

npm run electron:serve

等待启动完成即可弹出 exe 桌面应用窗口

在这里插入图片描述

三、对 electron 进行配置

启动完成后，项目目录会出现 dist_electron 目录以及 /src/background.js 文件
在这里插入图片描述

background.js 文件即为 electron 的配置文件

在这里插入图片描述

win.setMenu(null) //去掉窗口菜单栏

在这里插入图片描述
其他配置参见 electron 官网

四、打包 exe桌面应用

使用以下命令打包 electron 项目

npm run electron:build

打包完成后出现 win-unpacked 文件夹，win-unpacked 文件夹下的 .exe 文件即为入口文件，双击打开即可，分享时要将 win-unpacked 文件夹 整体打包分享

在这里插入图片描述

标签
#vue.js #electron #前端
MacOS中使用Electron构建Vue项目在Windows环境的安装包
weixin_43558927的博客
10-31 4443
macOS下使用Electron构建windows安装包的一次最简单的实现
electron-builder 在打包为可分发格式之前修改打包的文件
weixin_43276017的博客
07-24 1097
大白话：electron-builder将win-unpacked内的文件打包成一个exe之后在最终安装目录中解压出来，也就是说我们修改这里的文件会影响最终用户使用的程序。
Electron+Vue Mac版日历开发记录及DMG打包下载 - 月视图
AxCybersecurity的博客
09-18 145
在本文中，我们学习了如何使用Electron和Vue框架开发Mac版的日历应用程序。我们创建了一个基本的月视图界面，并使用Electron将其打包为DMG文件，以便用户可以方便地下载和安装。您可以根据自己的需求进一步扩展和定制此应用程序。希望本文对您有所帮助！
electron 将 vue项目打包成桌面应用(exe文件)
zcy_csdn123的博客
10-14 2622
目标如题 首先你需要一个VUE项目 简单创建一个栗子 // 这是vue-cli 3.0的创建方式 2+版本好像是 vue init webpack my-app 貌似 vue create my-app 这里不做具体 毕竟每个人的项目不一样 如果也是想尝试一下 大家可以一路默认创建一个项目就可以了 安装electron 不知道的戳链接https://blog.csdn.net/zcy_csdn...
告别原生JS！用Electron-Vite + Vue3 5分钟搞定桌面应用开发环境（保姆级教程）
最新发布
weixin_29973493的博客
06-01 275
本文详细介绍了如何使用Electron-Vite和Vue3快速搭建桌面应用开发环境，提供从项目初始化到热更新、生产构建的保姆级教程。通过一体化构建和智能配置，开发者可在5分钟内完成环境搭建，显著提升开发效率，特别适合需要快速响应桌面端需求的场景。
Vue2项目中使用electron打包Windows桌面应用（全教程、踩坑集合）
qq_44928780的博客
05-19 6809
PS：踩了太多坑 亲测有效。。
Electron打包exe的使用
sjs_caomei的博客
04-20 2149
一 基础操作 1 创建项目 1.1 使用cnpm加速下载 npm有时下载速度很慢，可以安装cnpm，从国内淘宝镜像下载，执行以下命令： npm install -g cnpm --registry=https://registry.npm.taobao.org 以后npm直接替换成cnpm使用。 1.2 为什么不使用SimulatedGREG/electron-vue Si...
Electron打包vue项目成exe桌面应用程序
wmmcsdn614的博客
09-25 2621
方式一：克隆electron项目进行打包 第一步：克隆electron项目并运行 1、git clone https://github.com/electron/electron-quick-start 2、cd electron-quick-start 3、npm install 4、npm start // 启动项目，会打开electron程序 第二步：打包程序 1、先将vue项目打...
【vue、Electron】搭建一个Electron vue项目过程、将前端页面打包成exe 桌面应用
fruge365的博客
08-27 3092
【vue、Electron】搭建一个Electron vue项目过程、解决Electron vue首次启动巨慢无法加载、执行npm run electron:build打包慢、如何设置打包的logo、设置exe图标、 设置页面程序的大小、窗口大小、如何设置打开窗口的名称/标题、如何设置打包后exe的名称、将前端页面打包成exe 桌面应用
vue项目使用electron-builder打包成exe，mac桌面应用
weixin_44160584的博客
12-10 2411
文章目录前言一、准备工作二、使用步骤1.官方electron项目2.读入数据总结 前言 将vue项目打包成桌面应用，这里使用的是electron-builder而不使用electron-packager是因为builder相比packager有几个优点： 1，builder可以打包成安装包和可执行文件，而packager只能打包成可执行文件 2，builder打包后会比packager打包的项目体积小 一、准备工作 1，官方的electron项目，要使用官方的electron项目整合vue项目进行.
用electron将vue项目打包成桌面应用程序.exe
weixin_43842567的博客
01-08 758
vue项目引入electron，将项目打包成桌面应用程序 1、在vue项目里下载electron相关依赖 npm install electron --save-dev npm install electron-packager --save-dev 2、在项目的根目录下新建electron.js和preload.js两个文件 // Modules to control application life and create native browser window const {app, Brows
vue + electron 打包成桌面应用exe
qq_42214033的博客
07-24 2100
vue + electron 打包成桌面应用exe 1. 背景 由于老板突然让我将之前做的一个vue项目套壳成一个桌面应用程序，一头雾水的我开始百度，然后就找到了electron。他是一个跨平台的桌面应用开发工具。看了看后就开始了了解之路。 2. electron 安装 electron是基于Chromium 和 Node.js 来构建一个跨平台应用的。所以首先要确保你的电脑上有node环境。 先从Github上将electron项目下载下来 1. git clone https://github.com/
electron将vue项目打包为exe程序
我只是个很菜的前端
02-23 1151
electron将vue项目打包为exe程序
初始化vue+Electron项目，实现桌面软件的打包
weixin_43403746的博客
09-26 712
背景： 之前在公司时有接触过几个electron的项目，总体来说还是很有意思的，它就是将现有的网页打包称一个桌面软件。由于是桌面软件，所以它支持node的所有api，而且可以对计算机的硬盘数据进行读取，总的来说权限比运行在浏览器中的网页要宽很多。 之前一直是修改别人的项目，当时用的主要框架是vue，所以写起来非常轻松，但自己从未初始化过，刚好有时间，就来尝试初始化一下。 大致的思路是，先创建vue脚手架项目，再在该项目中安装electron相关依赖。按照上述方法尝试了很多次，由于electron依赖众多，加
vue+electron 打包发布
myang147258的博客
07-14 2966
Electron是什么？Electron 是 GitHub 开发的一个开源框架，是网页应用 (web apps) 的一个原生包装层，它允许使用 Node.js（作为后端）和 Chromium（作为前端）完成桌面 GUI 应用程序的开发。Electron 可以用于构建具有 HTML、CSS、JavaScript 的跨平台桌面应用程序，它通过将 Chromium 和 node.js 合同一个运行的环境中来实现这一点，应用程序可以打包到 Mac、Windows 和 Linux 系统上。
使用Electron将Vue项目打包成桌面应用
weixin_45795160的博客
05-28 1267
npm run electron:build 构建打包客户端-会在根目录生成dist_electron文件夹。1、修改logo图片配置打包信息：注意：是vue.config.js文件，不是package.js。我下面引入的图片里面有一个build/logo.ico的文件，这个文件大小必须是256*256的。1、隐藏菜单栏目：根目录下src/background.js文件，找到app.on方法。4、执行后会弹出npm的配置文档，将以下类容复制到文件末尾。2、electron-builder的配置文件。
vue3 electron 报错
wandoumm的博客
07-16 458
方式2使用ts-loader@~8.2.0。方式1vue-cli降到4.x版本。
评论 8
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

初辰ge

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值