使用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 相关文章推荐
静态的动态续篇之来点XML
Aug 15 Javascript
网上抓的一个特效
May 11 Javascript
jquery中:input和input的区别分析
Jul 13 Javascript
js自动生成的元素与页面原有元素发生堆叠的解决方法
Sep 04 Javascript
js闭包的用途详解
Nov 09 Javascript
基于Jquery实现万圣节快乐特效
Nov 01 Javascript
javascript常用函数(1)
Nov 04 Javascript
阿里云ecs服务器中安装部署node.js的步骤
Oct 08 Javascript
ES6新特性之函数的扩展实例详解
Apr 01 Javascript
jQuery之动画ajax事件(实例讲解)
Jul 18 jQuery
详解angularjs 学习之 scope作用域
Jan 15 Javascript
javascript面向对象三大特征之继承实例详解
Jul 24 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
析构函数与php的垃圾回收机制详解
2013/10/28 PHP
php+mysql实现数据库随机重排实例
2014/10/17 PHP
PHP 双链表(SplDoublyLinkedList)简介和使用实例
2015/05/12 PHP
在PHP站点的页面上添加Facebook评论插件的实例教程
2016/01/08 PHP
php session的锁和并发
2016/01/22 PHP
PHP如何将XML转成数组
2016/04/04 PHP
thinkphp分页集成实例
2017/07/24 PHP
php打开本地exe程序,js打开本地exe应用程序,并传递相关参数方法
2018/02/06 PHP
Javascript弹出窗口的各种方法总结
2013/11/11 Javascript
bootstrap警告框使用方法解析
2017/01/13 Javascript
BootStrap Table前台和后台分页对JSON格式的要求
2017/06/28 Javascript
前端跨域的几种解决方式总结(推荐)
2017/08/16 Javascript
前端常见跨域解决方案(全)
2017/09/19 Javascript
原生JS实现记忆翻牌游戏
2020/07/31 Javascript
[36:52]DOTA2真视界:基辅特锦赛总决赛
2017/05/21 DOTA
Python抓取百度查询结果的方法
2015/07/08 Python
利用ctypes提高Python的执行速度
2016/09/09 Python
Django应用程序中如何发送电子邮件详解
2017/02/04 Python
Python探索之爬取电商售卖信息代码示例
2017/10/27 Python
在dataframe两列日期相减并且得到具体的月数实例
2018/07/03 Python
python使用Plotly绘图工具绘制水平条形图
2020/03/25 Python
PythonWeb项目Django部署在Ubuntu18.04腾讯云主机上
2019/04/01 Python
中国跨境电商:Tomtop
2017/03/16 全球购物
阿玛尼美妆加拿大官方商城:Giorgio Armani Beauty加拿大
2017/10/24 全球购物
LODI女鞋在线商店:阿利坎特的鞋类品牌
2019/02/15 全球购物
亚马逊巴西站:Amazon.com.br
2019/09/22 全球购物
Farfetch中文官网:奢侈品牌时尚购物平台
2020/03/15 全球购物
下面代码从性能上考虑,有什么问题
2015/04/03 面试题
一年级班主任寄语
2014/01/19 职场文书
售后服务经理岗位职责范本
2014/02/22 职场文书
校庆活动方案
2014/03/31 职场文书
简易离婚协议书范本2014
2014/10/15 职场文书
单身申明具结书
2015/02/26 职场文书
爱护环境卫生倡议书
2015/04/29 职场文书
2015年禁毒工作总结
2015/04/30 职场文书
Vue h函数的使用详解
2022/02/18 Vue.js