百度360必应搜狗淘宝本站头条
当前位置:网站首页 > 技术分类 > 正文

踩坑整理:用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框架的核心内容,通...

取消回复欢迎 发表评论: