前言

提示:vue-cli-plugin-electron-builder用于vue集成electron项目的插件

electron官方文档:

https://www.electronjs.org/

vue-cli-plugin-electron-builder官方文档:

这里是引用https://nklayman.github.io/vue-cli-plugin-electron-builder/.


提示:以下是本篇文章正文内容,下面案例可供参考

一、创建vue项目

vue create electron-demo


在这里插入图片描述

二、安装插件

安装electron-builder

这里比较慢,需要耐心等待

vue add electron-builder


在这里插入图片描述
这里下载可能会很慢耐心等待下

遇到的问题
在安装electron-builder插件时,可能会遇到安装electron连接不上,导致node install安装失败

这时运行:

npm config edit


然后把配置复制到文件里,这时就完美解决了

electron_mirror=https://npm.taobao.org/mirrors/electron/
electron-builder-binaries_mirror=https://npm.taobao.org/mirrors/electron-builder-binaries/

三、运行项目

现在我们观察项目package.json会多出 “electron:build”: “vue-cli-service electron:build"和"electron:serve”: “vue-cli-service electron:serve”

我们运行命令: npm run electron:serve 就成功了
在这里插入图片描述
遇到的问题
在我运行npm run electron:serve时
在这里插入图片描述
通过查阅资料,出现这中报错可能时vue-cli5.0以上版本构建vue才会出现此种错误
我们只需要把 public/index.html改成index.ejs就可以解决了
在这里插入图片描述

总结

以上就是我在用vue-cli-plugin-electron-builder插件遇到的问题啦,只要我们思想不滑坡办法总比困难多。小伙伴们加油,在路上陪你们的落魄的小菜鸟给你们呐喊助威了。最后我还要说一下,为什么不用electron-vue(只能说狗都不用),嘿嘿

Logo

前往低代码交流专区

更多推荐