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,electron 需添加到devDependencies,如果添加到dependencies后面运行可能会报错 根目录创建electron文件夹,在electron文件夹创建main.js(或者backgrou…...
vscode如何离线安装插件
在没有网络的时候,如果要安装插件,就会麻烦一些,需要通过离线安装的方式进行。下面记录如何在vscode离线安装插件。 一、下载离线插件 在一台能联网的电脑中,下载好离线插件,拷贝到无法联网的电脑上。等待安装。 vscode插件商店地址:https://marketplace.visualstudio.co…...
计算机网络常见面试题及解答
以下是计算机网络中常见的面试题及解答,按主题分类: --- ## **一、基础概念** ### **1. OSI 七层模型和 TCP/IP 模型的区别是什么?** **答:** - **OSI 七层模型:** - 应用层、表示层、会话层、传输层、网络层、数…...
举例说明AI模型怎么聚类,最后神经网络怎么保存
举例说明怎么聚类,最后神经网络怎么保存 目录 举例说明怎么聚类,最后神经网络怎么保存K - Means聚类算法实现神经元特征聚类划分成不同专家的原理和过程 特征提取: 首先,需要从神经元中提取有代表性的特征。例如,对于一个多层感知机(MLP)中的神经元,其权重向量可以作为特…...
HarmonyOS NEXT应用开发实战(一):边学边玩,从零开发一款影视APP
引言 学习一项技能,最好也最快的办法就是动手实战。通过自己给自己找项目练习,不仅能够激发兴趣,还能从开发实战中不断总结经验。这种学习方法是最为高效的。今天,我们将通过开发一款名为“爱影家”的影视APP,来学习H…...
STM32G0B1 can Error_Handler 解决方法
问题现象 MCU上电,发送0x13帧数据固定进入 Error_Handler 硬件介绍 MCU :STM32G0B1 can:NSI1042 tx 接TX RX 接RX 折腾了一下午,无解,问题依旧; 对比测试 STM32G431 手头有块G431 官方评估版CAN 模块; 同样的…...
使用 `llama_index` 构建智能问答系统:多种文档切片方法的评估
使用 llama_index 构建智能问答系统:多种文档切片方法的评估 代码优化与解析1. **代码结构优化**2. **日志管理**3. **环境变量管理**4. **模型初始化**5. **提示模板更新**6. **问答函数优化**7. **索引构建与查询引擎**8. **节点解析器测试** 总结 在现代自然语言…...
【大模型】7 天 AI 大模型学习
7 天 AI 大模型学习 Day 2 今天是 7 天AI 大模型学习的第二天 😄,今天我将会学习 Transformer 、Encoder-based and Decoder-Based LLMs 等 。如果有感兴趣的,就和我一起开始吧 ~ 课程链接 :2025年快速吃透AI大模型&am…...
软件工程大复习之(四)——面向对象与UML
4.1 面向对象概述 面向对象(OO)是一种编程范式,它将数据和处理数据的方法封装在对象中。面向对象的主要概念包括: 对象:实例化的数据和方法的集合。类:对象的蓝图或模板。封装:隐藏对象的内部…...
【Linux】shell命令
目录 shell的基本命令 shell - 贝壳 外在保护工具 用户、shell、内核、硬件之间的关系 解析器的分类: shell命令格式 history -历史记录查询 修改环境变量的值: shell中的特殊字符 通配符 管道 | 输入输出重定向 命令置换符 shell的基本命…...
ValuesRAG:以检索增强情境学习强化文化对齐
随着大型语言模型(LLMs)的迅猛发展,其在各个领域展现出强大的能力。然而,训练数据中西方中心主义的倾向,使得 LLMs 在文化价值观一致性方面面临严峻挑战,这一问题在跨文化场景中尤为突出,可能导…...
【机器学习篇】交通革命:机器学习如何引领未来的道路创新
嘿,你知道吗?机器学习正在交通领域掀起一场革命啦!它将如何引领未来道路创新呢 本文有精彩的 C 代码演示、实用的图片解释,还有超多干货,保证让你大开眼界,点赞收藏关注, 开启一场奇妙的探索之…...
DeepSeek-V3 通俗详解:从诞生到优势,以及与 GPT-4o 的对比
1. DeepSeek 的前世今生 1.1 什么是 DeepSeek? DeepSeek 是一家专注于人工智能技术研发的公司,致力于打造高性能、低成本的 AI 模型。它的目标是让 AI 技术更加普惠,让更多人能够用上强大的 AI 工具。 1.2 DeepSeek-V3 的诞生 DeepSeek-V…...
把vue项目或者vue组件发布成npm包或者打包成lib库文件本地使用
将vue项目发布成npm库文件,第三方通过npm依赖安装使用;使用最近公司接了一个项目,这个项目需要集成到第三方页面,在第三方页面点击项目名称,页面变成我们的项目页面;要求以npm库文件提供给他们;…...
【STC库函数】Compare比较器的使用
如果我们需要比较两个点的电压,当A点高于B点的时候我们做一个操作,当B点高于A点的时候做另一个操作。 我们除了加一个运放或者比较器,还可以直接使用STC内部的一个比较器。 正极输入端可以是P37、P50、P51,或者从ADC的十六个通道…...
单片机-独立按键矩阵按键实验
1、按键介绍 按键管脚两端距离长的表示默认是导通状态,距离短的默认是断开状态, 如果按键按下,初始导通状态变为断开,初始断开状态变为导通 我们开发板是采用软件消抖,一般来说一个简单的按键消抖就是先读取按键的状…...
若要把普通表转成分区表,就需要先新建分区表,然后把普通表中的数据导入新建分区表。 具体怎么导入?
将普通表转换为分区表并导入数据是一个常见的数据库管理任务。以下是详细的步骤和示例,帮助你在 GaussDB 中完成这一过程: 1. 创建分区表 首先,你需要创建一个新的分区表,定义好分区键和分区策略。假设你有一个普通表 orders&am…...
XXX公司面试真题
一、一面问题 1.线程池的主要参数 核心线程数最大线程数空闲线程存活时间存活时间单位任务队列线程工厂拒绝策略允许核心线程超时 2. 线程的状态 新建状态就绪状态运行状态阻塞状态死亡状态 补充:线程阻塞的原因 线程调用sleep()方法进入睡眠状态 线程得到一个…...
第一节:电路连接【51单片机+A4988+步进电机教程】
摘要:本节介绍如何搭建一个51单片机A4988步进电机控制电路,所用材料均为常见的模块,简单高效的方式搭建起硬件环境 一、硬件清单 ①51单片机最小控制模块 ②开关电源 ③A4988模块转接座 ④二相四线步进电机 ⑤电线若干 二、接线 三、A49…...
机器学习算法深度解析:以支持向量机(SVM)为例的实践应用
机器学习算法深度解析:以支持向量机(SVM)为例的实践应用 在当今的数据驱动时代,机器学习作为人工智能的核心分支,正以前所未有的速度改变着我们的生活与工作方式。从图像识别到自然语言处理,从金融预测到医…...
(LeetCode 每日一题) 3442. 奇偶频次间的最大差值 I (哈希、字符串)
题目:3442. 奇偶频次间的最大差值 I 思路 :哈希,时间复杂度0(n)。 用哈希表来记录每个字符串中字符的分布情况,哈希表这里用数组即可实现。 C版本: class Solution { public:int maxDifference(string s) {int a[26]…...
synchronized 学习
学习源: https://www.bilibili.com/video/BV1aJ411V763?spm_id_from333.788.videopod.episodes&vd_source32e1c41a9370911ab06d12fbc36c4ebc 1.应用场景 不超卖,也要考虑性能问题(场景) 2.常见面试问题: sync出…...
【Linux】shell脚本忽略错误继续执行
在 shell 脚本中,可以使用 set -e 命令来设置脚本在遇到错误时退出执行。如果你希望脚本忽略错误并继续执行,可以在脚本开头添加 set e 命令来取消该设置。 举例1 #!/bin/bash# 取消 set -e 的设置 set e# 执行命令,并忽略错误 rm somefile…...
UE5 学习系列(三)创建和移动物体
这篇博客是该系列的第三篇,是在之前两篇博客的基础上展开,主要介绍如何在操作界面中创建和拖动物体,这篇博客跟随的视频链接如下: B 站视频:s03-创建和移动物体 如果你不打算开之前的博客并且对UE5 比较熟的话按照以…...
渲染学进阶内容——模型
最近在写模组的时候发现渲染器里面离不开模型的定义,在渲染的第二篇文章中简单的讲解了一下关于模型部分的内容,其实不管是方块还是方块实体,都离不开模型的内容 🧱 一、CubeListBuilder 功能解析 CubeListBuilder 是 Minecraft Java 版模型系统的核心构建器,用于动态创…...
剑指offer20_链表中环的入口节点
链表中环的入口节点 给定一个链表,若其中包含环,则输出环的入口节点。 若其中不包含环,则输出null。 数据范围 节点 val 值取值范围 [ 1 , 1000 ] [1,1000] [1,1000]。 节点 val 值各不相同。 链表长度 [ 0 , 500 ] [0,500] [0,500]。 …...
postgresql|数据库|只读用户的创建和删除(备忘)
CREATE USER read_only WITH PASSWORD 密码 -- 连接到xxx数据库 \c xxx -- 授予对xxx数据库的只读权限 GRANT CONNECT ON DATABASE xxx TO read_only; GRANT USAGE ON SCHEMA public TO read_only; GRANT SELECT ON ALL TABLES IN SCHEMA public TO read_only; GRANT EXECUTE O…...
Cinnamon修改面板小工具图标
Cinnamon开始菜单-CSDN博客 设置模块都是做好的,比GNOME简单得多! 在 applet.js 里增加 const Settings imports.ui.settings;this.settings new Settings.AppletSettings(this, HTYMenusonichy, instance_id); this.settings.bind(menu-icon, menu…...
Psychopy音频的使用
Psychopy音频的使用 本文主要解决以下问题: 指定音频引擎与设备;播放音频文件 本文所使用的环境: Python3.10 numpy2.2.6 psychopy2025.1.1 psychtoolbox3.0.19.14 一、音频配置 Psychopy文档链接为Sound - for audio playback — Psy…...
成都鼎讯硬核科技!雷达目标与干扰模拟器,以卓越性能制胜电磁频谱战
在现代战争中,电磁频谱已成为继陆、海、空、天之后的 “第五维战场”,雷达作为电磁频谱领域的关键装备,其干扰与抗干扰能力的较量,直接影响着战争的胜负走向。由成都鼎讯科技匠心打造的雷达目标与干扰模拟器,凭借数字射…...
