vue项目打包成桌面快捷方式（electron）

已于 2022-06-06 17:39:56 修改
阅读量1.5k 收藏 6
点赞数 3
文章标签： vue.js electron npm
于 2022-06-06 13:23:46 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_52959651/article/details/125144631
版权
本文记录了如何将Vue项目结合Electron打包成桌面应用的过程。首先克隆Electron官方示例，运行项目。接着打包Vue项目，将其放入Electron项目中。解决因Vue3和Vite构建导致的路径问题，通过修改配置和引入文件路径修正错误。最后，安装electron-packager并配置打包命令，生成的应用程序可以创建快捷方式放在桌面上。

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

网上有很多相关的例子了，所以我只是把自己的问题记录一下。
1.把electron的官方例子clone下来

git clone https://github.com/electron/electron-quick-start

2.进入项目，输入以下命令，运行项目

npm install//下载依赖包
npm start//启动

3.弹出界面
在这里插入图片描述
4.接下来将自己的vue项目打包，运行npm run build
5.将打包的项目复制到electron-quick-start的根目录
在这里插入图片描述
6.重新运行一下

npm start

如果页面能打开，则说明没问题。
如果页面打不开，点击view底下的Toggle Developer Tools,然后点击f12，打开调试工具查看问题。
在这里插入图片描述
错误1

