【Electron将HTML项目打包成桌面应用exe文件】

目标:前端将静态页面文件夹所有页面打包成一个exe文件(不包含其它文件)可运行。

步骤

1、初始化

npm init

此时项目多出一个package.json文件。

{"name": "my-electron-app","version": "1.0.0","description": "Hello World!","main": "main.js","scripts": {"start": "electron ."},"author": "Jane Doe","license": "MIT","devDependencies": {"electron": "^18.0.4"}
}

2、在根目录下新建main.js

const { app, BrowserWindow } = require('electron')function createWindow () {   
// 创建浏览器窗口
const win = new BrowserWindow({width: 800,height: 600,
resizable: false, //禁止改变主窗口尺寸
// frame:false, //去掉边框和工具栏  去掉之后就不能拖拽窗口,需要自己写
maximizable: false, //禁止最大化webPreferences: {nodeIntegration: true}
})
// 这里是配置的入口文件,如果需要改变入口文件改这里就可以 为相对路径
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()}})

3、安装electron

npm install electron-packager -g

4、配置package的js文件

"scripts": {"start": "electron .","package":"electron-packager . needle-server --platform=win32 --arch=x64 --out=./out --asar --app-version=1.0.0 --overwrite --ignore=node_modules"},

5、打包执行以下命令,此时会输出文件夹/out,找到exe文件就是打包程序的快捷方式,但是还没结束。我们只是通过electron-packager,将electron应用打包成可执行exe,我们还需要使用electron-winstaller将应用打包成exe安装程序;electron-squirrel-startup安装程序时生成快捷方式

npm run package

在这里插入图片描述

6、安装打包依赖包

npm install electron-packager --save-dev
npm install electron-squirrel-startup --save

7、新建build.js文件

