位置: IT常识 - 正文

将vue项目打包成电脑端应用.exe(vue打包成一个文件)

编辑:rootadmin
将vue项目打包成电脑端应用.exe

目录

第一步:下载模板electron-quick-start

第二步:进入到下载好的模板文件当中(electron-quick-start) 

第三步:打包自己的项目(npm run build) 

第四步:删掉官方demo下的index.html文件 

第五步:在官方demo项目当中找到main.js,修改打包文件路径为我们的index.html 

第六步:将自己项目打包后的dist文件夹复制到官方demo根目录 

第七步:在官方demo项目中检查一下package.json,正常情况下,运行下面的指令就可以进入效果预览 

第八步:在官方demo项目中,下载打包需要的依赖electr-packager 

第九步:在官方demo当中,进入package.json,在script中添加packager指令

第十步:运行命令打包,然后项目当中就会出现一个App-win32-x64的文件夹 

推荐整理分享将vue项目打包成电脑端应用.exe(vue打包成一个文件),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:vue把整个项目打包成一个js,vue项目打包成exe,将vue项目打包成小程序,将vue项目打包成apk,将vue项目打包成apk,将vue项目打包成apk,将vue项目打包成移动端app,将vue项目打包成移动端app,内容如对您有帮助,希望把文章链接给更多的朋友!

最近在编写一个软件系统,让将打包好的vue工程,变成电脑端.exe可执行程序呈现,之前没有涉及到过这方面的开发,所以到了网上看了相关的操作流程,现在最主流的打包方式有两种,一种是electron更换自己项目的demo,另一个就是再electron中修改,主要修改的是自己项目的路径。当然,这两种方法全都是在electron这个工具上面进行修改的,我们使用的是第一种方案,为什么呢,因为简单便捷,而且不容易出错。

   目前C站上面的打包教程,都是只教你指令,过程没有讲明白,所以就导致一些刚入门的,没有那么了解的朋友操作起来就一头雾水,本文讲解认为较为详细,将大家点点赞,支持一下!

  第一步:下载模板electron-quick-start

这个操作很简单,你电脑上面有Git的话可以使用命令行直接输入下面的代码,不然还可以到electron官方网站上面或者GitHub上面自行下载一个模板,这边就只教第一个。打开Git CMD

输入下面的Git地址位置:

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

 

这样我的E盘里面就会有一个下载好的模板了,我们可以看一下,

第二步:进入到下载好的模板文件当中(electron-quick-start) 

我们直接使用VS code将这个文件打开,

直接使用命令npm start将这个官方的demo跑起来,我们就可以看到官方demo里面的应用程序界面了。

呈现出来的应该是这样的界面,没有操作成功的朋友,主要看到是不是进入到了文件夹,没有进入到的使用cd 到这个文件夹;如果还是发现错误,那可能是你没有安装依赖,npm install,剩下的具体的原因根据具体的报错具体提问,谢谢!

将vue项目打包成电脑端应用.exe(vue打包成一个文件)

我们接下来看一下官方实例文件夹里面(electron-quick-start)当中的入口文件mian.js,下图是createWindows(创建串口的)函数部分;

第三步:打包自己的项目(npm run build) 

注意是自己的项目,别稀里糊涂的将官方的demo打包了自己都没有发觉!

回到文件夹我们就可以看到这样:

第四步:删掉官方demo下的index.html文件 

第五步:在官方demo项目当中找到main.js,修改打包文件路径为我们的index.html 

第六步:将自己项目打包后的dist文件夹复制到官方demo根目录 

第七步:在官方demo项目中检查一下package.json,正常情况下,运行下面的指令就可以进入效果预览 

第八步:在官方demo项目中,下载打包需要的依赖electr-packager 

(也可以vs code命令行中断直接输入指令下载,这边只是习惯CMD) 

第九步:在官方demo当中,进入package.json,在script中添加packager指令

第十步:运行命令打包,然后项目当中就会出现一个App-win32-x64的文件夹 npm run packager

经过漫长的等待,我们就可以看到项目当中出现一个App-win32-x64的文件夹,这个文件夹就是打包好的桌面应用,文件夹当中会有一个App.exe文件,这个就是我们的启动文件。

这样就完成了!

本文链接地址:https://www.jiuchutong.com/zhishi/292373.html 转载请保留说明!

上一篇:瓦普斯克国家公园内向洞穴外张望的北极熊幼崽,加拿大马尼托巴 (© Robert Harding/Alamy)(瓦普拉克)

下一篇:精确控制 AI 图像生成的破冰方案,ControlNet 和 T2I-Adapter(精确控制 英文)

  • 查账征收纳税申报表
  • 报税日期是哪月哪天?
  • 征收率 税率 区别
  • 递延所得税资产借贷方向
  • 年数总和法怎么做
  • 员工充值饭卡的收入如何做账
  • 支付的保证金
  • 计划成本法委托加工物资例题
  • 中外合资经营企业的经营期限
  • 固定资产折旧属于制造费用吗
  • 出口退税进项抵扣了不退税可以吗
  • 印花税一定要贴花吗
  • 公司汽车车险抵税多少
  • 原始股 出售
  • 企业预付的固定资产折旧
  • 预缴附加税怎么做账
  • 视同销售的计税依据
  • 政府返还的资金如何处理
  • windows10如何更改时间
  • windows10如何开机启动软件
  • android 设置按钮颜色
  • 找发票抵工资
  • 如何做无票收入的会计分录
  • 增值税红字发票申报表怎么填
  • WIN7系统的镜像文件在哪里
  • php操作mysql数据库
  • 如何使用腾讯电子签
  • 材料发票可以抵税吗
  • 生产车间闲置的固定资产
  • ds file是干什么的
  • php提供了________和___________两种复合数据类型
  • 企业汇算清缴费用
  • PHP:imagealphablending()的用法_GD库图像处理函数
  • wordpress portfolio
  • 老生常谈php中传统验证与thinkphp框架(必看篇)
  • php实现和工作原理
  • 大前端需要掌握什么技能
  • 个人开发微信支付接口
  • 什么情况下可以转入资本公积
  • 超出python用什么
  • 小规模纳税企业在应交增值税明细科目
  • 年终奖怎么缴纳
  • 代征税款手续费规定
  • SQLServer 2008 :error 40出现连接错误的解决方法
  • mysql死锁的处理方法
  • 补提去年企业所得税会计分录
  • sqlserver启动不起来
  • 幼儿园固定资产说明怎么写
  • 个税申报哪些可以减免
  • 收到自然人税务申报短信
  • 冲抵货款是什么意思
  • mysql如何调优
  • 企业所得税什么时候计提
  • 企业用现金支付本企业职工工资时应
  • 企业投资期货亏损能抵税么
  • 发票已到货未到会计分录
  • 请问母公司如何称呼
  • 投资款如何界定
  • 个人转到公司账上的钱能开发票吗
  • 经营范围之外的业务
  • 一般纳税人10万元以下附加税
  • 企业注销前是不是资产必须处理完
  • 公司汽车上牌费用多少
  • 会计错账的更正方法
  • 使用sql server
  • win10无人值守文件使用方法
  • linux如何读取nvme信息
  • win10系统预览版
  • linux基础常用命令
  • linux内核编程指南
  • win7 64位纯净版系统c盘空间显示与实际占用空间不对的解决方法图文教程
  • win10升级win1
  • 如何消除手机自动出现的广告
  • python给定某数字a
  • node.js web
  • shell脚本监控进程
  • jquery中的动画方法有哪些
  • 自然人扣缴端重置密码操作流程
  • 移动办税12366
  • 深圳代理记账公司赚钱吗
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设