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的错误

解决方法：
重装依赖

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

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

相关文章

leecode1143.最长公共子序列

leecode1143.最长公共子序列

这道题目和最长重复子数组是一个类型的不同之处在于text1[i]!text2[j]时dp[i][j]时他的值是继承上一行或上一列的最大值&#xff0c;二者dp数组的含义也不一样&#xff0c;这里的dp[i][j]表示的是以text[i]和text2[j]为结尾的子序列最大长度&#xff0c;这也是导致两种问题当判…
阅读更多...
通过 4 种方式快速将音乐从 iPod 传输到 Android

通过 4 种方式快速将音乐从 iPod 传输到 Android

概括 在 iPod 上听音乐很酷&#xff0c;但是当您拥有最新的 Android 手机时&#xff0c;也许您想在新手机上欣赏 iPod 音乐。那么&#xff0c;你的计划是什么&#xff1f;如何将音乐从 iPod 传输到 Android&#xff1f; 如果您担心这个问题&#xff0c;请看看下面的方法。他们…
阅读更多...
flutter在windows平台中运行报错

flutter在windows平台中运行报错

PS D:\F\luichun> flutter run当运行flutter项目时&#xff0c;【解决如下报错】 /C:/flutter/packages/flutter/lib/src/painting/star_border.dart:530:27: Error: The getter Matrix4 isnt defined for the class _StarGenerator.- _StarGenerator is from package:flut…
阅读更多...
Docker Compose编排

Docker Compose编排

什么是 Docker Compose? Docker Compose 是 Docker 官方推出的开源项目&#xff0c;用于快速编排和管理多个 Docker 容器的应用程序。它允许用户通过一个 YAML 格式的配置文件 docker-compose.yml 来定义和运行多个相关联的应用容器&#xff0c;从而实现对容器的统一管理和编…
阅读更多...
你已经分清JAVA中JVM、JDK与JRE的作用和关系了吗？

你已经分清JAVA中JVM、JDK与JRE的作用和关系了吗？

你已经分清JAVA中JVM、JDK与JRE的作用和关系了吗&#xff1f; 一. JVM、JDK与JRE的关系二. JVM、JDK与JRE的作用2.1 什么是JVM&#xff1f;2.2 什么是JDK&#xff1f;2.3 什么是JRE&#xff1f; 前言 点个免费的赞和关注&#xff0c;有错误的地方请指出&#xff0c;看个人主页有…
阅读更多...
RP2K：一个面向细粒度图像的大规模零售商品数据集

RP2K：一个面向细粒度图像的大规模零售商品数据集

这是一种用于细粒度图像分类的新的大规模零售产品数据集。与以往专注于相对较少产品的数据集不同&#xff0c;我们收集了2000多种不同零售产品的35万张图像&#xff0c;这些图像直接在真实的零售商店的货架上拍摄。我们的数据集旨在推进零售对象识别的研究&#xff0c;该研究具…
阅读更多...
Spark大数据处理引擎详解

Spark大数据处理引擎详解

一、概念 Spark是一种快速、通用、可扩展的大数据分析引擎&#xff0c;它基于内存计算的大数据并行计算框架&#xff0c;能够显著提高大数据环境下数据处理的实时性&#xff0c;同时保证高容错性和高可伸缩性。Spark于2009年诞生于加州大学伯克利分校AMPLab&#xff0c;2010年…
阅读更多...
服务器数据恢复—离线盘数超过热备盘数导致raidz阵列崩溃的数据恢复

服务器数据恢复—离线盘数超过热备盘数导致raidz阵列崩溃的数据恢复

服务器数据恢复环境&故障&#xff1a; 一台配有32块硬盘的服务器在运行过程中突然崩溃不可用。经过初步检测&#xff0c;基本上确定服务器硬件不存在物理故障。管理员重启服务器后问题依旧。需要恢复该服务器中的数据。 服务器数据恢复环境&#xff1a; 1、将服务器中硬盘…
阅读更多...
安装教程：慧集通集成平台（DataLinkX）智能体客户端安装操作(Linux/windows/mac)

安装教程：慧集通集成平台（DataLinkX）智能体客户端安装操作(Linux/windows/mac)