var electronInstaller = require('electron-winstaller');
var path = require("path");resultPromise = electronInstaller.createWindowsInstaller({appDirectory: path.join('./out/needle-server-win32-x64'), //刚才生成打包文件的路径outputDirectory: path.join('./out/installer64'), //输出路径authors: 'Joy', // 作者名称exe: 'needle-server.exe', //在appDirectory寻找exe的名字noMsi: true, //不需要mis![这里写图片描述](https://img-blog.csdn.net/20180712225817503?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI2NjI2MTEz/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70)});resultPromise.then(() => console.log("It worked!"), (e) => console.log(`No dice: ${e.message}`));

7、执行后生成的文件在needle-server-win32-x64文件夹

npm run package

在这里插入图片描述
8、执行命令生成单个exe文件在installer64包下,双击直接可以打开。

node build.js

在这里插入图片描述

至此结束~

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

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

相关文章

动态规划:路径和子数组问题(C++)

动态规划:路径和子数组问题 路径问题1.不同路径(中等)2.不同路径II(中等)3.下降路径最⼩和(中等)4.地下城游戏(困难) 子数组问题1.最大子数组和(中等&#xf…

目标检测框架MMDetection训练自定义数据集实验记录

在上一篇博文中,博主完成了MMDetection框架的环境部署与推理过程,下面进行该框架的训练过程,训练的入口文件为tools/train.py,我们需要配置的内容如下: parser.add_argument(--config,default"/home/ubuntu/prog…

RuntimeError: ANTLR version mismatch

规则引擎源码: nemonik/Intellect: DSL and Rules Engine For Python (github.com) 运行程序 Example.py 时报错: RuntimeError: ANTLR version mismatch: The recognizer has been generated with API V0, but this runtime does not support this. …

vue+elementUI el-table实现单选

if (selection.length > 1) {this.$refs.table.clearSelection();this.$refs.table.toggleRowSelection(selection.pop());}

14.Redis 主从复制

Redis 主从复制 redis 主从复制配置 redis 主从复制启动 redis 主从复制断开 redis 主从复制主从复制构特点主从复制的拓扑结构一主一从⼀主多从树状主从 主从复制原理数据同步psync 运行流程全量复制流程部分复制流程实时复制 关于从节点何时晋升成主节点总结 redis 主从复制 …

动手学深度学习(四)多层感知机

目录 一、多层感知机的从零开始实现 1.1 初始化模型参数 1.2 实现Relu函数 1.3 实现模型 1.4 训练 二、多层感知机的简洁实现 2.1 实现模型 2.2 训练 三、模型选择 3.1 训练误差和泛化误差 3.2 验证数据集和测试数据集 3.3 过拟合和欠拟合 3.4 代码实现 3.4.1 生…

1801. 积压订单中的订单总数;1567. 乘积为正数的最长子数组长度;923. 三数之和的多种可能

1801. 积压订单中的订单总数 核心思想:维护一个最小堆sell和一个最大堆buy,然后模拟即可。 1567. 乘积为正数的最长子数组长度 核心思想:动态规划,z表示以当前数字num结尾的乘积为正的最长子数组长度,f表示以当前数字num结尾的乘…

汽车电子系统网络安全解决方案

声明 本文是学习GB-T 38628-2020 信息安全技术 汽车电子系统网络安全指南. 而整理的学习笔记,分享出来希望更多人受益,如果存在侵权请及时联系我们 汽车电子系统网络安全范围 本标准给出了汽车电子系统网络安全活动框架,以及在此框架下的汽车电子系统网络安全活动…

如何根据需求正确选择适合企业的CRM销售管理系统

现代企业的销售工作离不开使用各种各样的销售管理系统,随着互联网的发展,市面上出现了许多销售管理系统,那么销售管理系统哪种好呢?如何选择一款适合自己企业的CRM销售管理系呢?本文将从多个角度进行分析和比较为大家提…

使用Jekyll + GitHub Pages搭建个人博客

本文将介绍如何使用Jekyll搭建个人博客,并部署在GitHub Pages上。 1.简介 Jekyll是一个强大的静态网站生成器,可以将Markdown、HTML、Liquid模板等文件转换为静态网站。Jekyll支持模板引擎、主题、插件、集成GitHub Pages等特性,可以帮助用…

关于el-input和el-select宽度不一致问题解决

1. 情景一 单列布局 对于上图这种情况&#xff0c;只需要给el-select加上style"width: 100%"即可&#xff0c;如下&#xff1a; <el-select v-model"fjForm.region" placeholder"请选择阀门类型" style"width: 100%"><el-o…

OpenCV(十四):ROI区域截取

在OpenCV中&#xff0c;你可以使用Rect对象或cv::Range来截取图像的感兴趣区域&#xff08;Region of Interest&#xff0c;ROI&#xff09;。 方法一&#xff1a;使用Rect对象截取图像 Rect_(_Tp _x&#xff0c; _Tp _y&#xff0c; _Tp _width,_Tp _height) Tp:数据类型&…

LinkedList(3):并发异常

1 LinkedList并发异常 package com.example.demo;import java.util.Iterator; import java.util.LinkedList;public class TestLinkedList {public static void main(String[] args) {LinkedList linkedList new LinkedList(); //双向链表linkedList.add(11);linkedList.add(…

关于CICD流水线的前端项目运行错误,npm项目环境配置时出现报错:Not Found - GET https://registry.npm...

关于CICD流水线的前端项目运行错误&#xff0c;npm项目环境配置时出现报错&#xff1a;Not Found - GET https://registry.npm… 原因应该是某些jar包缓存中没有需要改变镜像将包拉下来 npm config set registry http://registry.npm.taobao.org npm install npm run build

IDEA中使用Git

参考文章 1. IDEA中配置Git 2 IDEA 中使用Git 2.1 拉取项目 选择File→New→Project from Version Control。 从码云&#xff0c;github中也都可以拉取&#xff0c;实际工作中可能存在于公司搭建的GitLab中。 复制此项目的git地址&#xff0c;填入URL&#xff0c;Director…

分布式事务学习笔记

MySQL事务 1、 MySQL事务隔离级别 读未提交 &#xff08;READ UNCOMMITTED&#xff09; &#xff08;存在脏读的问题&#xff09;读已提交&#xff08;READ COMMITTED&#xff09;可重复读&#xff08;REPEATABLE READ&#xff09;串行化&#xff08;SERIALIZABLE&#xff09;…

基于Matlab实现多个图像增强案例(附上源码+数据集)

图像增强是数字图像处理中的一个重要步骤&#xff0c;它通过一系列的算法和技术&#xff0c;使图像在视觉上更加清晰、明亮、对比度更强等&#xff0c;以便更好地满足人们的需求。在本文中&#xff0c;我们将介绍如何使用Matlab实现图像增强。 文章目录 部分源码源码数据集下载…

《多线程编程实战指南》总结

Java 并发和多线程编程推荐《Java 并发编程实战》和《多线程编程实战指南》&#xff0c;前者是外国非常受欢迎的书籍的翻译本&#xff0c;后者是国人写的书&#xff0c;符合国人的思维模式。 进程、线程与任务 在操作系统中会运行多个程序&#xff0c;一个运行中的程序就是一个…

计算机竞赛 基于深度学习的人脸识别系统

前言 &#x1f525; 优质竞赛项目系列&#xff0c;今天要分享的是 基于深度学习的人脸识别系统 该项目较为新颖&#xff0c;适合作为竞赛课题方向&#xff0c;学长非常推荐&#xff01; &#x1f9ff; 更多资料, 项目分享&#xff1a; https://gitee.com/dancheng-senior/…

CTFhub-SSRF-内网访问

CTFHub 环境实例 | 提示信息 http://challenge-8bf41c5c86a8c5f4.sandbox.ctfhub.com:10800/?url_ 根据提示&#xff0c;在url 后门添加 127.0.0.1/flag.php http://challenge-8bf41c5c86a8c5f4.sandbox.ctfhub.com:10800/?url127.0.0.1/flag.php ctfhub{a6bb51530c8f6be0…