将vue项目通过electron打包成windows可执行程序

将vue项目打包成windows可执行程序

1、准备好dist将整个项目打包

npm run build

2、安装electron依赖

npm install electron --save-dev
npm install electron-packager --save-dev
"electron": "^13.1.4",
"electron-packager": "^15.2.0"

在dist文件夹下面创建electron.js
electron.js内容如下:

const electron = require('electron')
const path = require('path')
const app = electron.app
const BrowserWindow = electron.BrowserWindow
const globalShortcut = electron.globalShortcut //快捷键let mainWindow
const Menu = electron.Menufunction createWindow () {Menu.setApplicationMenu(null)// Create the browser window.mainWindow = new BrowserWindow({width: 980,height: 640})// and load the index.html of the app.mainWindow.loadFile('index.html')// Open the DevTools.// mainWindow.webContents.openDevTools()// Emitted when the window is closed.mainWindow.on('closed', function () {mainWindow = null})// 通过快捷键就可以打开调试模式 ctrl + shift + lglobalShortcut.register('CommandOrControl+Shift+L', () => {let focusWin = BrowserWindow.getFocusedWindow()focusWin && focusWin.toggleDevTools()})
}app.on('ready', createWindow)// Quit when all windows are closed.
app.on('window-all-closed', function () {if (process.platform !== 'darwin') app.quit()
})app.on('activate', function () {if (mainWindow === null) createWindow()
})

在dist文件夹下面添加package.json文件内容如下:

{"name": "china_new1","version": "2.0.0","description": "A minimal Electron application","main": "electron.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": "^6.0.12"}}

整个文件夹格式如下:

在这里插入图片描述
在跟目录添加命令

"electron_build": "electron-packager ./dist --platform=win32 --arch=x64 --overwrite"

执行打包命令

cnpm run electron_build

等待打包结果,打包出来为一下截图即为打包成功,双击china_new1.exe运行项目。
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/43422.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

九耶丨阁瑞钛伦特-在项目中找到的经典BUG是什么?

在项目中找到的经典BUG有很多种,以下是其中一些常见的例子: 空指针异常(NullPointerException):当程序试图访问一个空对象或未初始化的变量时,会抛出空指针异常。这通常是由于缺少对变量的正确初始化或检查…

Neo4j之FOREACH基础

在 Neo4j 中,FOREACH 语句用于在查询中对一组元素执行某些操作,通常是在创建或更新节点关系时。它常常与 CREATE 或 SET 等操作结合使用。 创建多个关系: MATCH (p:Person), (m:Movie) WHERE p.name Alice AND m.title The Matrix FOREAC…

MySQL常用练手题目

数据库表名和字段设计 1.学生表 Student(s_id,s_name,s_birth,s_sex) 学生编号,学生姓名, 出生年月,学生性别 2.课程表 Course(c_id,c_name,t_id) 课程编号, 课程名称, 教师编号 3.教师表 Teacher(t_id,t_name) 教师编号,教师姓名 4.成绩表 Score (s_id,c_id,s_score) 学生编号…

C# window forms 进度条实现

在 C# Windows Forms 应用程序中,如果在后台执行长时间运行的任务,并希望同时更新进度条,可以使用多线程来实现。这将确保进度条的更新不会阻塞主线程,从而保持界面的响应性。以下是一个示例,演示了如何在后台执行任务…

【Datawhale 科大讯飞-基于论文摘要的文本分类与关键词抽取挑战赛】机器学习方法baseline

内容 科大讯飞AI开发者大赛NLP赛道题目: 基于论文摘要的文本分类与关键词抽取挑战赛 任务: 1.机器通过对论文摘要等信息的理解,判断该论文是否属于医学领域的文献。 2.提取出该论文关键词。 数据集的获取 训练集: 这里读取tit…

【基础】Android Handler

一、博客参考 Handler机制详解【重点】:https://www.jianshu.com/p/b4d745c7ff7a Handler Thread工作线程操作UI范例【重点】:https://www.cnblogs.com/net168/p/4075126.html 二、内存泄漏的解决:静态内部类弱引用 关于 Handler&#xf…

vue+flask基于知识图谱的抑郁症问答系统

vueflask基于知识图谱的抑郁症问答系统 抑郁症已经成为当今社会刻不容缓需要解决的问题,抑郁症的危害主要有以下几种:1.可导致病人情绪低落:抑郁症的病人长期处于悲观的状态中,感觉不到快乐,总是高兴不起来。2.可导致工…

智慧工地平台工地人员管理系统 可视化大数据智能云平台源码

智慧工地概述: 智慧工地管理平台是以物联网、移动互联网技术为基础,充分应用大数据、人工智能、移动通讯、云计算等信息技术,利用前端信息采通过人机交互、感知、决策、执行和反馈等,实现对工程项目內人员、车辆、安全、设备、材…