1.下载客户端 使用提供的账号登录集成平台后台(https://www.datalinkx.cn/),点击左侧菜单栏【智能体】→【智能体】进入到智能体列表界面&#xff0c;在该界面我们找到功能栏中的下载按钮点击则会弹出下载界面&#xff0c;在该界面我们可以选择不同的系统操作系统来下载对应版…
阅读更多...
067B-基于R语言平台Biomod2模型的物种分布建模与数据可视化-高阶课程【2025】

067B-基于R语言平台Biomod2模型的物种分布建模与数据可视化-高阶课程【2025】

课程培训包含&#xff1a;发票全套软件脚本学习数据视频文件导师答疑 本教程旨在通过系统的培训学习&#xff0c;学员可以掌握Biomod2模型最新版本的使用方法&#xff0c;最新版包含12个模型&#xff08;ANN, CTA, FDA, GAM, GBM, GLM, MARS, MAXENT, MAXNET, RF, SRE, XGBOOST…
阅读更多...
贵州省贵安新区地图+全域数据arcgis格式shp数据矢量路网地名+卫星影像底图下载后内容测评

贵州省贵安新区地图+全域数据arcgis格式shp数据矢量路网地名+卫星影像底图下载后内容测评

贵州省贵安新区地图全域数据arcgis格式shp数据矢量路网地名卫星影像底图 贵安新区地图是一款基于ArcGIS格式的地理信息系统数据集&#xff0c;包含2022年3月更新的详尽矢量路网、地名信息以及卫星影像底图。这款数据集是针对贵安新区这一特定区域设计的&#xff0c;对于规划、…
阅读更多...
pycharm完成git项目的拉取及修改，并保存为自己的项目，以cosyvoice为例

pycharm完成git项目的拉取及修改，并保存为自己的项目，以cosyvoice为例

1.新建一个项目&#xff0c;如图 等待几分钟。因为还要虚拟环境的建立等。 2.克隆项目源码及提前准备&#xff08;备&#xff09; a.git的路径。 b.githube相关设置 左角。查看。 在对话框中&#xff0c;填写要摘取的仓库&#xff0c;提示非空目录。我给加了一个main 完成后&a…
阅读更多...
Appium（一）--- 环境搭建

Appium（一）--- 环境搭建

一、Android自动化环境搭建 1、JDK 必须1.8及以上(1) 安装&#xff1a;默认安装(2) 环境变量配置新建JAVA_HOME:安装路径新建CLASSPath%JAVA_HOME%\lib\dt.jar;%JAVA_HOME%\lib\tools.jar在path中增加&#xff1a;%JAVA_HOME%\bin;%JAVA_HOME%\jre\bin&#xff1b;(3) 验证…
阅读更多...
Ant Design中Flex布局、Grid布局和Layout布局详解

Ant Design中Flex布局、Grid布局和Layout布局详解

好的&#xff0c;我们来更详细地探讨 Ant Design 中的 Flex布局、Grid布局 和 Layout布局 的特点、用法、适用场景&#xff0c;以及如何灵活运用它们来构建页面。下面将从各个方面进行更深入的分析&#xff0c;并提供具体的实例。 VueFlex布局实现响应式布局 1. Flex布局 概念…
阅读更多...
Redis两种主要的持久化方式是什么？

Redis两种主要的持久化方式是什么？

Redis支持两种主要的持久化方式&#xff0c;它们分别是RDB&#xff08;Redis Database Snapshotting&#xff09;和AOF&#xff08;Append Only File&#xff09;。以下是这两种持久化方式的详细介绍&#xff1a; 一、RDB&#xff08;Redis Database Snapshotting&#xff09; …
阅读更多...
flink cdc oceanbase（binlog模式）

flink cdc oceanbase（binlog模式）

接上文&#xff1a;一文说清flink从编码到部署上线 环境&#xff1a;①操作系统&#xff1a;阿里龙蜥 7.9&#xff08;平替CentOS7.9&#xff09;&#xff1b;②CPU&#xff1a;x86&#xff1b;③用户&#xff1a;root。 预研初衷&#xff1a;现在很多项目有国产化的要求&#…
阅读更多...
C++文件流 例题

C++文件流 例题

问题&#xff1a; 设计一个留言类&#xff0c;实现以下的功能&#xff1a; 1) 程序第一次运行时&#xff0c;建立一个 message.txt 文本文件&#xff0c;并把用户输入的信息存入该文件&#xff1b; 2) 以后每次运行时&#xff0c;都先读取该文件的内容并显示给用户&#xff…
阅读更多...
遮挡半透明效果

遮挡半透明效果

1、遮挡半透明效果是什么 在游戏开发中&#xff0c;遮挡半透明效果就是物体被挡住的部分&#xff0c;也能呈现出一种半透明效果而被看到&#xff08;具体效果可以自定义&#xff09;比如 当角色在建筑物之间穿行时&#xff0c;被遮挡部分能够呈现出半透明效果而被我们看到。遮…
阅读更多...
大模型高效推理综述

大模型高效推理综述

大模型高效推理综述 1 Introduction2 Preliminaries2.1 transformer架构的LLM2.2 大模型推理过程2.3 推理效率分析 3 TAXONOMY(分类)4.数据级别优化4.1输入压缩4.1.1 提示词裁剪&#xff08;prompt pruning&#xff09;4.1.2 提示词总结&#xff08;prompt summary&#xff09;…
阅读更多...
计算机网络--UDP和TCP课后习题

计算机网络--UDP和TCP课后习题

【5-05】 试举例说明有些应用程序愿意采用不可靠的UDP, 而不愿意采用可靠的TCP。 解答&#xff1a; 这可能有以下几种情况。 首先&#xff0c;在互联网上传输实时数据的分组时&#xff0c;有可能会出现差错甚至丢失。如果利用 TCP 协议对这些出错或丢失的分组进行重传&…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023