使用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无法捕获滚动条上的mouse up事件的原因猜想
Mar 21 Javascript
javascript制作的网页侧边弹出框思路及实现代码
May 21 Javascript
js实现密码强度检测【附示例】
Mar 30 Javascript
seajs模块之间依赖的加载以及模块的执行
Oct 21 Javascript
微信小程序 支付简单实例及注意事项
Jan 06 Javascript
Popup弹出框添加数据实现方法
Oct 27 Javascript
详解Angular6.0使用路由步骤(共7步)
Jun 29 Javascript
JQuery Ajax动态加载Table数据的实例讲解
Aug 09 jQuery
浅谈ElementUI中switch回调函数change的参数问题
Aug 24 Javascript
微信小程序拍照和摄像功能实现方法示例
Feb 01 Javascript
小程序云开发之用户注册登录
May 18 Javascript
JavaScript实现打砖块游戏
Feb 25 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删除左端与右端空格的方法
2014/11/29 PHP
jquery实现弹出窗口效果的实例代码
2013/11/28 Javascript
jQuery中first()方法用法实例
2015/01/06 Javascript
Jquery异步提交表单代码分享
2015/03/26 Javascript
JavaScript包装对象使用详解
2015/07/09 Javascript
Vuejs 用$emit与$on来进行兄弟组件之间的数据传输通信
2017/02/23 Javascript
学习使用Bootstrap页面排版样式
2017/05/11 Javascript
js限制输入框只能输入数字(onkeyup触发)
2018/09/28 Javascript
vue 框架下自定义滚动条(easyscroll)实现方法
2019/08/29 Javascript
彻底搞懂并解决vue-cli4中图片显示的问题实现
2020/08/31 Javascript
[03:09]2014DOTA2国际邀请赛 Mushi前队友送上祝福
2014/07/12 DOTA
[00:23]魔方之谜解锁款式
2018/12/20 DOTA
centos系统升级python 2.7.3
2014/07/03 Python
浅析Python中MySQLdb的事务处理功能
2016/09/21 Python
Flask数据库迁移简单介绍
2017/10/24 Python
python版本的仿windows计划任务工具
2018/04/30 Python
对pandas中to_dict的用法详解
2018/06/05 Python
详解Django中间件执行顺序
2018/07/16 Python
在linux下实现 python 监控usb设备信号
2019/07/03 Python
Pycharm 文件更改目录后,执行路径未更新的解决方法
2019/07/19 Python
Pytorch转tflite方式
2020/05/25 Python
Django Path转换器自定义及正则代码实例
2020/05/29 Python
Python如何输出整数
2020/06/07 Python
Python3爬虫发送请求的知识点实例
2020/07/30 Python
Python 利用OpenCV给照片换底色的示例代码
2020/08/03 Python
基于第一个PhoneGap(cordova)的应用详解
2013/05/03 HTML / CSS
Sneaker Studio乌克兰:购买运动鞋
2018/03/26 全球购物
投标人廉洁自律承诺书
2014/05/26 职场文书
微信搭讪开场白
2015/05/28 职场文书
公司员工宿舍管理制度
2015/08/07 职场文书
农村房屋租赁合同(范本)
2019/07/23 职场文书
导游词之云南-元阳梯田
2019/10/08 职场文书
Nginx解决403 forbidden的完整步骤
2021/04/01 Servers
pytorch 带batch的tensor类型图像显示操作
2021/05/20 Python
Python中Selenium对Cookie的操作方法
2021/07/09 Python
SQL语句中EXISTS的详细用法大全
2022/06/25 MySQL