elaticsearch(3)

整合springboot 1.整合依赖 注意依赖版本和安装的版本一致 <properties> <java.version>1.8</java.version> <!-- 统一版本 --> <elasticsearch.version>7.6.1</elasticsearch.version> </properties> 导入elastics…

数据结构算法--1 顺序查找二分查找

顺序查找时间复杂度为O(n) 我们可以借助Python中的函数enumerate,通过enumerate遍历列表返回其索引和值 def linnear_search(li, val):for ind, v in enumerate(li):if v val:return indelse:return None 也可以通过列表长度依次遍历: def linear_search(li, val): # …

浏览器渲染原理 - 输入url 回车后发生了什么

目录 渲染时间点渲染流水线1&#xff0c;解析&#xff08;parse&#xff09;HTML1.1&#xff0c;DOM树1.2&#xff0c;CSSOM树1.3&#xff0c;解析时遇到 css 是怎么做的1.4&#xff0c;解析时遇到 js 是怎么做的 2&#xff0c;样式计算 Recalculate style3&#xff0c;布局 la…

创建react native项目的笔记

创建react native项目的笔记 重新下载 ruby安装 watchman安装 cocoapods安装 react native 项目创建好项目后安装 ios 依赖清除设备缓存安装 android 依赖链接 网易 mumu 模拟器安装路由 Navigation页面之间的跳转逻辑自定义头部样式判断不同设备平台代码示例安装 Axios安装本地…

java mysql druid mybatis-plus里使用多表删除出错的一种处理方式

今天在出来多表删除的时候在mapper.xml用了下面的多个delete语句 <?xml version"1.0" encoding"UTF-8"?> <!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd"…

Spring Cloud 系列之OpenFeign:(7)链路追踪zipkin

传送门 Spring Cloud Alibaba系列之nacos&#xff1a;(1)安装 Spring Cloud Alibaba系列之nacos&#xff1a;(2)单机模式支持mysql Spring Cloud Alibaba系列之nacos&#xff1a;(3)服务注册发现 Spring Cloud 系列之OpenFeign&#xff1a;(4)集成OpenFeign Spring Cloud …

PHP酒店点菜管理系统mysql数据库web结构apache计算机软件工程网页wamp

一、源码特点 PHP 酒店点菜管理系统是一套完善的web设计系统&#xff0c;对理解php编程开发语言有帮助&#xff0c;系统具有完整的源代码和数据库&#xff0c;系统主要采用B/S模式开发。 代码下载 https://download.csdn.net/download/qq_41221322/88232051 论文 https://…

前端技术Vue学习笔记--005

Vue学习笔记 一、非父子通信-event bus 事件总线 作用&#xff1a;非父子组件之间&#xff0c;进行简易消息传递。&#xff08;复杂场景用----Vuex&#xff09; 使用步骤&#xff1a; 创建一个都能访问的事件总线 &#xff08;空Vue实例&#xff09;-----utils/EventBus.js /…

两个数组的交集-C语言/Java

描述 给定两个数组 nums1 和 nums2 &#xff0c;返回 它们的交集 。输出结果中的每个元素一定是 唯一 的。我们可以 不考虑输出结果的顺序。&#xff08;1 < nums1.length, nums2.length < 1000&#xff0c;0 < nums1[i], nums2[i] < 1000&#xff09; 示例1 输入…

【golang】通道(channel)的基本原理(一)

通道类型的值本身就是并发安全的&#xff0c;这也是Go语言自带的、唯一一个可以满足并发安全性的类型。 声明一个通道类型变量的时候&#xff0c;我们首先要确定该通道类型的元素类型&#xff0c;决定了我们可以通过这个通道传递什么类型的数据。 在初始化通道的时候&#xf…

一键批量修改文件夹名称,中文瞬间变日语,轻松搞定重命名

大家好&#xff01;现在为了更好地适应全球化发展&#xff0c;许多人都有了海外交流、旅行、学习的需求。但是难免遇到一个问题&#xff1a;在电脑中的中文文件夹名称如何快速翻译成日语&#xff1f; 首先&#xff0c;第一步&#xff0c;我们需要打开文件批量改名&#xff0c;…

【Unity】编辑器下查找制定文件下的所有特定资源

需求上很简单&#xff0c;就是在编辑器下&#xff0c;找到某个制定文件下的所有特定资源&#xff08;UnityEngine.Object&#xff09;。Unity 没有提供专门的 API&#xff0c;我一开始想在网上搜索代码&#xff0c;发现没有现成可以直接用的。 功能实现本身并不复杂&#xff0c…