Javascript

vuecli + electron 的简单方式electron-builder

本文主要是介绍vuecli + electron 的简单方式electron-builder,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

之前介绍一个vuecli + electron的方法,最近发现一个更简单的方式
参考:
https://nklayman.github.io/vue-cli-plugin-electron-builder/

1. 用vuecli创建一个vue工程

过程省略

2. 安装electron-builder

vue add electron-builder
// 安装的东西很多,注意网络
// 可以先安装cnpm install --save-dev electron-chromedriver
// 本人安装时,报了很多错,后来隔天新建了个工程,一下子就安装成功了

安装成功后,运行npm run electron:serve,如果出现以下页面,说明成功了
图片描述

3. 打包

// 执行下面的命令即可
npm run electron:build
//在dist_electron目录下会发现一个exe
//点击运行(不过比较慢)
//还有一个win-unpacked文件夹,里面是我们之前打包的模式,点击里面的exe,即可运行

4. 自定义图标

4.1 安装组件,cnpm install --save-dev electron-icon-builder
4.2 准备好你的图标,放到/public/icon.png
4.3 在package.json的scripts下新增一条命令

"electron:generate-icons": "electron-icon-builder --input=./public/icon.png --output=build --flatten"

4.4 执行,npm run electron:generate-icons,生成一系列图标
4.5 删除dist_electron文件夹,重新执行打包命令,npm run electron:build,会发现应用的图标变了

点击查看更多内容
这篇关于vuecli + electron 的简单方式electron-builder的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!