位置: 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(精确控制 英文)

  • 哪些单位属于政府工作部门系列
  • 增值税申报时有0.1元差额,怎么申报
  • 企业购进软件系统后如何做账
  • 生产成本月末结转到本年利润里吗
  • 带息承兑汇票的利息收入要缴纳增值税吗
  • 预借差旅费凭证填写
  • 托收承付怎么理解
  • 保险公司返点啥意思
  • 关于半年度净资产的公告
  • 财务费用在贷方与做借方红字有区别吗
  • 当月发票入库核销怎么算
  • 负债表应交税费为负数
  • 销售礼盒增值税税率
  • 专项发票和普通发票的税点
  • 公司购房、售房需要缴纳哪些税?
  • 减税降费政策六税
  • 简化丢失专用发票的处理流程
  • 工程承包收入如何确定
  • 哪些发票备注栏必须注明
  • 收据可以入账的范围
  • 公司经营权补偿款会计处理?
  • 新手会计怎么入门做账
  • 没有实缴的股份转让要交个人所得税吗
  • 企业计提房产税的会计处理正确的是
  • 树木种植公司
  • 房地产开发企业分为几个等级
  • PHP:session_write_close()的用法_Session函数
  • 进口的增值税票能抵扣吗
  • Uniapp 使用mocjk
  • 企业所得税的税率是多少
  • 长期股权投资会减值吗
  • php框架运行机制
  • php基本框架
  • vuex中this.$store.commit和this.$store.dispatch的用法
  • 随机梯度下降算法优缺点
  • php 7.4
  • 浅谈php中静态方法的应用
  • 转回已核销的坏账分录
  • 什么是其他综合收益,包括哪些内容
  • 未核定月数是什么
  • 建设单位和施工单位的责任和义务
  • 员工借现金分录
  • 钢贸企业税收怎么算
  • 大公司要求小规模公司交税
  • SqlServer 2005 T-SQL Query 学习笔记(3)
  • 商贸公司分录大全
  • 个税申报错误已经扣税款怎么处理
  • 其他权益工具投资出售时账务处理
  • 不动产进项税额不再分两年抵扣
  • 土地补偿费怎么算
  • 净利润递延所得税
  • 在建工程中的业务招待费转无形资产后所得税如何处理
  • 小规模纳税人需要每月报税吗
  • 业务招待费会计科目
  • 资产季末值
  • 先出报表还是先报表
  • 现金日记账怎么划线
  • 新公司建账初始数据可以全部为零吗
  • sql合并数据库
  • sqlserver清空所有表数据
  • sqlserver 千万数量级分页存储过程代码
  • billmoney是什么意思
  • win7旗舰版开机
  • cocos jsc
  • javascript中的document.write
  • 手游接入
  • jquery使用jsonp
  • 7z.exe 命令行
  • 怎样用div css制作网页
  • android采用什么软件架构?
  • 服务器安全设备
  • javascript基础入门教程
  • 安卓 html
  • 新收入准则租赁业务
  • 关于挂职的规定
  • 增值税纳税申报操作流程和内容
  • 江苏专家库申报在哪个网站
  • 购买的土地没有土地使用证
  • 江苏国税电子国税局
  • 在外地买车在青岛能买吗
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设