前端vue项目打包成桌面端exe应用

主要 使用 Electron将 vue项目打包为 exe

1.首先下载Electron

git clone https://github.com/electron/electron-quick-start 
cd electron-quick-start
npm install

安装完依赖之后

npm start

运行成功

npm start

注意:如果你的项目使用了VueRouter,那么切记:VueRouter一定不能是History模式

2.在electron-quick-start文件中安装打包需要的依赖。

npm install electron-packager --save-dev

3.在 electron-quick-start 项目中 找到 main.js 文件修改其配置根据

// Modules to control application life and create native browser window
const { app, BrowserWindow } = require('electron');
const path = require('node:path');function createWindow() {// Create the browser window.const mainWindow = new BrowserWindow({resizable: true, //是否支持调整窗口大小icon: './dist/favicon.ico', //	左上角图标width: 800,height: 600,webPreferences: {preload: path.join(__dirname, 'preload.js'),},});// mainWindow.setMenu(null); //	隐藏顶部菜单栏// and load the index.html of the app.mainWindow.loadFile('./dist/index.html');// Open the DevTools.mainWindow.webContents.openDevTools();// //	默认窗口最大化// mainWindow.maximize();// mainWindow.show();
}// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.whenReady().then(() => {createWindow();app.on('activate', function () {// On macOS it's common to re-create a window in the app when the// dock icon is clicked and there are no other windows open.if (BrowserWindow.getAllWindows().length === 0) createWindow();});
});// Quit when all windows are closed, except on macOS. There, it's common
// for applications and their menu bar to stay active until the user quits
// explicitly with Cmd + Q.
app.on('window-all-closed', function () {if (process.platform !== 'darwin') app.quit();
});// In this file you can include the rest of your app's specific main process
// code. You can also put them in separate files and require them here.

4.在 electron-quick-start 项目 package.json 配置文件中,scripts 下添加 packager 指令(icon图标,也可以不设置)

  "scripts": {"start": "electron .","packager": "electron-packager ./ HumeErp --platform=win32 --icon=./dist/favicon.ico --arch=x64 --overwrite"},

5.打包原 Vue 项目,将打包后生成的 dist 文件夹放在 electron-quick-start 项目中与node_modules 平级即可

在这里插入图片描述

6.输入打包命令 npm run packager 执行成功后,electron-quick-start 项目中会出现一个 App-win32-x64 的文件夹,该文件夹内 App.exe 即为项目的启动文件

在这里插入图片描述
在这里插入图片描述

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

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

相关文章

基于springcloud的“微服务架构的巡游出租管理平台”的设计与实现(源码+数据库+文档+PPT)

基于springcloud的“微服务架构的巡游出租管理平台”的设计与实现(源码数据库文档PPT) 开发语言:Java 数据库:MySQL 技术:springcloud 工具:IDEA/Ecilpse、Navicat、Maven 系统展示 系统总体结构图 E-R实体关系图…

新一代达梦官方管理工具SQLark:可视化建表操作指南

在数据库管理工作中,新建表是一项基础且频繁的操作。SQLark 的可视化建表功能为我们提供了一种高效、便捷且丝滑流畅的建表新体验。一起来了解下吧。 SQLark 官方下载链接:www.sqlark.com 新建表作为常见的功能,相比其他管理工具,…

Scala相关知识学习总结6

1、集合计算高级函数说明 - 过滤:遍历集合,提取满足特定条件的元素组成新集合。 - 转化/映射(map):将集合里的每个元素应用到指定函数进行转换。 - 扁平化:文档未详细阐述其具体含义和操作。 - 扁平化映射&…

pandas.DataFrame.dtypes--查看和验证 DataFrame 列的数据类型!

查看每列的数据类型,方便分析是否需要数据类型转换 property DataFrame.dtypes[source] Return the dtypes in the DataFrame. This returns a Series with the data type of each column. The result’s index is the original DataFrame’s columns. Columns with…

计算机中的单位

在计算机科学中,单位用于衡量数据存储、内存、数据传输速率等。以下是一些常见的计算机单位及其含义: ### **1. 数据存储单位** 数据存储单位用于衡量计算机存储设备(如硬盘、内存、闪存等)的容量。 | 单位 | 符号 | 含义…

Spring Boot 自定义配置类(包含字符串、数字、布尔、小数、集合、映射、嵌套对象)实现步骤及示例

Spring Boot 自定义配置类实现步骤及示例 步骤说明 创建配置类:定义一个 POJO 类,使用 ConfigurationProperties 注解指定配置前缀。启用配置绑定:在启动类或配置类上添加 EnableConfigurationProperties 注解。配置文件写法:在 …

Linux: 线程控制

目录 一 前言 二 线程控制 1. POSIX线程库(原生线程库) 2. 创建线程 2.1 pthread_create 2.2pthread_self()获取线程id 3.线程终止 3.1.return 方式 3.2 pthread_exit 4 线程等待 三 理解线程tid 一 前言 在上一篇文章中我们已经学习了线程的概念,线程的创…

