Electron + vue 打包桌面操作流程详解


Posted in Javascript onJune 24, 2019

提前准备一个vue项目,也可以使用初始的vue项目

vue init webpack

安装到后边有的会出现报错,可以忽略,启动npm run dev 启动成功就可以

在vue项目下执行下载以下依赖,会用到

cnpm install electron --save-dev
cnpm install electron-packager --save-dev //这个是打成exe文件的插件,之后要用,提前下载好

获取Electron的资源

git clone https://github.com/electron/e...
cd electron-quick-start
cnpm install //这里我用的是cnpm,npm太慢了

将Electron获取到资源的main.js复制到vue里面的bulid里面并修改为electron.js

Electron + vue 打包桌面操作流程详解

然后修改

Electron + vue 打包桌面操作流程详解

将assetsPublicPath: '/' 改为./,都是为了获取准确的路径

然后再修改electron.js

Electron + vue 打包桌面操作流程详解

改为 这个pathname: path.join(__dirname, '../dist/index.html')

不懂的可以去搜vue 的 dist

这些改好了之后配置package.json

Electron + vue 打包桌面操作流程详解

用来启动 npm run abc

启动成功为

Electron + vue 打包桌面操作流程详解

启动成功可以执行下一步

在配置打包的package.json

Electron + vue 打包桌面操作流程详解

关于electron-packager的配置,简单介绍一下。

electron-packager <sourcedir> <appname> --platform=<platform> --arch=<arch> [optional flags...]

sourcedir 资源路径,在本例中既是./dist/

appname 打包出的exe名称

platform 平台名称(windows是win32)

arch 版本,本例为x64

到这里还没有完因为还有坑呢

我就把坑跳过

Electron + vue 打包桌面操作流程详解

将bulid的electron.js文件复制到dist中,将package.json也复制到当中(提示dist文件和里面内容自动生成不用自己创建)

然后修改electron.js

mainWindow.loadURL(url.format({
pathname: path.join(__dirname, 'index.html'),
protocol: 'file:',
slashes: true
}))

再修改复制到dist中的package.json

Electron + vue 打包桌面操作流程详解

再启动npm run go 会出现打包成功的文件夹

再从里面寻找exe文件 就可以了!!!!!

总结

以上所述是小编给大家介绍的Electron + vue 打包桌面操作流程详解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
JavaScript 异步调用框架 (Part 4 - 链式调用)
Aug 04 Javascript
jquery下利用jsonp跨域访问实现方法
Jul 29 Javascript
boxy基于jquery的弹出层对话框插件扩展应用 弹出层选择器
Nov 21 Javascript
JS实现的省份级联实例代码
Jun 24 Javascript
JS获取屏幕,浏览器窗口大小,网页高度宽度(实现代码)
Dec 17 Javascript
javascript验证邮件地址和MX记录的方法
Jun 16 Javascript
js判断图片加载完成后获取图片实际宽高的方法
Feb 25 Javascript
AngularJS 异步解决实现方法
Jun 12 Javascript
Django+Vue.js搭建前后端分离项目的示例
Aug 07 Javascript
jQuery实现弹窗下底部页面禁止滑动效果
Dec 19 jQuery
JavaScript undefined及null区别实例解析
Jul 21 Javascript
OpenLayers3实现测量功能
Sep 25 Javascript
JS字符串常用操作方法实例小结
Jun 24 #Javascript
新手入门带你学习JavaScript引擎运行原理
Jun 24 #Javascript
vue+elementUI 复杂表单的验证、数据提交方案问题
Jun 24 #Javascript
新手如何快速理解js异步编程
Jun 24 #Javascript
简单了解小程序+node梳理登陆流程
Jun 24 #Javascript
JS数组扁平化(flat)方法总结详解
Jun 24 #Javascript
深入了解query和params的使用区别
Jun 24 #Javascript
You might like
PHP获取类中常量,属性,及方法列表的方法
2009/04/09 PHP
深入探讨<br />和 \r\n两者有什么区别??
2013/06/05 PHP
领悟php接口中interface存在的意义
2013/06/27 PHP
PHP迭代器实现斐波纳契数列的函数
2013/11/12 PHP
基于JQuery框架的AJAX实例代码
2009/11/03 Javascript
js实现在同一窗口浏览图片
2014/09/17 Javascript
node.js中的fs.chownSync方法使用说明
2014/12/16 Javascript
jQuery判断一个元素是否可见的方法
2015/06/05 Javascript
JavaScript中的Math.sin()方法使用详解
2015/06/15 Javascript
Eclipse编辑jsp、js文件时卡死现象的解决办法汇总
2016/02/02 Javascript
整理JavaScript对DOM中各种类型的元素的常用操作
2016/05/05 Javascript
Augularjs-起步详解
2016/07/08 Javascript
JavaScript无操作后屏保功能的实现方法
2017/07/04 Javascript
基于axios封装fetch方法及调用实例
2018/02/05 Javascript
layui table动态表头 改变表格头部 重新加载表格的方法
2019/09/21 Javascript
Vuex模块化应用实践示例
2020/02/03 Javascript
Python求导数的方法
2015/05/09 Python
解决Pycharm调用Turtle时 窗口一闪而过的问题
2019/02/16 Python
Python进阶之@property动态属性的实现
2019/04/01 Python
python3模拟实现xshell远程执行liunx命令的方法
2019/07/12 Python
python线程定时器Timer实现原理解析
2019/11/30 Python
numpy ndarray 取出满足特定条件的某些行实例
2019/12/05 Python
Python实现bilibili时间长度查询的示例代码
2020/01/14 Python
Python中flatten( ),matrix.A用法说明
2020/07/05 Python
博朗(Braun)俄罗斯官方商店:德国小家电品牌
2019/09/24 全球购物
shell程序中如何注释
2012/02/17 面试题
消防安全汇报材料
2014/02/08 职场文书
清扬洗发水广告词
2014/03/14 职场文书
仓库管理员岗位职责
2014/03/19 职场文书
小学一年级评语大全
2014/04/22 职场文书
社区关爱留守儿童活动方案
2014/08/22 职场文书
2014业务员年终工作总结
2014/12/09 职场文书
学校元旦晚会开场白
2014/12/14 职场文书
捐款感谢信
2015/01/20 职场文书
3.15消费者权益日活动总结
2015/02/09 职场文书
Mysql外键约束的创建与删除的使用
2022/03/03 MySQL