vue集成electron从创建项目到成功打包之路

本文讲述了作者在将Vue项目与Electron集成时遇到的中文路径问题,包括使用vue-initsimulatedgreg/electron-vuexx的困难,最终通过新建项目并结合electron-builder打包,解决了路径解析问题,成功打包并分享了打包过程中的注意事项和解决步骤。

最近在搞vue集成electron的项目,发现了挺多坑的,刚开始也百度了很多看到的都是推荐用vue init simulatedgreg/electron-vue xx这个来集成vue,但我也复制命令去安装结果发现根本安装不了,即使去GitHub上拉下来跑起来也是一堆报错,索性我就放弃了这个方案,最后还是觉得新建一个vue-cli项目再结合electron打包插件electron-builder打包就好。

集成 Electron

关于怎么在vue工程项目里面集成electron,我也不多说,点击这个链接按照这个博主的步骤走下去就完事了。
链接:https://www.jianshu.com/p/101a3808e01c

打包 Electron

在vue里面打包Electron真可谓有点麻烦,执行npm run electron:build打包命令后,要从GitHub上下载一系列的东西,重要的是用了科学上网之后打包还是会报错,要自己手动去浏览器里面下载那些配置文件下来手动放到那些目录打包才能成功,关于那些配置文件的下载以及放到哪个目录可以参考一下这篇文章,
链接:https://blog.csdn.net/syj573077027/article/details/123610805
下载的时候那些版本最好是复制自己打包的时候命令行界面报错的提示链接下载,不然不知道会不会出现兼容性问题。
按照上面的流程走完之后我本以为马上就大功告成了,执行打包命令结果给我丢出这个错误
在这里插入图片描述
不慌不慌,丝毫不慌,经过一番查询,原来这是因为项目路径中又中文字符,打包的时候可能解析不了中文字符,经过一番修改后,最后终于打包成功!!!
打包成功后的目录结构
在这里插入图片描述

双击electron-vue Setup 0.1.0这个东西电脑就会自动完成安装了,大功告成!!!
在这里插入图片描述

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值