避开养生误区,拥抱健康生活

在追求健康的道路上,我们常常会陷入一些养生误区,不仅无法达到预期效果,还可能损害身体健康。只有拨云见日,认清这些误区,采取正确的养生方式,才能真正拥抱健康生活。​ 很多人认为,保健品吃得…

<数据集>苹果识别数据集<目标检测>

数据集下载链接https://download.csdn.net/download/qq_53332949/90585216数据集格式:VOCYOLO格式 图片数量:535张 标注数量(xml文件个数):535 标注数量(txt文件个数):535 标注类别数:2 标注类别名称:…

【补题】P10424 [蓝桥杯 2024 省 B] 好数(数位dp)

题意: 一个整数如果按从低位到高位的顺序,奇数位(个位、百位、万位……)上的数字是奇数,偶数位(十位、千位、十万位……)上的数字是偶数,我们就称之为“好数”。 给定一个正整数 N…

分布式存储怎样提高服务器数据的安全性?

分布式存储是一种计算机数据存储架构,主要是将数据信息分布存储在多台计算机或者是服务器上,以此来实现高可靠性、可扩展性和高性能,让每个计算机或服务器可以通过网络连接相互通信和协作。 分布式存储系统会定期对重要的数据信息进行完整性检…

数字IC后端培训教程系列之PR Innovus工具写出Calibre LVS用的Netlist详细步骤

在数字IC后端设计实现chipfinish阶段需要写出很多数据,比如netlist,def,gds,lib和lef等文件。 今天给大家分享PR工具Innovus写出Calibre物理验证LVS要用的netlist的详细步骤。 手把手教你debug解决物理验证Calibre LVS错误 1&a…

TrueNAS scale(23.10) Restful API接口调用

背景 本文主要讲解开源的NAS系统--TrueNAS的二次开发。 TrueNAS scale安装 网上能找到很多类似的文章,本文就不介绍了,这里给一个视频博主的传送门: 司波图 TrueNAS scale Resful API 接口 官网的 Resful API地址:TrueNAS REST…

卡尔曼滤波器浅聊

0 前言: 卡尔曼滤波属于算法领域的,所以一些基本的数学概念是必须了解的 涉及到的数学基本概念 概念数学符号含义数学期望(Expected Value)E描述随机变量平均取值的最核心概念概率(Probability)P(X= x i x_i xi​)随机变量 X 取特定值 x i x_i xi​的概率方差(Varian…

1ll C++

在C++中,1ll 表示 long long 类型的整数常量1。这里的 ll 是 long long 的缩写。这种写法主要用于以下几个方面: 1. 为什么需要 1ll? 在您的代码中,1ll 主要用于 防止整数溢出 和 确保正确的类型转换: cpp 复制 p = 1ll * p * i % MOD; f[i + 1] = 1ll * i * (i + 1) …

oracle 12c密码长度,复杂度查看与设置

一 密码长度和复杂度 Oracle 数据库通过 PASSWORD_VERIFY_FUNCTION 来控制密码复杂度。 1.1 查看当前的密码复杂度设置 SELECT * FROM dba_profiles WHERE resource_name PASSWORD_VERIFY_FUNCTION; LIMIT表示分配给该 PROFILE 的密码验证函数名称。如果为 NULL,…

指定运行级别

linux系统下有7种运行级别,我们需要来了解一下常用的运行级别,方便我们熟悉以后的部署环境,话不多说,来看. 开机流程: 指定数级别 基本介绍 运行级别说明: 0:关机 相当于shutdown -h now ⭐️默认参数不能设置为0,否则系统无法正常启动 1:单用户(用于找回丢…

Appium工作原理及环境的搭建(1)

1、Appium的介绍: 一、什么是Appium Desktop? Appium Desktop是Appium项目的桌面版GUI工具,提供了一个友好的界面,用于启动Appium服务器、查看设备日志、与设备交互、调试自动化脚本等。相比于命令行工具,Appium Des…

esp32cam远程图传:AI Thinker ESP32-CAM -》 服务器公网 | 服务器 -》 电脑显示

用AI Thinker ESP32-CAM板子访问公网ip的5112端口并上传你的摄像头拍摄的图像视频数据,并写一段python程序打开弹窗接受图像实现超远程图像传输教程免费 1. 首先你要有一个公网ip也就是去买一台拥有公网的服务器电脑,我买的是腾讯云1年38元的服务器还可…

【Pandas】pandas DataFrame copy

Pandas2.2 DataFrame Conversion 方法描述DataFrame.astype(dtype[, copy, errors])用于将 DataFrame 中的数据转换为指定的数据类型DataFrame.convert_dtypes([infer_objects, …])用于将 DataFrame 中的数据类型转换为更合适的类型DataFrame.infer_objects([copy])用于尝试…