栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 软件开发 > Web开发 > Vue.js

vuecli + electron 的简单方式electron-builder

Vue.js 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

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,会发现应用的图标变了

转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/239876.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号