使用electron将vue-cli3.x项目打包为桌面应用
时间:2022-07-26
本文章向大家介绍使用electron将vue-cli3.x项目打包为桌面应用,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
我有个模版项目是用vue-cli3.x开发的,测试部署已经没问题,突发奇想,能不能打包成exe文件,在桌面运行,开始鼓捣。
1.先将项目打包
yarn build
2.安装electron和electron-packager
yarn add electronyarn
add electron-packager
3.dist目录新建main.js文件,内容如下:
const { app, BrowserWindow, Menu} = require('electron')
function createWindow() { // 去掉菜单
Menu.setApplicationMenu(null)
// 创建浏览器窗口
const win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: { nodeIntegration: true
} }) // 并且为你的应用加载index.html
win.loadFile('index.html')
// 打开开发者工具
// win.webContents.openDevTools()
}// Electron会在初始化完成并且准备好创建浏览器窗口时调用这个方法
// 部分 API 在 ready 事件触发后才能使用。
app.whenReady().then(createWindow)
//当所有窗口都被关闭后退出
app.on('window-all-closed', () => {
// 在 macOS 上,除非用户用 Cmd + Q 确定地退出,
// 否则绝大部分应用及其菜单栏会保持激活。
if (process.platform !== 'darwin') {
app.quit() }})app.on('activate', () => {
// 在macOS上,当单击dock图标并且没有其他窗口打开时,
// 通常在应用程序中重新创建一个窗口。
if (BrowserWindow.getAllWindows().length === 0) {
createWindow() }})// 您可以把应用程序其他的流程写在在此文件中
// 代码 也可以拆分成几个文件,然后用 require 导入。
注:可以从electron官网clone例子,复制main.js
4.dist目录新建package.json文件,内容如下:
{
"name": "electron-quick-start",
"version": "1.0.0",
"description": "A minimal Electron application",
"main": "main.js",
"scripts": {
"start": "electron .",
"package": "electron-packager . HelloWorld --platform=win32 --arch=x64 --icon=computer.ico --out=./out --asar --app-version=0.0.1 --overwrite --ignore=node_modules"
}, "repository": "https://github.com/electron/electron-quick-start",
"keywords": [
"Electron",
"quick",
"start",
"tutorial",
"demo"
], "author": "GitHub",
"license": "CC0-1.0",
"devDependencies": {
"electron": "^9.0.0"
}, "dependencies": {
"electron-packager": "^14.2.1"
}}
注:可以从electron官网clone例子,复制package.json
5.在项目的根目录的package.json增加一条启动命令
"scripts": {
"serve": "vue-cli-service serve --copy",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint",
"electron_dev": "yarn build && electron main.js",
"electron_build": "electron-packager ./dist helloworld --platform=win32 --arch=x64 --overwrite"
},
注:
- sourcedir: 资源(dist/package.json)路径,在本例中既是./dist/
- appname:打包出的exe名称,这里取名为helloworld
- platform :平台名称(windows是win32)
- arch: 版本,本例为x64
6.生成exe
yarn electron_build
可以看到项目目录中多了一个helloworld-win32-x64文件,找到里面的helloworld.exe运行即可。
运行效果
获取更多优质内容,请关注【青年码农】
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 聊聊claudb的importRDB
- 【17期】什么情况用ArrayList or LinkedList呢?
- YOLO V3网络结构解析
- 文献笔记二十一:PhenoGram可视化染色体上的信息
- 【动手学深度学习笔记】之对模型参数的访问、初始化和共享
- 【动手学深度学习笔记】之构造MLP模型的几种方法
- 【动手学深度学习笔记】之通过丢弃法缓解过拟合问题
- 【动手学深度学习笔记】之通过权重衰减法解决过拟合问题
- 【动手学深度学习笔记】之多层感知机实现
- Linux程序员效率工具:比man更好用的命令提示工具
- 我对torch中的gather函数的一点理解
- 冒泡排序的实现思路和优化方案
- Java Map转对象
- 59.Vue 使用webpack构建vue项目
- Android初学设置文字跑马灯效果