Vue + Electron 打包桌面应用

最新推荐文章于 2025-10-20 11:21:49 发布
原创 最新推荐文章于 2025-10-20 11:21:49 发布 · 4.7k 阅读 · 8 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#Electron +Vue 打包桌面应用

本文介绍如何使用Vue和Electron构建并打包桌面应用，包括生成Electron应用、Vue工程打包流程、安装electron-packager及配置打包命令。特别关注解决打包后样式丢失和静态资源找不到的问题。

Vue + Electron 打包桌面应用

1、按官方文档生成Electron一个Electron应用
这里写图片描述
2、Vue工程打包，把打包后的dist文件夹放入Electron工程中
这里写图片描述
3、安装electron-packager
这里写图片描述
4、在Electron工程的package.json中添加打包命令：
这里写图片描述
这里写图片描述
这里写图片描述

注意：
1、打包后样式全无解决办法
这里写图片描述
2、打包后静态资源找不到解决办法
这里写图片描述

新开窗口大小设置
https://newsn.net/say/electron-browserwindow-size.html
这里写图片描述

Vue+Electron打包桌面应用(从零到一完整教程)
weixin_68658847的博客
07-15 3815
Vue+Electron打包桌面应用(从零到一完整教程)
如何把已有的vue项目使用electron打包成基础版本桌面应用
鲁小班的博客
07-31 1930
如何把已有的vue项目使用electron打包成桌面应用
Electron学习（二）：Electron与Vue
最新发布
阿标的博客
10-20 293
electron与vue2结合
vue后台项目打包成桌面应用程序（.exe）
时漂亮的博客
08-29 2387
1、打包成功后的样子。
electron + vue 项目运行打包配置文档
01-08
vue-cli 初始化vue项目构建 vue init webpack project-name electron 配置源码： 1. git clone https://github.com/electron/electron-quick-start** 2. 找到clone下来的项目入口文件main.js 和 package.json 修改路径配置** main.js : 3. 在已建好vue-cli项目中，安装electron依赖：** npm install electron --save-dev npm install electron-packager --save-de
2024年前端最全Vue+Electron打包桌面应用(从零到一完整教程)_vue打包桌面应用，超全Web前端中高级面试复习大纲
2401_84616230的博客
05-12 2262
本人分享一下这次字节跳动、美团、头条等大厂的面试真题涉及到的知识点，以及我个人的学习方法、学习路线等，当然也整理了一些学习文档资料出来是给大家的。知识点涉及比较全面，包括但不限于前端基础，HTML，CSS，JavaScript，Vue，ES6，HTTP，浏览器，算法等等开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】“electron:build”: “vite build && electron-builder” // 新增打包命令。
vue+electron
yzkdcsdn的博客
10-14 1590
vue+electron
VUE项目打包Electron
sinco25的博客
07-27 1698
现有VUE项目打包成Electron应用
Vue+Electron打包桌面应用(从零到一完整教程)_vue打包桌面应用
2401_85124821的博客
05-27 1351
electron:serve”: “concurrently -k “npm run dev” “npm run electron”” //新增更新2。“appId”: “com.dweb.demo”, //包id com.dweb.项目名。“appId”: “com.dweb.demo”, //包id com.dweb.项目名。“appId”: “com.dweb.demo”, //包id com.dweb.项目名。// 除了 macOS 外，当所有窗口都被关闭的时候退出程序。
精选资源
Vue+Electron（electron-builder + electron-updater + electron-log）
09-06
使用Vue+Electron（electron-builder + electron-updater + electron-log）实现桌面应用程序的开发，面向所有electron使用者学习使用，内部源码都有注释。可参考文章（http://t.csdn.cn/BLM6Y）使用。
vue+electron打包桌面应用
yan_hai_的博客
09-12 3184
vue项目使用electron打包成exe文件 需求：需要把vue项目打包生成桌面应用，点击桌面图标进入程序，不需要在浏览器输入地址。而且在没有网络的情况下也能正常使用。 效果图 图片: 首先你需要一个完整的vue项目，执行打包命令npm run build。然后你的文件夹中有个dist文件夹，在终端cd dist进入dist文件夹 下载electron 在dist文件夹下执行命令npm install electron 代码片. npm install electron; 在dist文件夹下创建ma
精选资源
基于Vue+Electron构建桌面应用程序实践
02-24
Electron-vue样板是作为VueCLI2.x的模板构建的，包括自定义应用程序的选项。因此，需要进行全局安装：如果喜欢用VueCLI的最新版本，就需要安装全局网桥：然后，初始化你的项目：这将启动一个安装项目，其中包括需要...
Vue+Electron
qq_40047001的博客
06-11 240
Vue项目打包成桌面版应用 1.vue项目中安装Electron vue add electron-builder Electron安装成功 2.使用npm install 安装项目中的所有依赖 npm install 3.使用npm run electron:serve时，出现以下问题，显示node_modules\electron\index.js出错 尝试手动调用install.js,成功执行，再次使用npm run electron：serve命令，成功显示桌面版应用 node nod
使用electron打包桌面应用
梧桐下的四叶草
02-20 1112
转载自：http://blog.youkuaiyun.com/frank_hehe/article/details/52811026 目录结构与文件 Electron App的目录结构如下： your-app/ ├── package.json ├── main.js └── index.html 你应用里的 package.json 看起来应该像： {  "na
vue项目使用electron进行打包（webpack vite）
Noctis99的博客
08-22 820
vue
electron 打包_electron-vue技术篇
weixin_39779004的博客
11-30 335
一份针对于electron-vue项目整理的搭建、运行、打包过程的踩坑总结分享首先为了保证安装效率，采用cnpm或者yarn指令来安装，前提是安装了node环境安装全局yarn，最好设置淘宝镜像npm install -g yarn安装全局vue-clinpm install vue-cli -g安装3.0+版本vue-cli(现在最新已经到4.5.6版本)npm install @vue/cli...
将Vue项目打包为桌面应用 electron
故人两相忘的博客
01-06 2181
用electron-quick-start打包vue桌面程序
vue+electron 打包发布
myang147258的博客
07-14 2841
Electron是什么？Electron 是 GitHub 开发的一个开源框架，是网页应用 (web apps) 的一个原生包装层，它允许使用 Node.js（作为后端）和 Chromium（作为前端）完成桌面 GUI 应用程序的开发。Electron 可以用于构建具有 HTML、CSS、JavaScript 的跨平台桌面应用程序，它通过将 Chromium 和 node.js 合同一个运行的环境中来实现这一点，应用程序可以打包到 Mac、Windows 和 Linux 系统上。
vue项目打包成electron桌面端exe应用（0-1保姆级教程）
qq_52132550的博客
07-15 7050
vue项目打包成桌面端exe应用（0-1保姆级教程）
使用Vue+Electron快速构建桌面天气应用
"基于Vue+Electron构建桌面应用程序实践，使用了GregHolguin的electron-vue模板，目的是创建一个基于OpenWeatherMap API的应用，展示用户选定城市的天气。该模板包含vue-cli脚手架、Vue插件、打包工具等。项目安装...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值