使用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 相关文章推荐
js 程序执行与顺序实现详解
May 13 Javascript
iframe里使用JavaScript控制主页转向的方法
Apr 03 Javascript
js实现的全国省市二级联动下拉选择菜单完整实例
Aug 17 Javascript
js实现iPhone界面风格的单选框和复选框按钮实例
Aug 18 Javascript
js+css3制作时钟特效
Oct 16 Javascript
详解如何较好的使用js
Dec 16 Javascript
js 转义字符及URI编码详解
Feb 28 Javascript
微信小程序异步API为Promise简化异步编程的操作方法
Aug 14 Javascript
详解angularjs4部署文件过大解决过程
Dec 05 Javascript
vue.js中ref及$refs的使用方法解析
Oct 08 Javascript
js 计算月/周的第一天和最后一天代码
Feb 01 Javascript
Vue项目中使用flow做类型检测的方法
Mar 18 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
一个域名查询的程序
2006/10/09 PHP
php 表单数据的获取代码
2009/03/10 PHP
php自动加载机制的深入分析
2013/06/08 PHP
PHP中的函数-- foreach()的用法详解
2013/06/24 PHP
PHP简单日历实现方法
2016/07/20 PHP
php中实现进程锁与多进程的方法
2016/09/18 PHP
JavaScript isPrototypeOf和hasOwnProperty使用区别
2010/03/04 Javascript
一些相见恨晚的 JavaScript 技巧
2010/04/25 Javascript
两种方法实现文本框输入内容提示消失
2013/03/17 Javascript
node.js下when.js 的异步编程实践
2014/12/03 Javascript
Bootstrap 组件之按钮(二)
2016/05/11 Javascript
jQuery插件实现文件上传功能(支持拖拽)
2020/08/27 Javascript
JS实现简单易用的手机端浮动窗口显示效果
2016/09/07 Javascript
bootstrap轮播图示例代码分享
2017/05/17 Javascript
js 索引下标之li集合绑定点击事件
2018/01/12 Javascript
Node.js API详解之 querystring用法实例分析
2020/04/29 Javascript
[02:55]DOTA2英雄基础教程 发条技师
2013/12/04 DOTA
在Docker上开始部署Python应用的教程
2015/04/17 Python
Python RuntimeError: thread.__init__() not called解决方法
2015/04/28 Python
Python语言描述最大连续子序列和
2017/12/05 Python
Python科学计算包numpy用法实例详解
2018/02/08 Python
通过Python 接口使用OpenCV的方法
2018/04/02 Python
Selenium元素的常用操作方法分析
2018/08/10 Python
解决pycharm运行程序出现卡住scanning files to index索引的问题
2019/06/27 Python
解决Pycharm的项目目录突然消失的问题
2020/01/20 Python
Python 2种方法求某个范围内的所有素数(质数)
2020/01/31 Python
Python GUI库PyQt5图形和特效样式QSS介绍
2020/02/25 Python
基于python 将列表作为参数传入函数时的测试与理解
2020/06/05 Python
英国床垫在线:Mattress Online
2016/12/07 全球购物
领先的荷兰线上超市:荷兰之家Holland at Home(支持中文)
2021/01/21 全球购物
System.Array.CopyTo()和System.Array.Clone()有什么区别
2016/06/20 面试题
Python里面如何实现tuple和list的转换
2012/06/13 面试题
党的群众路线教育实践活动动员会主持词
2014/03/20 职场文书
社会实践评语
2014/04/28 职场文书
社区灵活就业证明
2014/11/03 职场文书
Django+Nginx+uWSGI 定时任务的实现方法
2022/01/22 Python