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

原创 已于 2022-10-25 11:52:43 修改 · 1.1k 阅读 · 4 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue.js #electron #前端

于 2022-10-12 09:47:54 首次发布
本文介绍如何在Vue项目中集成Electron实现桌面应用开发，包括安装配置、启动项目、配置Electron及打包exe文件等关键步骤。

注：如果需要浏览器和桌面端同时运行：开发模式用打包工具的代理，编译后走file协议 ，设置electron允许跨域

一、vue项目中添加 electron 模块
在终端中输入以下命令

vue add electron-builder

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

在这里插入图片描述

二、使用 npm run electron:serve 进行启动项目
安装完成后，使用以下命令启动 electron 项目

npm run electron:serve

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

在这里插入图片描述

三、对 electron 进行配置
启动完成后，项目目录会出现 dist_electron 目录以及 /src/background.js 文件
在这里插入图片描述

background.js 文件即为 electron 的配置文件
![在这里插入图片描述](https://img-blog.csdnimg.cn/1c5ffa50ef624290b389dd2535702c67.png

最低0.47元/天 解锁文章
eletron将vue打包成桌面应用（exe）
weixin_43575792的博客
07-14 1802
1.前期准备 两个项目： 第一个是自己用vue cli创建的项目（内容自行决定）; 第二个是去github将案例下载下来 案例地址 接着测试案例是否可以正常运行 # 进入项目 cd electron-quick-start # 安装依赖库 npm install # 运行应用 npm start 效果图如下 2.运行 首先要在自己的vue cli项目下的package.json 中scripts下添加2行 如下 "scripts": { "serve": "vue-cli-servi
MacOS中使用Electron构建Vue项目在Windows环境的安装包
weixin_43558927的博客
10-31 4312
macOS下使用Electron构建windows安装包的一次最简单的实现
​​Electron 教程：从背景到 Vue3 桌面应用开发​
最新发布
Rysxt_的博客
10-22 1170
​ 构建 UI，无需学习 C++/Objective-C/Java。Electron 是一个开源框架，由 ​。​ 项目构建），允许开发者使用 ​。​：一套代码可运行在 ​。主进程和渲染进程通过 ​。在 Vue3 组件（如。​ 开发（最初为 ​。
初始化vue+Electron项目，实现桌面软件的打包
weixin_43403746的博客
09-26 682
背景： 之前在公司时有接触过几个electron的项目，总体来说还是很有意思的，它就是将现有的网页打包称一个桌面软件。由于是桌面软件，所以它支持node的所有api，而且可以对计算机的硬盘数据进行读取，总的来说权限比运行在浏览器中的网页要宽很多。 之前一直是修改别人的项目，当时用的主要框架是vue，所以写起来非常轻松，但自己从未初始化过，刚好有时间，就来尝试初始化一下。 大致的思路是，先创建vue脚手架项目，再在该项目中安装electron相关依赖。按照上述方法尝试了很多次，由于electron依赖众多，加
使用electron把vue 打包exe应用
qq_35089721的博客
03-29 1262
1. vue ui 2.项目中添加插件vue-cli-plugin-electron-builder 3.运行 4.全屏配置
使用 Electron将 Vue 项目打包为桌面应用（.exe）
qq_37577146的博客
03-07 684
这是核心的框架，用于构建跨平台的桌面应用程序，它结合了 Chromium 和 Node.js ，让你可以使用 HTML、CSS 和 JavaScript 来开发桌面应用。：它可以同时运行多个命令，在开发 Electron + Vue 项目时，常常会用来同时启动 Vue 开发服务器和 Electron 应用，方便进行开发调试。：用于将 Electron 应用打包成可执行文件，支持多种平台（如 Windows、Mac、Linux 等），可以生成安装包、便携版等不同形式的分发文件。
vue项目打包成electron桌面端exe应用（0-1保姆级教程）
qq_52132550的博客
07-15 7051
vue项目打包成桌面端exe应用（0-1保姆级教程）
使用Electron将vue2项目打包为桌面exe安装包
Xweihaifeng@outlook.com的博客
11-22 1138
目录一、下载electron模板项目 【electron-quick-start】​二、打开项目，安装所有依赖三、在打exe包的时候报错是因为没有，需要检查并安装之后重新打包；四、经过这么疯狂的一波操作之后，就可以打包出你想要的exe安装包，别太着急，在这之前还需要修改electron项目文件；五、修改vue文件​六、总结完了，以上就是全部的过程，祝码友都能找到灵感，找到自己的道。
electron将vue项目打包成exe桌面应用流程及可能出现的问题
Z.Dragon 的博客
11-13 2598
近期项目需求，把网页（基于vue）打包成exe桌面应用，在网上找到了electron； 这里说说我对electron-builder的使用心得 electron打包exe程序主要有两种方法： 1、electron-packager：初学者入门demo传送门 2、electron-builder：稍微复杂一丢丢，需要配置文件 ####### 先将vue项目打包 npm run build 得到dis...
Electron系列 -- vue项目打包成.exe文件(通过官方demo的方式)
m0_71071209的博客
07-15 3100
在Inno Setup 里面搭建一个脚本, 通过脚本编辑安装程序的名称, 版本. 快捷键生成, 安装目录等, 是很有必要的, 生成一次后,后续可以一直沿用 ,二次使用选择上一次创建好的脚本, 一键打包即可。打包完毕, node_modules同级 会生成out文件, 点开exe包就是打包好 , 可安装在windows系统上。重点是： mainWindow.loadFile(“./dist/index.html”) 的修改。通过将vue项目打包, 会生成一个dist文件。1. npm 出现 镜像问题。
electron将vue项目打包为exe程序
我只是个很菜的前端
02-23 1104
electron将vue项目打包为exe程序
使用Electron将Vue项目打包成桌面应用
weixin_45795160的博客
05-28 1212
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的配置文件。
如何使用electron将Vue项目打包为本地exe文件
振华OPPO的博客世界
04-13 3133
Electron是一个开源框架，可借助JavaScript、HTML和CSS构建跨平台桌面应用。它结合Chromium和Node.js，开发者能复用Web技术。众多知名应用如VS Code、Slack都用它开发，具备高效、灵活的特点。是一个为Electron应用量身打造的打包工具。它能把Electron应用打包成可在不同操作系统（如Windows、Mac、Linux）上直接安装运行的格式。支持自动更新、签名等功能，操作简单且功能强大，能大幅提升应用发布效率。依赖版本electron28.1.0。
用Electron将Vue项目打包成桌面版软件
admin_rdc
07-04 1085
用Electron将前端项目打包成mac的app和windows的exe文件
用electron将vue项目打包成.exe文件【保姆级教程】
heavenz19的博客
03-15 6196
说明： vue2项目，使用的vue-element-admin框架，用electron打包成.exe文件。
2024年前端最全Vue+Electron打包桌面应用(从零到一完整教程)_vue打包桌面应用，超全Web前端中高级面试复习大纲
2401_84616230的博客
05-12 2262
本人分享一下这次字节跳动、美团、头条等大厂的面试真题涉及到的知识点，以及我个人的学习方法、学习路线等，当然也整理了一些学习文档资料出来是给大家的。知识点涉及比较全面，包括但不限于前端基础，HTML，CSS，JavaScript，Vue，ES6，HTTP，浏览器，算法等等开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】“electron:build”: “vite build && electron-builder” // 新增打包命令。
vue项目使用electron打包成桌面应用
shaoyahu的博客
04-15 1108
很想使用 electron 制作一个桌面应用，但是真的上手使用的时候才发现 electron 的坑实在是太多了先将遇到的坑记录在这里，遇到一个记录一个使用 9 以上版本的 vue-i18n 的项目打包成应用时会失败，本地运行没问题项目路径中有中文会打包失败和 electron 相关的插件版本更替实在是是太快，并且版本之间还不一定能兼容，所以这篇文章中使用到的插件都会写死版本来保证一定可以打包成功。
用Electron打包vue项目变成.exe桌面程序
wade3po的博客
03-19 623
Electron现在挺火的，官网的标语是使用 JavaScript，HTML 和 CSS 构建跨平台的桌面应用程序。只是没有具体的使用开发项目，所以只是试试创建一个vue项目和用老项目试试能不能打包出来。 新建项目和直接用老项目都试了，查到的有好几种方法，这边就使用一种，觉得比较简单。 创建新的vue项目，这一步就不多说了： vue create electron-demo 安装electron，没有全局： npm install electron 很容易报错： 添加模块，这个命令是添加模块，可以去vue
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值