Vue3.2 项目打包成 Electron 桌面应用
本文将详细介绍如何将基于 Vue3.2 的项目打包成 Electron 桌面应用。通过结合 Electron 和 Vue CLI 工具链,可以轻松实现跨平台桌面应用的开发与发布。
1. 项目结构说明
项目主要分为以下几个部分:
- electron/main.js:Electron 主进程文件。
- electron/preload.js:Electron 预加载脚本。
- package.json:项目配置文件,包含 Electron 相关依赖和脚本。
- .env 和 .env.electron:环境变量配置文件,分别用于普通模式和 Electron 模式。
- vue.config.js:Vue CLI 的配置文件,用于优化构建和资源路径。
- router.ts:Vue 路由配置文件,支持 hash 和 history 模式切换。
2. 代码详解
npm install electron electron-builder cross-env --save-dev
2.1 electron/main.js
主进程文件负责创建窗口并加载 Vue 应用:
const { app, BrowserWindow, globalShortcut, Menu } = require("electron");
const path = require("path");let mainWindow;// 捕获未处理的异常
process.on("uncaughtException", (error) => {console.error("Uncaught Exception:", error);
});process.on("unhandledRejection", (reason, promise) => {console.error("Unhandled Rejection at:", promise, "reason:", reason);
});function createWindow() {mainWindow = new BrowserWindow({width: 800,height: 600,icon: path.join(__dirname, "src", "assets", "logo_32.ico"), // 设置窗口图标 尺寸:32*32images: true, // 启用图像支持show: false, // 初始时不显示窗口,避免闪烁// frame: false, // 隐藏默认的窗口边框和标题栏// fullscreen: true, // 启动时全屏webPreferences: {preload: path.join(__dirname, "preload.js"), // 预加载脚本(可选)nodeIntegration: true, // 启用 Node.js 集成(根据需要开启)// 添加以下配置解决媒体自动播放问题webSecurity: false, // 禁用同源策略(开发时可关闭,生产环境慎用)autoplayPolicy: "no-user-gesture-required", // 允许自动播放contextIsolation: false, // 必须为false才能访问全局变量},});// 加载 Vue 项目的生产构建文件if (process.env.NODE_ENV === "development") {mainWindow.loadURL("http://localhost:3000"); // 开发环境(Vue 开发服务器)} else {mainWindow.loadFile(path.join(__dirname, "../dist/index.html")); // 生产环境}// 窗口最大化mainWindow.maximize();// 显示窗口(在最大化后显示)mainWindow.show();// 隐藏菜单栏Menu.setApplicationMenu(null);// 打开开发者工具(开发时可以打开)// mainWindow.webContents.openDevTools();// 打开调试工具globalShortcut.register("CommandOrControl+Shift+I", () => {mainWindow.webContents.openDevTools();});// 切换全屏globalShortcut.register("CommandOrControl+Alt+Q", () => {if (mainWindow) {const isFullScreen = mainWindow.isFullScreen();mainWindow.setFullScreen(!isFullScreen);}});// 返回上一页globalShortcut.register("CommandOrControl+Left", () => {if (mainWindow) {const history = mainWindow.webContents.navigationHistory;if (history.canGoBack()) {history.goBack();}}});// 刷新页面globalShortcut.register("CommandOrControl+R", () => {if (mainWindow) {mainWindow.webContents.reload();}});mainWindow.on("closed", () => {mainWindow = null;});
}app.whenReady().then(() => {createWindow();// 创建自定义菜单// const menuTemplate = [// {// label: "操作",// submenu: [// { type: "separator" },// { label: "切换全屏", role: "togglefullscreen" },// { type: "separator" },// {// label: "返回上一页",// accelerator: "CmdOrCtrl+Left",// click: () => {// if (mainWindow && mainWindow.webContents.canGoBack()) {// mainWindow.webContents.goBack();// }// },// },// ],// },// ];// // 根据模板创建菜单// const menu = Menu.buildFromTemplate(menuTemplate);// // 设置应用菜单// Menu.setApplicationMenu(menu);app.on("activate", () => {if (BrowserWindow.getAllWindows().length === 0) {createWindow();}});
});app.on("window-all-closed", () => {if (process.platform !== "darwin") {app.quit();}
});// 退出时注销快捷键
app.on("will-quit", () => {globalShortcut.unregisterAll();
});
2.2 electron/preload.js
const { contextBridge, ipcRenderer } = require('electron');contextBridge.exposeInMainWorld('electronAPI', {send: (channel, data) => ipcRenderer.send(channel, data),receive: (channel, func) => ipcRenderer.on(channel, (event, ...args) => func(...args)),
});
2.3 package.json
配置了 Electron 相关的脚本和依赖:
{"name": "saas_system","version": "0.1.35","private": true,"main": "electron/main.js","scripts": {"serve": "vue-cli-service serve","build": "vue-cli-service build","test:unit": "vue-cli-service test:unit","lint": "vue-cli-service lint","start": "electron .","build:electron": "vue-cli-service build --mode electron","electron:serve": "vue-cli-service serve --mode development && electron .","electron:build": "vue-cli-service build --mode electron && electron-builder"},"dependencies": {"electron": "^35.1.3","electron-builder": "^26.0.12"},"build": {"appId": "com.example.myapp","productName": "myapp","files": ["dist/**/*","electron/main.js","src/assets/logo.ico" // 尺寸:256*256],"win": {"target": "nsis","icon": "src/assets/logo.ico" // 尺寸:256*256},"mac": {"target": "dmg"},"linux": {"target": "AppImage"}}
}
2.4 .env 和 .env.electron
分别定义了普通模式和 Electron 模式的环境变量:
.env 文件
VUE_APP_ROUTER_MODE=history
VUE_APP_PUBLIC_PATH=/
.env.electron 文件
VUE_APP_ROUTER_MODE=hash
VUE_APP_PUBLIC_PATH=./
2.5 vue.config.js
动态生成资源路径前缀:
const productionGzipExtensions = ["js", "css"];module.exports = {publicPath: process.env.VUE_APP_PUBLIC_PATH || "/",configureWebpack: {devtool: "source-map",output: {filename: `${getAssetsPath()}js/[name].${Timestamp}.js`,chunkFilename: `${getAssetsPath()}js/[name].${Timestamp}.js`,},},css: {extract: {filename: `${getAssetsPath()}css/[name].${Timestamp}.css`,chunkFilename: `${getAssetsPath()}css/[name].${Timestamp}.css`,},},
};
2.6 router.ts
路由配置支持 hash 和 history 模式切换:
import { createRouter, createWebHashHistory, createWebHistory } from "vue-router";const router = createRouter({history: process.env.VUE_APP_ROUTER_MODE === 'hash'? createWebHashHistory(process.env.BASE_URL): createWebHistory(process.env.BASE_URL),routes,
});router.beforeResolve((to, from, next) => {const isFileProtocol = window.location.protocol === "file:";let token = localStorage.getItem("token");if (!token) {if (isFileProtocol) {next("./official_website?redirect=" + encodeURIComponent(to.path));} else {next("/official_website?redirect=" + encodeURIComponent(to.path));}} else {next();}
});
3. 打包流程
安装依赖:
npm install
启动开发模式:
npm run electron:serve
打包 Electron 应用:
npm run electron:build
生成的安装包会存放在 release 文件夹中。
4. 总结
通过上述步骤,您可以成功将 Vue3.2 项目打包为 Electron 桌面应用。Electron 提供了强大的跨平台能力,而 Vue 则让前端开发更加高效。希望本文对您有所帮助!
相关文章:
Vue3.2 项目打包成 Electron 桌面应用
本文将详细介绍如何将基于 Vue3.2 的项目打包成 Electron 桌面应用。通过结合 Electron 和 Vue CLI 工具链,可以轻松实现跨平台桌面应用的开发与发布。 1. 项目结构说明 项目主要分为以下几个部分: electron/main.js:Electron 主进程文件。…...
第16届蓝桥杯单片机模拟试题Ⅰ
试题 代码 sys.h #ifndef __SYS_H__ #define __SYS_H__#include <STC15F2K60S2.H> //onewire.c float getT(); //sys.c extern unsigned char UI; extern bit touch_mode; extern float jiaozhun; extern float canshu; extern float temper; void init74hc138(unsigned…...
ES:geoip_databases
如何查看 .geoip_databases 的内容 在Elasticsearch中,.geoip_databases 是一个特殊的索引,用于存储GeoIP数据库文件。这些文件通常用于地理信息的丰富(GeoIP enrichment)。以下是如何查看和管理这些数据库文件的方法:…...
企业级开发SpringBoost玩转Elasticsearch
案例 Spring Boot 提供了 spring-data-elasticsearch 模块,可以方便地集成 Elasticsearch。 下面我们将详细讲解如何在 Spring Boot 中使用 Elasticsearch 8,并提供示例代码。 1. 添加依赖: 首先,需要在 pom.xml 文件中添加 spring-data-e…...
边缘计算网关作用
一、数据采集与预处理 边缘计算网关作为物联网系统的“数据入口”,能够连接各种传感器和设备,实时采集数据。在数据传输到云端之前,它会对数据进行清洗、过滤和聚合,剔除重复、无效或冗余的信息,只将有价值的数据上传…...
利用本地 Express Web 服务解决复杂的 Electron 通信链路的问题
背景 Web 服务对前端同学来说并不陌生,你们开发其他前端界面请求的后端接口就是 Web 服务,你们 npm run dev启动的也是一个本地的 Web 服务,前端的 js,html,css 都有从这个服务上拉取到的资源。 我们在开发 Electron…...
《自然-计算科学》诚邀您投稿计算社会科学研究(computational social science)
李升伟 编译 近年来,运用计算方法和工具来深化对社会科学长期议题理解的"计算社会科学"发展迅猛。这一增长主要得益于社交媒体数据、移动通信数据、数字化图书与历史档案、医疗记录等海量数据的涌现,这些资源不仅为验证现有社会科学理论提供了…...
【SPSS/EXCEl】主成分分析构建__综合评价指数
学习过程中实验操作的记录 1.数据准备和标准化: (1)区分正负相关性:判断每个因子是正向指标还是负向指标,计算每个的最大值和最小值 (2) 标准化: Min-Max标准化 Min-Max标准化(最大最小值法): 将数据映射到指定的区间ÿ…...
#node.js后端项目的部署相关了解
熟悉 Spring Boot 的 java -jar 启动方式,那咱们就用类比 实战方式,来彻底搞懂: 🚀 Node.js 后端项目的 部署 & 启动方式 ✅ 和 Spring Boot 的 java -jar xxx.jar 一样,Node.js 也可以一句命令启动,而…...
程序化广告行业(69/89):DMP与PCP系统核心功能剖析
程序化广告行业(69/89):DMP与PCP系统核心功能剖析 在数字化营销浪潮中,程序化广告已成为企业精准触达目标受众的关键手段。作为行业探索者,我深知其中知识的繁杂与重要性。一直以来,都希望能和大家一同学习…...
基于Python的二手房数据挖掘与可视化深度分析
一、技术框架与数据概况 1.1 技术栈构成 import pandas as pd # 数据操作(v1.3.5) import numpy as np # 数值计算(v1.21.6) from pyecharts.charts import * # 交互式可视化(v1.9.1) from sklearn.preprocessing import StandardScaler # 数据标准化(可选扩展) …...
linux第三次作业
1、将你的虚拟机的网卡模式设置为nat模式,给虚拟机网卡配置三个主机位分别为100、200、168的ip地址 2、测试你的虚拟机是否能够ping通网关和dns,如果不能请修改网关和dns的地址 3、将如下内容写入/etc/hosts文件中(如果有多个ip地址则写多行&…...
C#编写HttpClient爬虫程序示例
要写一个使用C#和HttpClient的爬虫程序。首先,我需要了解HttpClient的基本用法。HttpClient是用来发送HTTP请求和接收响应的类,对吧?我记得在C#中使用它的时候需要注意一些事情,比如最好使用单例实例,而不是频繁创建和…...
关于Spring MVC在无注解情况下通过参数名匹配获取请求参数的详细说明,包含代码示例和总结表格
以下是关于Spring MVC在无注解情况下通过参数名匹配获取请求参数的详细说明,包含代码示例和总结表格: 1. 核心机制 Spring MVC通过参数名匹配实现无注解参数绑定: 条件:方法参数名需与请求参数(查询参数、表单参数&a…...
数智读书笔记系列027:《医疗健康大数据治理》构建智慧医疗的核心基石
一、图书介绍: 1.1 书籍基本信息 在当今数字化技术飞速发展的背景下,医疗行业正经历着前所未有的变革。信息化、智能化、数据驱动的趋势正在深入到医疗服务的各个环节,推动着医疗健康大数据成为医疗行业发展的核心资产。在这样的时代背景下,《医疗健康大数据治理》这本书应…...
Wayland介绍
Wayland 是一种现代化的显示服务器协议,旨在替代传统的 X Window System(X11),为 Linux 和类 Unix 系统提供更高效、安全的图形显示管理。以下是其核心要点: 1. 基本概念 显示服务器协议:Wayland 定义了客户…...
dockerTeskTop安装dify及使用deepseek
配置 在这之前,要把模型运行一起,我这里是 PS C:\Users\Administrator> ollama run deepseek-r1:8b 模型名称一定要写对 如果添加失败,参考 dify 1.0.1无法在ollama下新增LLM模型 - 何辉煌 - 博客园...
解释 Git 的基本概念和使用方式
Git 是一个分布式版本控制系统,用于跟踪文件的变化并协作开发项目。下面是 Git 的一些基本概念和使用方式: 仓库(Repository):Git 仓库是用来存储项目文件的地方,可以在本地计算机上创建一个本地仓库&#…...
【区块链安全 | 第三十三篇】备忘单
文章目录 备忘单操作符优先级备忘单ABI 编码和解码函数bytes 和 string 的成员Address 的成员区块与交易属性校验和断言数学和加密函数合约相关类型信息函数可见性说明符修饰符备忘单 操作符优先级备忘单 以下是操作符的优先级顺序,按评估顺序列出: 优先级描述操作符1后缀递…...
MyBatis的缓存、逆向工程、使用PageHelper、使用PageHelper
一、MyBatis的缓存 缓存:cache 缓存的作用:通过减少IO的方式,来提高程序的执行效率。 mybatis的缓存:将select语句的查询结果放到缓存(内存)当中,下一次还是这条select语句的话,直…...
GS+:地统计分析与空间插值工具
大家好,今天为大家介绍的软件是GS:一款用于地统计分析与空间数据处理的软件。与ArcGIS相比的话,它更适合专注于地质统计学分析的用户,尤其是需要对半方差函数进行深入分析和调整的场景下面。我们将从软件的主要功能、支持的系统、…...
C++类型转换详解
目录 一、内置 转 内置 二、内置 转 自定义 三、自定义 转 内置 四、自定义 转 自定义 五、类型转换规范化 1.static_case 2.reinterpret_cast 3.const_cast 4.dynamic_cast 六、RTTI 一、内置 转 内置 C兼容C语言,在内置类型之间转换规则和C语言一样的&am…...
scala-集合2
可变数组 定义变长数组 val arr01 ArrayBuffer[Any](3, 2, 5) (1)[Any]存放任意数据类型 (2)(3, 2, 5)初始化好的三个元素 (3)ArrayBuffer 需要引入 scala.collection.mutable.ArrayBuffer 案例实操 Arra…...
Clang编译器优化选项
Clang 作为 C/C 编译器,提供了丰富的优化选项,以下是主要的优化相关选项分类和说明: 1. 优化级别(通用选项) 选项说明-O0默认级别,禁用所有优化,用于调试。-O1基础优化(代码大小和执…...
Java文件流操作 - 【Guava】IO工具
引言 Guava 使用术语 流来表示可关闭的,并且在底层资源中有位置状态的 I/O 数据流。字节流对应的工具类为 ByteSterams,字符流对应的工具类为 CharStreams。 Guava 中为了避免和流直接打交道,抽象出可读的 源 source 和可写的 汇 sink 两个概…...
C语言中单链表操作:查找节点与删除节点
一. 简介 前面学习了C语言中创建链表节点,向链表中插入节点等操作,文章如下: C语言中单向链表:创建节点与插入新节点-CSDN博客 本文继续学习c语言中对链表的其他操作,例如在链表中查找某个节点,删除链表…...
mapbox基础,加载栅格图片到地图
👨⚕️ 主页: gis分享者 👨⚕️ 感谢各位大佬 点赞👍 收藏⭐ 留言📝 加关注✅! 👨⚕️ 收录于专栏:mapbox 从入门到精通 文章目录 一、🍀前言1.1 ☘️mapboxgl.Map 地图对象1.2 ☘️mapboxgl.Map style属性1.3 ☘️raster 栅格图层 api二、🍀使用本地载…...
Linux红帽:RHCSA认证知识讲解(十 二)调试 SELinux,如何管理 SELinux 的运行模式、安全策略、端口和上下文策略
Linux红帽:RHCSA认证知识讲解(十 二)调试 SELinux,如何管理 SELinux 的运行模式、安全策略、端口和上下文策略 前言一、SELinux 简介二、SELinux 的运行模式2.1 查看和切换 SELinux 模式 三、SELinux 预设安全策略的开关控制四、管…...
模糊斜率熵Fuzzy Slope entropy+状态分类识别!2024年11月新作登上IEEE Trans顶刊
引言 2024年11月,研究者在测量领域国际顶级期刊《IEEE Transactions on Instrumentation and Measurement》(IF 5.6,JCR 1区,中科院二区)上发表科学研究成果,以“Optimized Fuzzy Slope Entropy: A Comple…...
【MATLAB】将数据保存在mat文件中 save/load/matfile
MAT文件为MATLAB格式的二进制文件 save()函数 save - 将工作区变量保存到文件中 save(filename) 将当前工作区中的所有变量保存在 MATLAB 格式的二进制文件(MAT 文件)filename 中。如果 filename 已存在,save 会覆盖该文件。 save(filena…...
009_抽象类和接口
抽象类和接口 final关键字常量 单例模式(设计模式)枚举类抽象类抽象类的注意事项、特点使用抽象类的好处模版方法设计模式 接口接口的好处接口的注意事项 final关键字 final关键字是最终的意思,可以修饰类、方法、变量。 修饰类:…...
【数据结构】排序算法(下篇·开端)·深剖数据难点
前引:前面我们通过层层学习,也就了解了Hoare大佬的排序思想,今天我们学习的东西可能稍微有点难度,因此我们必须学会思想,我很受感慨,因此借此分享一下:【用1520分钟去调试】,如果我们…...
Elixir语言的计算机视觉
Elixir语言在计算机视觉中的应用 引言 计算机视觉作为一门交叉学科,近年来随着深度学习技术的发展而蓬勃发展。传统上,计算机视觉应用通常采用Python、C等语言进行开发,因为这些语言拥有强大的图像处理库和深度学习框架。然而,随…...
VTK知识学习(51)- 交互与Widget(二)
1、交互器样式 前面所讲的观察者/命令模式是 VTK实现交互的方式之一。在前面示例 所示的窗口中可以使用鼠标与柱体进行交互,比如用鼠标滚轮可以对柱体放大、缩小;按下鼠标左键不放,然后移动鼠标,可以转动柱体;按下鼠标左键,同时按…...
目标跟踪Deepsort算法学习2025.4.7
一.DeepSORT概述 1.1 算法定义 DeepSORT(Deep Learning and Sorting)是一种先进的多目标跟踪算法,它结合了深度学习和传统的目标跟踪技术,在复杂环境下实现了高精度和鲁棒性的目标跟踪。该算法的核心思想是通过融合目标的外观特征和运动特征,实现对多个目标的持续跟踪,…...
nacos集群启动问题
根据您的描述,Nacos集群只能启动两个节点,可能的原因和解决方法如下: 1. 集群配置问题 • 原因:cluster.conf文件中可能只配置了两个节点的地址,导致第三个节点无法加入集群。 • 解决方法: • 检查每个…...
八大排序——c++版
本次排序都是按照升序排的 冒泡排序 void bubbleSort(vector<int>& nums) {int nnums.size();for(int i0;i<n-1;i){bool swappedfalse;for(int j0;j<n-1-i;j){if(nums[j]>nums[j1]){swap(nums[j],nums[j1]);swappedtrue;}}if(!swapped)break;} } //算法原…...
关于Spring MVC中传递数组参数的详细说明,包括如何通过逗号分隔的字符串自动转换为数组,以及具体的代码示例和总结表格
以下是关于Spring MVC中传递数组参数的详细说明,包括如何通过逗号分隔的字符串自动转换为数组,以及具体的代码示例和总结表格: 1. 核心机制 Spring MVC支持直接通过逗号分隔的字符串将请求参数自动转换为数组(String[]、int[]等&…...
VBA之Word应用:利用Range方法进行字体及对齐方式设置
《VBA之Word应用》(版权10178982),是我推出第八套教程,教程是专门讲解VBA在Word中的应用,围绕“面向对象编程”讲解,首先让大家认识Word中VBA的对象,以及对象的属性、方法,然后通过实…...
区块链技术:重塑供应链管理的未来
在当今全球化的商业环境中,供应链管理的复杂性和重要性日益凸显。从原材料采购到产品交付,供应链的每一个环节都可能影响企业的运营效率和客户满意度。随着区块链技术的兴起,供应链管理迎来了新的变革机遇。本文将深入探讨区块链技术在供应链…...
请回答集成测试和系统测试的区别,以及它们的应用场景主要是什么?
导语: 深夜收到粉丝私信:"面了5家大厂,4家都问集成测试和系统测试的区别,求大佬支招!" 作为经历过200+项目实战的测试老司机,今天用4个真实项目案例+3张原理图,带你彻底吃透这两个核心测试阶段!(文末送测试用例模板) 一、灵魂三问:到底测什么? 1.1 集成…...
SVT-AV1学习-svt_aom_get_sg_filter_level,svt_av1_selfguided_restoration_c
SVT-AV1学习-svt_aom_get_sg_filter_level,svt_av1_selfguided_restoration_c 一 函数的作用 根据编码模式,输入分辨率和快速解码标志动态计算自引导恢复(Self Guide Restoration)过滤器的启动级别,以下是详细解析; 1 参数说明 EncMode enc_m…...
第七章总结:集合
一、集合简介 Scala集合分为三大类:序列(Seq)、集(Set)、映射(Map),所有集合都扩展自Iterable特质。集合分为可变集合和不可变集合: 不可变集合:scala.collec…...
玄机靶场:apache日志分析
什么是Apache日志 Apache日志是Apache Web服务器在处理HTTP请求时记录的所有事件的详细信息。Apache是全球最受欢迎的Web服务器软件之一,支持约30.2%的所有活跃网站。Apache通过记录每次请求的信息,包括时间、来源IP、请求的资源等,帮助分…...
Laravel 使用 事件和监听器实现 数据状态变更
首先知道事件是什么 1.事件的概念 事件(Event)是 Laravel 中实现观察者模式的一种机制,它允许应用程序中的不同部分进行松耦合的通信。 通俗一点就是,发生在应用程序中的动作或者事情。例如: 用户注册成功后,需要发邮件&#…...
uniapp App页面通过 web-view 调用网页内方法
先是报这个错 A parser-blocking, cross site (i.e. different eTLD1) script, https://api.map.baidu.com/getscript?v3.0&akpgJsRF87Fjia&services&t20250225111334, is invoked via document.write. The network request for this script MAY be blocked by t…...
Daz3D角色UE5材质优化
解决Daz3D人物角色导入UE5后材质不真实的问题 1. 引言:跨平台3D资产传输中的材质保真度挑战 在当今的数字内容创作领域,对高质量3D人物角色的需求日益增长,广泛应用于游戏开发、电影制作、虚拟现实等多种应用场景。Daz3D因其丰富的人物模型…...
Android studio
问题:没有界面可以操作,页面没有hello wolrd 原因:gradle没同步完,依赖项没有下载完整,所以布局预览看不了...
Playwright快照测试:如何让UI回归测试变得轻松高效
引言 使用带有模拟数据的PlaywrightP快照可以显著提高UI回归测试的速度。它能够快速自动化检查三大主流浏览器(Chromium、Firefox、Webkit)中的 UI 元素。你可以将多个断言绑定到一个快照上,这极大地提高了 UI 测试的效率。在 GUI 应用快速扩…...
控制理论-传递函数
【硬核】终于有人把传递函数和卷积定理讲明白了!自动控制原理入门-传递函数 | 卷积定理 | 频率响应 | 喵星考拉...