踩坑整理:用electron打包Vue项目(win+mac、改图标、安装包)
ztj100 2024-12-27 17:54 9 浏览 0 评论
Electron + Vue3 开发桌面应用
https://blog.csdn.net/qq_37460847/article/details/126918641
比较合适的一篇文章,在现有的vue项目 追加 electron。
基于上述方法,首次本地运行效果:
解决跨域问题后,
Github项目:单独打包的项目
https://github.com/electron/electron-quick-start
新手可以直接用这个项目来进行打包,和原来的项目分享。例如我调整后的:
用electron将vue项目打包成.exe文件【保姆级教程】
https://blog.csdn.net/heavenz19/article/details/136743623
单独把vue项目放到electron新项目 里打包。
electron打包vue项目的方法 步骤
https://www.jb51.net/article/239809.htm
手把手教你 Electron + Vue 搭建前端桌面应用
https://segmentfault.com/a/1190000040326098
备用文章
官方文档:
What is Electron?
https://www.electronjs.org/docs/latest/
Electron是什么?中文文档
https://www.electronjs.org/zh/docs/latest/
electron-builder 文档
https://www.electron.build/
Electron应用图标的配置与生成
https://blog.csdn.net/duzm200542901104/article/details/129696739
$ npm run electron:generate-icons
Electron第4集 自定义顶部菜单、右键菜单、绑定快捷键
https://blog.csdn.net/u013990690/article/details/112304723
electron安装+运行+打包成桌面应用+打包成安装文件+开机自启动
https://blog.csdn.net/qq285679784/article/details/119962625
本地实践以及生成的安装文件:
Electron 打包优化 - 从 393MB 到 161MB
(能不能不打包 node_modules ?)
https://cloud.tencent.com/developer/article/1547891
windows安装包打包
本地完成npm包的安装
npm install
执行打包-绿色版
npm run packager
11231@DESKTOP-5HA4FHT MINGW64 /d/FrontEnd/yesdev_electron/electron-quick-start (master)
$ npm run packager
> yesdev@6.0.0 packager
> electron-packager ./ YesDev项目管理 --platform=win32 --arch=x64 --icon=./icon.ico --overwrite
Packaging app for platform win32 x64 using electron v31.2.1
Wrote new app to: D:\FrontEnd\yesdev_electron\electron-quick-start\YesDev项目管理-win32-x64
生成的绿色版,
参考目录:D:\FrontEnd\yesdev_electron\electron-quick-start\YesDev项目管理-win32-x64
使用Inno Setup 打包成安装包
生成目录,
D:\FrontEnd\yesdev_electron\inno-setup\Output
在MacOs打包(低于v10.14版本的问题未解决,官方称已不再支持)
本地完成npm包的安装
npm install
$ node -v
v16.20.2
本地打包
npm run packager:mas
~/projects/codeup/yesdev_electron on master! ? 14:08:42
$ npm run packager:mas
> yesdev@6.0.0 packager:mas
> electron-packager ./ YesDev项目管理 --platform=mas --icon=./icon.ico --overwrite
Downloading electron-v31.2.1-mas-x64.zip: [====================================================================================================] 100% ETA: 0.0 seconds
Packaging app for platform mas x64 using electron v31.2.1
WARNING: Could not find icon "icon.icns", not updating app icon
WARNING: signing is required for mas builds. Provide the osx-sign option, or manually sign the app later.
Wrote new app to: /Users/dogstar/projects/codeup/yesdev_electron/YesDev项目管理-mas-x64
打包
$ npm run build:mac
安装后效果,
https://www.electronjs.org/blog/electron-27-0
参考
Electron-开发实践:Mac打包
https://blog.vincentqiao.com/electron-mac
相关推荐
- Java项目宝塔搭建实战MES-Springboot开源MES智能制造系统源码
-
大家好啊,我是测评君,欢迎来到web测评。...
- 一个令人头秃的问题,Logback 日志级别设置竟然无效?
-
原文链接:https://mp.weixin.qq.com/s/EFvbFwetmXXA9ZGBGswUsQ原作者:小黑十一点半...
- 实战!SpringBoot + RabbitMQ死信队列实现超时关单
-
需求背景之为什么要有超时关单原因一:...
- 火了!阿里P8架构师编写堪称神级SpringBoot手册,GitHub星标99+
-
Springboot现在已成为企业面试中必备的知识点,以及企业应用的重要模块。今天小编给大家分享一份来着阿里P8架构师编写的...
- Java本地搭建宝塔部署实战springboot仓库管理系统源码
-
大家好啊,我是测评君,欢迎来到web测评。...
- 工具尝鲜(1)-Fleet构建运行一个Springboot入门Web项目
-
Fleet是JetBrains公司推出的轻量级编辑器,对标VSCode。该款产品还在公测当中,具体下载链接如下JetBrainsFleet:由JetBrains打造的下一代IDE。想要尝试的...
- SPRINGBOOT WEB 实现文件夹上传(保留目录结构)
-
网上搜到的SpringBoot的代码不多,完整的不多,能用的也不多,基本上大部分的文章只是提供了少量的代码,讲一下思路,或者实现方案。之前一般的做法都是使用HTML5来做的,大部都是传文件的,传文件夹...
- Java项目本地部署宝塔搭建实战报修小程序springboot版系统源码
-
大家好啊,我是测评君,欢迎来到web测评。...
- 新年IT界大笑料“工行取得基于SpringBoot的web系统后端实现专利
-
先看看专利描述...
- 看完SpringBoot源码后,整个人都精神了
-
前言当读完SpringBoot源码后,被Spring的设计者们折服,Spring系列中没有几行代码是我们看不懂的,而是难在理解设计思路,阅读Spring、SpringMVC、SpringBoot需要花...
- 阿里大牛再爆神著:SpringBoot+Cloud微服务手册
-
今天给大家分享的这份“Springboot+Springcloud微服务开发实战手册”共有以下三大特点...
- WebClient是什么?SpringBoot中如何使用WebClient?
-
WebClient是什么?WebClient是SpringFramework5引入的一个非阻塞、响应式的Web客户端库。它提供了一种简单而强大的方式来进行HTTP请求,并处理来自服务器的响应。与传...
- SpringBoot系列——基于mui的H5套壳APP开发web框架
-
前言 大致原理:创建一个main主页面,只有主页面有头部、尾部,中间内容嵌入iframe内容子页面,如果在当前页面进行跳转操作,也是在iframe中进行跳转,而如果点击尾部按钮切换模块、页面,那...
- 在Spring Boot中使用 jose4j 实现 JSON Web Token (JWT)
-
JSONWebToken或JWT作为服务之间安全通信的一种方式而闻名。...
- Spring Boot使用AOP方式实现统一的Web请求日志记录?
-
AOP简介AOP(AspectOrientedProgramming),面相切面编程,是通过代码预编译与运行时动态代理的方式来实现程序的统一功能维护的方案。AOP作为Spring框架的核心内容,通...
你 发表评论:
欢迎- 一周热门
- 最近发表
-
- Java项目宝塔搭建实战MES-Springboot开源MES智能制造系统源码
- 一个令人头秃的问题,Logback 日志级别设置竟然无效?
- 实战!SpringBoot + RabbitMQ死信队列实现超时关单
- 火了!阿里P8架构师编写堪称神级SpringBoot手册,GitHub星标99+
- Java本地搭建宝塔部署实战springboot仓库管理系统源码
- 工具尝鲜(1)-Fleet构建运行一个Springboot入门Web项目
- SPRINGBOOT WEB 实现文件夹上传(保留目录结构)
- Java项目本地部署宝塔搭建实战报修小程序springboot版系统源码
- 新年IT界大笑料“工行取得基于SpringBoot的web系统后端实现专利
- 看完SpringBoot源码后,整个人都精神了
- 标签列表
-
- idea eval reset (50)
- vue dispatch (70)
- update canceled (42)
- order by asc (53)
- spring gateway (67)
- 简单代码编程 贪吃蛇 (40)
- transforms.resize (33)
- redisson trylock (35)
- 卸载node (35)
- np.reshape (33)
- torch.arange (34)
- node卸载 (33)
- npm 源 (35)
- vue3 deep (35)
- win10 ssh (35)
- exceptionininitializererror (33)
- vue foreach (34)
- idea设置编码为utf8 (35)
- vue 数组添加元素 (34)
- std find (34)
- tablefield注解用途 (35)
- python str转json (34)
- java websocket客户端 (34)
- tensor.view (34)
- java jackson (34)