最低0.47元/天 解锁文章
使用Electron和Vue快速构建桌面应用
XwyMysql的博客
10-06 229
Electron和Vue是两个流行的开发技术，结合它们可以迅速构建跨平台的桌面应用程序。在本文中，我们将探讨如何使用Electron和Vue来开发桌面应用，并提供相应的源代码示例。你可以继续开发更多的Vue组件和Electron功能来满足你的应用程序需求。在该文件中，你可以设置应用程序的窗口和其他Electron相关的功能。在创建过程中，你可以选择使用默认的配置或自定义配置，根据项目需求进行选择。现在，我们已经完成了基本的设置和开发。现在，我们可以开始开发Vue组件，用于构建应用程序的用户界面。
Electron设置窗口图标、设置桌面快捷方式图标
热门推荐
BigFamer的博客
10-26 2万+
一、前言 在开发一款桌面应用时，设置窗口图标和桌面快捷方式图标是两个必须的需求。下面来看看我基于Electron开发的实际项目中是如何配置最终实现了这个需求吧。 二、实现设置窗口图标和桌面快捷方式图标 1、准备好你的Icon图标 要得到一个icon图标十分简单，你需要有一张目标图标的png格式图片，然后找一个可以免费在线转换icon图标的网站转换下载即可，这里我提供一个我用过的很不错的在线转换工具：在线转换icon图标工具。 这里需要说明一下，有的童鞋可能在纠结转换成多大的图标才可以呢？ 我的快捷方式图标
Electron打包成win安装包并创建桌面快捷方式
不忘初心
07-12 2万+
一开始打包通过electron-packager，可以将electron应用打包成可执行exe，虽然可以实现桌面端应用，但是没有安装包而且没有在桌面创建快捷方式总是显得不是很正规，于是查询了下官网，果然有安装程序，下面就一点一点开始实现需求 首先我们需要将我们的程序打包 这里我们使用electron-packager npm install electron-packager --save-...
如何使用electron将Vue项目打包为本地exe文件
最新发布
振华OPPO的博客世界
04-13 1594
Electron是一个开源框架，可借助JavaScript、HTML和CSS构建跨平台桌面应用。它结合Chromium和Node.js，开发者能复用Web技术。众多知名应用如VS Code、Slack都用它开发，具备高效、灵活的特点。是一个为Electron应用量身打造的打包工具。它能把Electron应用打包成可在不同操作系统（如Windows、Mac、Linux）上直接安装运行的格式。支持自动更新、签名等功能，操作简单且功能强大，能大幅提升应用发布效率。依赖版本electron28.1.0。
vue项目使用electron打包成桌面应用
zhouzuoluo的博客
09-06 1764
打包流程详情步骤： 1、准备工作： a、win7系统则确保node版本在v12以上，electron-builder对系统或版本有要求； b、项目路径不使用中文； c、使用淘宝镜像命令代替npm管理工具 npm install-g cnpm--registry=https://registry.npm.taobao.org d、命令窗口中可以使用 “ cd.. ” 返回上一级目录 e、修改confi...
vue2 + electron 用超简单方法搭建前端桌面应用
qq_45599738的博客
11-10 2125
vue2 + electron 非常简单的搭建方法
Vue+Electron打包桌面应用(从零到一完整教程)_vue打包桌面应用
2401_85124821的博客
05-27 1223
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 外，当所有窗口都被关闭的时候退出程序。
Electron系列 -- vue项目嵌套electron打包成桌面应用(上)
m0_71071209的博客
07-11 1951
是一个生成图标的包安装package.json 中配置命令},执行命令, 生成icon完成后会在根目录多出来一个build目录在vue.config.js 中, 也要将路径进行调整删除原来的，重新打包，安装后就是新图标了。
vue配置electron，使用electron-builder进行打包【完整步骤】
CMDN123456的博客
08-05 1万+
vue配置electron，使用electron-builder进行打包【完整步骤】
Vue项目最快最简单打包成桌面应用
weixin_45648000的博客
01-22 1162
打包vue项目为dist文件 1）修改基础路径（必做） 第一个坑：需要修改静态资源路径为相对路径，找到 vue.config.js文件修改publicPath，此处不修改，打包的dist文件的index.html文件将无法加载出来； publicPath: process.env.NODE_ENV === 'production' ? './' : './', 2）运行vue ui进行打包 控制台 vue ui 进入vue项目管理界面，进行打包，生成dist文件 从官方拉取已经打包好的模版 1）创
记录electron+vue打包桌面应用程序。
09-22 825
实际应用中有个打印证件的功能，应领导要求做成了桌面应用. 之前并没有接触过，在了解过electron是个什么玩意之后，果断决定使用vue做案子，用electron进行打包。 关于node的安装与配置，之前也记录过一篇详细的内容，传送门： ...
electron-quick-start打包vue2
2301_80553345的博客
05-22 447
注：本文node--14.21.3, electron--13.6.9,以打包mac为例。4、在package.json文件中配置打包命令,并下载electron-packager。3、修改main.js, 主要修改了path、mainwindow的加载文件。项目，并npm install --save-dev electron。2、将index.html文件替换成vue打包后的dist文件。其中azeroApi为包名，icon是打包后的app的icon。1、在github上下载。
electron 搭建快捷方式
qq_43731674的博客
06-10 453
npm init @quick-start/electron
2,【electron+vue】 构建桌面应用——常见的功能及问题(修改桌面图标,软件图标,窗口图标,图标不显示问题,影藏默认菜单栏,开机自启,手动或被动关闭应用)
$
09-27 3864
1.首先这些图标必须是结尾的图片,如果你将其他格式的图片改成.ico的,也不行哦,至于为什么,我也没深入研究,按着规定来就好.2.如何获取.ico格式的图片或者说如何将其他格式的图片转换成.ico格式的图片呢,这里推荐一个app,名字是,大家自行搜索安装使用哈,给大家看下大概的界面:3,前两步弄好后,咱们就有了ico的图片,现在替换默认的图片,在你声明主进程的地方这是修改应用左上角的图标4,修改桌面的图标, .exe前面的图标。
2024年echarts饼图如何去掉指示线指示文字_echarts饼图去掉标签，面试必备
2401_85012069的博客
05-14 1489
legend: {data: []},series : [name: ‘访问来源’,label: {normal: {},data:[{value:335, name:‘直接访问’},{value:310, name:‘邮件营销’},{value:234, name:‘联盟广告’},{value:135, name:‘视频广告’},{value:1548, name:‘搜索引擎’}],},
将Vue项目打包为桌面应用 electron
故人两相忘的博客
01-06 1997
用electron-quick-start打包vue桌面程序
Vue+Electron打包桌面应用(从零到一完整教程)
weixin_68658847的博客
07-15 3218
Vue+Electron打包桌面应用(从零到一完整教程)
vue 项目创建桌面快捷方式
08-17
为了创建一个Vue项目的桌面快捷方式，你可以按照以下步骤进行操作： 1. 首先，确保你的项目中有一个名为"app"的文件夹，其中包含你的应用程序代码。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* [vue项目打包成桌面快捷方式（electron）](https://blog.csdn.net/qq_52959651/article/details/125144631)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}}] [.reference_item style="max-width: 50%"] - *3* [vue项目生成桌面应用](https://blog.csdn.net/weixin_41883161/article/details/128028905)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值