使用electron将vue-cli项目打包成exe的方法


Posted in Javascript onSeptember 29, 2018

如果你已经做好了一个vue的项目,并且想要将他打包成exe,那么请继续阅读。

首先你可以下载一个demo了解一下。

git clone https://github.com/electron/electron-quick-start
cd electron-quick-start
npm install
npm start

这个demo主要就是main.js和package.json

打开main.js

const {app, BrowserWindow} = require('electron')
let mainWindow
function createWindow () {
 // Create the browser window.
 mainWindow = new BrowserWindow({width: 800, height: 600})//创建一个浏览器窗口,可配置宽高
 // and load the index.html of the app.
 mainWindow.loadFile('index.html')//加载html
 // Open the DevTools.
 // mainWindow.webContents.openDevTools()//打开调试窗口
 mainWindow.on('closed', function () {
 mainWindow = null
 })
}

app.on('ready', createWindow)
app.on('window-all-closed', function () {
 if (process.platform !== 'darwin') {
 app.quit()
 }
})
app.on('activate', function () {
 if (mainWindow === null) {
 createWindow()
 }
})

package.json

{
 "name": "electron-quick-start",
 "version": "1.0.0",
 "description": "A minimal Electron application",
 "main": "main.js",//入口,根据自己的项目修改
 "scripts": {
 "start": "electron ."
 },
 "repository": "https://github.com/electron/electron-quick-start",
 "keywords": [
 "Electron",
 "quick",
 "start",
 "tutorial",
 "demo"
 ],
 "author": "GitHub",
 "license": "CC0-1.0",
 "devDependencies": {
 "electron": "^2.0.0"
 }
}

运行 npm start

显示窗口

使用electron将vue-cli项目打包成exe的方法

ok,现在我们在自己的项目上安装两个依赖

npm install electron --save-dev
npm install electron-packager --save-dev

electron有两种打包方式,electron-packager和electron-builder,官方推荐electron-builder,但是较为麻烦,初学者建议先用

electron-packager

首先将例子中的main.js复制一份并重命名为electron

修改为 mainWindow.loadFile(‘./dist/index.html')

然后对你的项目进行打包,npm run build

打包完成后,将electron.js 在复制一份到dist目录下,修改mainWindow.loadFile(‘index.html')

将项目根目录下的package.json修改

如同以下

"main": "build/electron.js",//入口
 "scripts": {
 "dev": "node build/dev-server.js",
 "start": "npm run dev",
 "build": "node build/build.js",
 "test": "electron .",
 "electron_build": "electron-packager ./dist exeName --platform=win32 --arch=x64 --icon=./assets/img/favicon.ico --overwrite"
 },

复制package.json到dist目录下,修改

"main": "electron.js",1

运行npm test 打开项目

运行npm run electron_build 进行打包,exe图标必须有,格式是ico,exeName是exe的名称,根据自己需要配置

为什么要在dist目录加上electron.js和package.json呢?这是因为内部机制会找到index.html下package.json进行打包

以上这篇使用electron将vue-cli项目打包成exe的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
input 高级限制级用法
Mar 26 Javascript
JavaScript 面向对象的之私有成员和公开成员
May 04 Javascript
Jquery知识点三 jquery表单对象操作
Jan 17 Javascript
jQuery建立一个按字母顺序排列的友好页面索引(兼容IE6/7/8)
Feb 26 Javascript
谷歌浏览器调试JavaScript小技巧
Dec 29 Javascript
js实现每日自动换一张图片的方法
May 04 Javascript
javascript实现状态栏文字首尾相接循环滚动的方法
Jul 22 Javascript
jQuery移除或禁用html元素点击事件常用方法小结
Feb 10 Javascript
深入剖析Express cookie-parser中间件实现示例
Feb 01 Javascript
5分钟快速掌握JS中var、let和const的异同
Sep 19 Javascript
vue中对象数组去重的实现
Feb 06 Javascript
图解JS原型和原型链实现原理
Sep 15 Javascript
脚手架vue-cli工程webpack的作用和特点
Sep 29 #Javascript
基于vue和react的spa进行按需加载的实现方法
Sep 29 #Javascript
使用Vuex解决Vue中的身份验证问题
Sep 28 #Javascript
js限制输入框只能输入数字(onkeyup触发)
Sep 28 #Javascript
js限制input只能输入有效的数字(第一个不能是小数点)
Sep 28 #Javascript
js实现点击展开隐藏效果(实例代码)
Sep 28 #Javascript
javascript中toFixed()四舍五入使用方法详解
Sep 28 #Javascript
You might like
ThinkPHP查询中的魔术方法简述
2014/06/25 PHP
PHP程序中的文件锁、互斥锁、读写锁使用技巧解析
2016/03/21 PHP
如何使用PHP给图片加水印
2016/10/12 PHP
PHP基于DOM创建xml文档的方法示例
2017/02/08 PHP
解密效果
2006/06/23 Javascript
jquery ajax 检测用户注册时用户名是否存在
2009/11/03 Javascript
JavaScript中解决多浏览器兼容性23个问题的快速解决方法
2016/05/19 Javascript
jquery使用EasyUI Tree异步加载JSON数据(生成树)
2017/02/11 Javascript
jquery请求servlet实现ajax异步请求的示例
2017/06/03 jQuery
你应该知道的几类npm依赖包管理详解
2017/10/06 Javascript
Vue SSR 组件加载问题
2018/05/02 Javascript
防止Layui form表单重复提交的实现方法
2019/09/10 Javascript
JS数组及对象遍历方法代码汇总
2020/06/16 Javascript
[01:40]2014DOTA2国际邀请赛 三冰SOLO赛后采访恶搞
2014/07/09 DOTA
python 查找文件夹下所有文件 实现代码
2009/07/01 Python
Python cookbook(数据结构与算法)通过公共键对字典列表排序算法示例
2018/03/15 Python
python机器学习之随机森林(七)
2018/03/26 Python
python操作xlsx文件的包openpyxl实例
2018/05/03 Python
Python合并多个Excel数据的方法
2018/07/16 Python
Python爬虫将爬取的图片写入world文档的方法
2018/11/07 Python
python3发送邮件需要经过代理服务器的示例代码
2019/07/25 Python
Python编写打字训练小程序
2019/09/26 Python
Python队列、进程间通信、线程案例
2019/10/25 Python
python opencv把一张图片嵌入(叠加)到另一张图片上的实现代码
2020/06/11 Python
Python中logger日志模块详解
2020/08/04 Python
纯CSS3绘制打火机动画火焰效果
2016/07/18 HTML / CSS
利用纯CSS3实现动态的自行车特效源码
2017/01/20 HTML / CSS
中间件分为哪几类
2016/09/18 面试题
大学新生军训个人的自我评价
2013/10/03 职场文书
教师应聘个人求职信
2013/12/10 职场文书
实习公司领导推荐函
2014/05/21 职场文书
语文教育专业求职信
2014/06/28 职场文书
家长学校培训材料
2014/08/20 职场文书
中国梦党课学习心得体会
2016/01/05 职场文书
导游词之太行山青龙峡
2020/01/14 职场文书
go语言中fallthrough的用法说明
2021/05/06 Golang