位置: IT常识 - 正文
目录
第一步:下载模板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,剩下的具体的原因根据具体的报错具体提问,谢谢!
我们接下来看一下官方实例文件夹里面(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文件,这个就是我们的启动文件。
这样就完成了!
上一篇:瓦普斯克国家公园内向洞穴外张望的北极熊幼崽,加拿大马尼托巴 (© Robert Harding/Alamy)(瓦普拉克)
下一篇:精确控制 AI 图像生成的破冰方案,ControlNet 和 T2I-Adapter(精确控制 英文)
友情链接: 武汉网站建设