当前位置:首页 > 技术分析 > 正文内容

踩坑整理:用electron打包Vue项目(win+mac、改图标、安装包)

ruisui882个月前 (03-01)技术分析12

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

扫描二维码推送至手机访问。

版权声明:本文由ruisui88发布,如需转载请注明出处。

本文链接:http://www.ruisui88.com/post/2360.html

分享给朋友:

“踩坑整理:用electron打包Vue项目(win+mac、改图标、安装包)” 的相关文章

java调用API操作GitLab

最近需要在一个WEB项目中集成GitLab,用到了GitLab的API操作,在网上找了很久都是说直接调用GitLab的Http接口,而且API官方只有javadoc没有其它说明文档,特别记录下,以备查询。这里采用Token的认证方式,因此需要先登陆GitLab新建一个Token,创建方式如下:创建完...

gitlab简单搭建与应用

一、gitlab1、简介GitLab是利用Ruby on Rails一个开源的版本管理系统,实现一个自托管的Git项目仓库,可通过Web界面进行访问公开的或者私人项目。与Github类似,GitLab能够浏览源代码,管理缺陷和注释。可以管理团队对仓库的访问,它非常易于浏览提交过的版本并提供一个文件历...

Gitlab之间进行同步备份

目前,我们公司有两个研发团队,分别在北京和武汉,考虑到访问速度的问题,原有武汉的研发环境在近端部署。也就是北京和武汉分别有两套独立的研发管理环境,虽然这解决了近端访问速度的问题,但是管理上较为分散,比如研发环境备份和恢复就是最重要的问题之一。最近,处于对安全性和合规性的考虑,希望将北京和武汉的源代码...

jvm疯狂吃内存,到底是谁的锅?

jvm应该是每一个java程序员都需要掌握的内容,但是在没有遇到问题之前,很多都是基于理论的,唯有实战才能增加个人的知识储备。本文是从一个角度来分析是谁在狂吃内存,希望对你有所帮助。本文是易观技术人员注意到一台开发机上各个微服务进程占用内存很高,随即便展开了调查......ps:本文来源于:http...

《暗黑破坏神 2:重制版》PC 版 2.3 版本发布,支持英伟达 DLSS

IT之家 12 月 3 日消息,暴雪为《暗黑破坏神 2:重制版》PC 版发布了更新 2.3 版本,添加了“离线难度缩放”滑块(玩家可以在单人游戏时增加挑战和奖励的级别)、多项辅助功能和用户界面改进,以及英伟达 DLSS 支持。玩法改进:玩家现在可以在离线游戏的选项菜单中使用“游戏难度等级”,它提供与...

一文让你彻底搞懂 vue-Router

路由是网络工程里面的专业术语,就是通过互联把信息从源地址传输到目的地址的活动。本质上就是一种对应关系。分为前端路由和后端路由。后端路由:URL 的请求地址与服务器上的资源对应,根据不同的请求地址返回不同的资源。前端路由:在单页面应用中,根据用户触发的事件,改变URL在不刷新页面的前提下,改变显示内容...