当前位置: 首页 > news >正文

vue 项目集成 electron 和 electron 打包及环境配置

vue + electron 开发桌面端应用


安装 electron

npm i electron -D

记得加上-D,electron 需添加到devDependencies,如果添加到dependencies后面运行可能会报错

根目录创建electron文件夹,在electron文件夹创建main.js(或者background.js)

在文件中添加如下代码:

// 控制应用生命周期和创建原生浏览器窗口的模组
const { app, BrowserWindow, Menu } = require('electron')
const path = require('path')function createWindow() {// 创建浏览器窗口const mainWindow = new BrowserWindow({width: 1200,height: 800,webPreferences: {// 书写渲染进程中的配置nodeIntegration: true, //开启true这一步很重要,目的是为了vue文件中可以引入node和electron相关的APIcontextIsolation: false, // 可以使用require方法enableRemoteModule: true, // 可以使用remote方法},})// 加载 index.htmlmainWindow.loadFile(path.resolve(__dirname, '../dist/index.html')) // 新增
}
// 这段程序将会在 Electron 结束初始化
// 和创建浏览器窗口的时候调用
// 部分 API 在 ready 事件触发后才能使用。
app.whenReady().then(() => {createWindow()app.on('activate', function () {// 通常在 macOS 上,当点击 dock 中的应用程序图标时,如果没有其他// 打开的窗口,那么程序会重新创建一个窗口。if (BrowserWindow.getAllWindows().length === 0) createWindow()})
})// 除了 macOS 外,当所有窗口都被关闭的时候退出程序。 因此,通常对程序和它们在
// 任务栏上的图标来说,应当保持活跃状态,直到用户使用 Cmd + Q 退出。
app.on('window-all-closed', function () {if (process.platform !== 'darwin') app.quit()
})

修改package.json

1、在scripts同级下添加

"main": "electron/main.js",

根据实际的文件路径配置

2、查看是否存在"type": "module"配置
如果有,则删除"type"配置,因为main中用的不是es6的模块引入

3、"scripts"中添加"electron:dev": "electron .",用于启用electron


现在就可以通过npm run electron:dev运行electron了

因为上面main.css运行的是 dist文件夹 中的 index.html ,所以如果没有该文件的得先npm run build

多环境配置并在本地开发时使用热更新

安装 electron-reload

npm i electron-reload

修改”scripts“ 指令

"electron:dev": "set ELECTRON_ENV=development& electron .",

在本地运行时添加值为 ‘development’ 的 ELECTRON_ENV 环境变量

修改main.js内容

完整代码如下

// 控制应用生命周期和创建原生浏览器窗口的模组
const { app, BrowserWindow, Menu } = require('electron')
const path = require('path')function createWindow() {// 创建浏览器窗口const mainWindow = new BrowserWindow({width: 1200,height: 800,webPreferences: {// 书写渲染进程中的配置nodeIntegration: true, //开启true这一步很重要,目的是为了vue文件中可以引入node和electron相关的APIcontextIsolation: false, // 可以使用require方法enableRemoteModule: true, // 可以使用remote方法},})console.log("process.env.ELECTRON_ENV", process.env.ELECTRON_ENV)// let env = 'pro'let env = process.env.ELECTRON_ENV// 环境变量 ELECTRON_ENV 值为 development 则使用热更新// 配置热更新if (env == 'development') {const elePath = path.join(__dirname, '../node_modules/electron')require('electron-reload')('../', {electron: require(elePath),})// 热更新监听窗口mainWindow.loadURL('http://localhost:3100')// 打开开发工具mainWindow.webContents.openDevTools()} else {// 生产环境中要加载文件,打包的版本Menu.setApplicationMenu(null)// 加载 index.htmlmainWindow.loadFile(path.resolve(__dirname, '../dist/index.html')) // 新增}
}
// 这段程序将会在 Electron 结束初始化
// 和创建浏览器窗口的时候调用
// 部分 API 在 ready 事件触发后才能使用。
app.whenReady().then(() => {createWindow()app.on('activate', function () {// 通常在 macOS 上,当点击 dock 中的应用程序图标时,如果没有其他// 打开的窗口,那么程序会重新创建一个窗口。if (BrowserWindow.getAllWindows().length === 0) createWindow()})
})// 除了 macOS 外,当所有窗口都被关闭的时候退出程序。 因此,通常对程序和它们在
// 任务栏上的图标来说,应当保持活跃状态,直到用户使用 Cmd + Q 退出。
app.on('window-all-closed', function () {if (process.platform !== 'darwin') app.quit()
})

这里 http://localhost:3100 为我本地开发时项目运行的url

运行
本地启动web项目
一般是:npm run dev
然后再:npm run electron:dev启动electron。这样electron就可以实时监听窗口了。

打包应用

安装 electron-builder

npm i electron-builder -D

package.json中新增scripts

"electron:build": "vite build --mode application & electron-builder build --config electron-builder.json",

创建 electron-builder.json 进行打包配置

{"appId": "com.example.myapp","productName": "app名字","files": ["./electron/main.js", "./dist"],"extraFiles": ["./videos", "./cvideo"], "directories": {"output": "./buileder"},"nsis": {"oneClick": false,"perMachine": true,"allowToChangeInstallationDirectory": true},"win": {"icon": "public/icon.png","target": ["nsis", "zip"]},"mac": {"icon": "public/icon.png","target": "dmg"},"linux": {"icon": "public/icon.png","target": "AppImage"},"dmg": {"contents": [{"x": 110,"y": 150},{"x": 240,"y": 150,"type": "link","path": "/Applications"}]},"appx": {"publisher": "CN=app名字"}}

public/icon.png 为应用的icon图标,没有的话可以删除

运行打包命令

npm run electron:build 

打包成功后,在根目录会出现一个buileder文件夹,打包后的应用就在里面
在这里插入图片描述

打包过程中常见的一些坑

一、打包后没有报错,但打开后一片空白
打开调试工具发现文件引入失败,且引入路径也不对。这种一般是根路径配置问题
解决方法:
1、配置base,以vite为例
在vite.config.ts中添加base配置

export default defineConfig({base: './',
})

2、在 index.html 中查看head中是否有这段标签

<base href="/">

注意!注意!注意!(这个bug我之前找了好一会儿才发现)

有的话删除掉

二、如果报:Package "electron" is only allowed in "devDependencies". Please remove it from the "dependencies"

这个错误表示package.json文件中依赖electron应该在 devDependencies而不是dependencies中

解决方法:
将electron移到devDependencies,并重装依赖

三、如果报类似 http://github.com/xxxx/xxxx 的错误一般是网络问题

解决方法:
过一会儿再尝试,或者科学上网

四、如果报类似 zip: not a valid zip file github.com/develar/app-builder/pkg/archive/zipx.(*Extractor).extractAndWriteFile的错误

解决方法:
重装依赖

相关文章:

vue 项目集成 electron 和 electron 打包及环境配置

vue electron 开发桌面端应用 安装 electron npm i electron -D记得加上-D&#xff0c;electron 需添加到devDependencies&#xff0c;如果添加到dependencies后面运行可能会报错 根目录创建electron文件夹&#xff0c;在electron文件夹创建main.js&#xff08;或者backgrou…...

vscode如何离线安装插件

在没有网络的时候,如果要安装插件,就会麻烦一些,需要通过离线安装的方式进行。下面记录如何在vscode离线安装插件。 一、下载离线插件 在一台能联网的电脑中,下载好离线插件,拷贝到无法联网的电脑上。等待安装。 vscode插件商店地址:https://marketplace.visualstudio.co…...

计算机网络常见面试题及解答

以下是计算机网络中常见的面试题及解答&#xff0c;按主题分类&#xff1a; --- ## **一、基础概念** ### **1. OSI 七层模型和 TCP/IP 模型的区别是什么&#xff1f;** **答&#xff1a;** - **OSI 七层模型&#xff1a;** - 应用层、表示层、会话层、传输层、网络层、数…...

举例说明AI模型怎么聚类,最后神经网络怎么保存

举例说明怎么聚类,最后神经网络怎么保存 目录 举例说明怎么聚类,最后神经网络怎么保存K - Means聚类算法实现神经元特征聚类划分成不同专家的原理和过程 特征提取: 首先,需要从神经元中提取有代表性的特征。例如,对于一个多层感知机(MLP)中的神经元,其权重向量可以作为特…...

HarmonyOS NEXT应用开发实战(一):边学边玩,从零开发一款影视APP

引言 学习一项技能&#xff0c;最好也最快的办法就是动手实战。通过自己给自己找项目练习&#xff0c;不仅能够激发兴趣&#xff0c;还能从开发实战中不断总结经验。这种学习方法是最为高效的。今天&#xff0c;我们将通过开发一款名为“爱影家”的影视APP&#xff0c;来学习H…...

STM32G0B1 can Error_Handler 解决方法

问题现象 MCU上电&#xff0c;发送0x13帧数据固定进入 Error_Handler 硬件介绍 MCU :STM32G0B1 can:NSI1042 tx 接TX RX 接RX 折腾了一下午&#xff0c;无解&#xff0c;问题依旧&#xff1b; 对比测试 STM32G431 手头有块G431 官方评估版CAN 模块&#xff1b; 同样的…...

使用 `llama_index` 构建智能问答系统:多种文档切片方法的评估

使用 llama_index 构建智能问答系统&#xff1a;多种文档切片方法的评估 代码优化与解析1. **代码结构优化**2. **日志管理**3. **环境变量管理**4. **模型初始化**5. **提示模板更新**6. **问答函数优化**7. **索引构建与查询引擎**8. **节点解析器测试** 总结 在现代自然语言…...

【大模型】7 天 AI 大模型学习

7 天 AI 大模型学习 Day 2 今天是 7 天AI 大模型学习的第二天 &#x1f604;&#xff0c;今天我将会学习 Transformer 、Encoder-based and Decoder-Based LLMs 等 。如果有感兴趣的&#xff0c;就和我一起开始吧 &#xff5e; 课程链接 &#xff1a;2025年快速吃透AI大模型&am…...

软件工程大复习之(四)——面向对象与UML

4.1 面向对象概述 面向对象&#xff08;OO&#xff09;是一种编程范式&#xff0c;它将数据和处理数据的方法封装在对象中。面向对象的主要概念包括&#xff1a; 对象&#xff1a;实例化的数据和方法的集合。类&#xff1a;对象的蓝图或模板。封装&#xff1a;隐藏对象的内部…...

【Linux】shell命令

目录 shell的基本命令 shell - 贝壳 外在保护工具 用户、shell、内核、硬件之间的关系 解析器的分类&#xff1a; shell命令格式 history -历史记录查询 修改环境变量的值&#xff1a; shell中的特殊字符 通配符 管道 | 输入输出重定向 命令置换符 shell的基本命…...

ValuesRAG:以检索增强情境学习强化文化对齐

随着大型语言模型&#xff08;LLMs&#xff09;的迅猛发展&#xff0c;其在各个领域展现出强大的能力。然而&#xff0c;训练数据中西方中心主义的倾向&#xff0c;使得 LLMs 在文化价值观一致性方面面临严峻挑战&#xff0c;这一问题在跨文化场景中尤为突出&#xff0c;可能导…...

【机器学习篇】交通革命:机器学习如何引领未来的道路创新

嘿&#xff0c;你知道吗&#xff1f;机器学习正在交通领域掀起一场革命啦&#xff01;它将如何引领未来道路创新呢 本文有精彩的 C 代码演示、实用的图片解释&#xff0c;还有超多干货&#xff0c;保证让你大开眼界&#xff0c;点赞收藏关注&#xff0c; 开启一场奇妙的探索之…...

DeepSeek-V3 通俗详解:从诞生到优势,以及与 GPT-4o 的对比

1. DeepSeek 的前世今生 1.1 什么是 DeepSeek&#xff1f; DeepSeek 是一家专注于人工智能技术研发的公司&#xff0c;致力于打造高性能、低成本的 AI 模型。它的目标是让 AI 技术更加普惠&#xff0c;让更多人能够用上强大的 AI 工具。 1.2 DeepSeek-V3 的诞生 DeepSeek-V…...

把vue项目或者vue组件发布成npm包或者打包成lib库文件本地使用

将vue项目发布成npm库文件&#xff0c;第三方通过npm依赖安装使用&#xff1b;使用最近公司接了一个项目&#xff0c;这个项目需要集成到第三方页面&#xff0c;在第三方页面点击项目名称&#xff0c;页面变成我们的项目页面&#xff1b;要求以npm库文件提供给他们&#xff1b;…...

【STC库函数】Compare比较器的使用

如果我们需要比较两个点的电压&#xff0c;当A点高于B点的时候我们做一个操作&#xff0c;当B点高于A点的时候做另一个操作。 我们除了加一个运放或者比较器&#xff0c;还可以直接使用STC内部的一个比较器。 正极输入端可以是P37、P50、P51&#xff0c;或者从ADC的十六个通道…...

单片机-独立按键矩阵按键实验

1、按键介绍 按键管脚两端距离长的表示默认是导通状态&#xff0c;距离短的默认是断开状态&#xff0c; 如果按键按下&#xff0c;初始导通状态变为断开&#xff0c;初始断开状态变为导通 我们开发板是采用软件消抖&#xff0c;一般来说一个简单的按键消抖就是先读取按键的状…...

若要把普通表转成分区表,就需要先新建分区表,然后把普通表中的数据导入新建分区表。 具体怎么导入?

将普通表转换为分区表并导入数据是一个常见的数据库管理任务。以下是详细的步骤和示例&#xff0c;帮助你在 GaussDB 中完成这一过程&#xff1a; 1. 创建分区表 首先&#xff0c;你需要创建一个新的分区表&#xff0c;定义好分区键和分区策略。假设你有一个普通表 orders&am…...

XXX公司面试真题

一、一面问题 1.线程池的主要参数 核心线程数最大线程数空闲线程存活时间存活时间单位任务队列线程工厂拒绝策略允许核心线程超时 2. 线程的状态 新建状态就绪状态运行状态阻塞状态死亡状态 补充&#xff1a;线程阻塞的原因 线程调用sleep()方法进入睡眠状态 线程得到一个…...

第一节:电路连接【51单片机+A4988+步进电机教程】

摘要&#xff1a;本节介绍如何搭建一个51单片机A4988步进电机控制电路&#xff0c;所用材料均为常见的模块&#xff0c;简单高效的方式搭建起硬件环境 一、硬件清单 ①51单片机最小控制模块 ②开关电源 ③A4988模块转接座 ④二相四线步进电机 ⑤电线若干 二、接线 三、A49…...

机器学习算法深度解析:以支持向量机(SVM)为例的实践应用

机器学习算法深度解析&#xff1a;以支持向量机&#xff08;SVM&#xff09;为例的实践应用 在当今的数据驱动时代&#xff0c;机器学习作为人工智能的核心分支&#xff0c;正以前所未有的速度改变着我们的生活与工作方式。从图像识别到自然语言处理&#xff0c;从金融预测到医…...

网络编程(Modbus进阶)

思维导图 Modbus RTU&#xff08;先学一点理论&#xff09; 概念 Modbus RTU 是工业自动化领域 最广泛应用的串行通信协议&#xff0c;由 Modicon 公司&#xff08;现施耐德电气&#xff09;于 1979 年推出。它以 高效率、强健性、易实现的特点成为工业控制系统的通信标准。 包…...

FFmpeg 低延迟同屏方案

引言 在实时互动需求激增的当下&#xff0c;无论是在线教育中的师生同屏演示、远程办公的屏幕共享协作&#xff0c;还是游戏直播的画面实时传输&#xff0c;低延迟同屏已成为保障用户体验的核心指标。FFmpeg 作为一款功能强大的多媒体框架&#xff0c;凭借其灵活的编解码、数据…...

java调用dll出现unsatisfiedLinkError以及JNA和JNI的区别

UnsatisfiedLinkError 在对接硬件设备中&#xff0c;我们会遇到使用 java 调用 dll文件 的情况&#xff0c;此时大概率出现UnsatisfiedLinkError链接错误&#xff0c;原因可能有如下几种 类名错误包名错误方法名参数错误使用 JNI 协议调用&#xff0c;结果 dll 未实现 JNI 协…...

React19源码系列之 事件插件系统

事件类别 事件类型 定义 文档 Event Event 接口表示在 EventTarget 上出现的事件。 Event - Web API | MDN UIEvent UIEvent 接口表示简单的用户界面事件。 UIEvent - Web API | MDN KeyboardEvent KeyboardEvent 对象描述了用户与键盘的交互。 KeyboardEvent - Web…...

css的定位(position)详解:相对定位 绝对定位 固定定位

在 CSS 中&#xff0c;元素的定位通过 position 属性控制&#xff0c;共有 5 种定位模式&#xff1a;static&#xff08;静态定位&#xff09;、relative&#xff08;相对定位&#xff09;、absolute&#xff08;绝对定位&#xff09;、fixed&#xff08;固定定位&#xff09;和…...

leetcodeSQL解题:3564. 季节性销售分析

leetcodeSQL解题&#xff1a;3564. 季节性销售分析 题目&#xff1a; 表&#xff1a;sales ---------------------- | Column Name | Type | ---------------------- | sale_id | int | | product_id | int | | sale_date | date | | quantity | int | | price | decimal | -…...

NLP学习路线图(二十三):长短期记忆网络(LSTM)

在自然语言处理(NLP)领域,我们时刻面临着处理序列数据的核心挑战。无论是理解句子的结构、分析文本的情感,还是实现语言的翻译,都需要模型能够捕捉词语之间依时序产生的复杂依赖关系。传统的神经网络结构在处理这种序列依赖时显得力不从心,而循环神经网络(RNN) 曾被视为…...

vue3+vite项目中使用.env文件环境变量方法

vue3vite项目中使用.env文件环境变量方法 .env文件作用命名规则常用的配置项示例使用方法注意事项在vite.config.js文件中读取环境变量方法 .env文件作用 .env 文件用于定义环境变量&#xff0c;这些变量可以在项目中通过 import.meta.env 进行访问。Vite 会自动加载这些环境变…...

springboot整合VUE之在线教育管理系统简介

可以学习到的技能 学会常用技术栈的使用 独立开发项目 学会前端的开发流程 学会后端的开发流程 学会数据库的设计 学会前后端接口调用方式 学会多模块之间的关联 学会数据的处理 适用人群 在校学生&#xff0c;小白用户&#xff0c;想学习知识的 有点基础&#xff0c;想要通过项…...

免费数学几何作图web平台

光锐软件免费数学工具&#xff0c;maths,数学制图&#xff0c;数学作图&#xff0c;几何作图&#xff0c;几何&#xff0c;AR开发,AR教育,增强现实,软件公司,XR,MR,VR,虚拟仿真,虚拟现实,混合现实,教育科技产品,职业模拟培训,高保真VR场景,结构互动课件,元宇宙http://xaglare.c…...