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

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

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

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、改图标、安装包)” 的相关文章

如何在GitLab上回退指定版本的代码?GitLab回退指定版本问题分析

在Git中,回退到指定版本并不是删除或撤销之前的提交,而是创建一个新的提交,该提交包含指定版本的内容。这意味着您需要将当前代码更改与指定版本之间的差异进行比较,并将其合并到一个新的提交中。如果您没有更新本地代码,并且您希望将 GitLab 仓库回退到指定版本,您可以使用以下命令:git fetchg...

快速掌握 Git:程序员必会的版本控制技巧

在现代软件开发中,版本控制系统(VCS)是开发人员不可或缺的工具。无论是个人项目,还是多人协作的团队开发,良好的版本控制都能确保代码管理的高效性与稳定性。而在版本控制系统中,Git 凭借其分布式、灵活性和高效性,成为了最流行的工具之一。几乎所有的开发团队都在使用 Git 来管理代码版本、协作开发和追...

壹啦罐罐 Android 手机里的 Xposed 都装了啥

这是少数派推出的系列专题,叫做「我的手机里都装了啥」。这个系列将邀请到不同的玩家,从他们各自的角度介绍手机中最爱的或是日常使用最频繁的 App。文章将以「每周一篇」的频率更新,内容范围会包括 iOS、Android 在内的各种平台和 App。本期继续歪楼,由少数派撰稿作者@壹啦罐罐介绍他正在使用的...

vue中router常见的三种传参方式

目录:我们在使用vue开发的过程中使用router跳转的时候肯定会遇到传参的情况;一般情况就三种传参是最常见的;那我们就来看看都有那几种传参方式吧!第一种:{ path: '/mall:id', name: 'Mall', component:...

三勾商城(java+vue3)微信小程序商城+SAAS+前后端源码

项目介绍本系统功能包括: 前台展示+后台管理+SAAS管理端,包括最基本的用户登录注册,下单, 购物车,购买,结算,订单查询,收货地址,后台商品管 理,订单管理,用户管理等等功能,小伙伴一起来看看吧。三勾小程序商城基于springboot+element-ui+uniapp打造的面向开发的小程序商城...

vue.js 双向绑定如何理解,有什么好处!#云南小程序开发

Vue.js 的双向数据绑定是借助于 JavaScript 的一些特性,如对象的属性 getter 和 setter 以及 Vue 的依赖追踪系统实现的。简单来说,双向数据绑定就是数据与视图间的双向通信,也就是说数据的改变会马上反映到视图中,视图的改变也会立刻改变数据。具体来说,当你改变了数据时,视...