vue2结合electron开发跨平台应用(桌面端应用)

1.确定nodejs和electron的版本号  

确定nodejs和electron的版本号及其重要，因为electron的开发版本需要指定的nodejs版本支持。 

 本文安装测试使用的是:

   1.node18.19.0

   2.npm10.2.3 

   3.vue-cli5.0.8

   4.electron29.0.0

  

2.创建vue2项目 

vue create elctron29.0.0_node18.19.0_vuecli5.0.8_vue2

 

3.安装electron 

npm install electron@29.0.0 --save-dev

 

 4.安装electron-builder

vue add electron-builder

 在项目的src目录下增加了文件，并在注入

5.启动electron项目 

npm run electron:serve

 

首次启动会加载相当缓慢，会有如下提示信息： 

Failed to fetch extension, trying 4 more times
Failed to fetch extension, trying 3 more times
Failed to fetch extension, trying 2 more times
Failed to fetch extension, trying 1 more times
Failed to fetch extension, trying 0 more times

 解决首次加载缓慢的办法：

   在项目中找到background.js文件，注释background.js文件中的这段代码：import       installExtension, { VUEJS_DEVTOOLS } from 'electron-devtools-installer'

 再次启动测试

很快就启动成功了！ 

6.打包electron项目

 npm run electron:build

使用 electron-builder 构建 vue 项目，运行 npm run electron:build ，构建过程报错。这个错误可能是由于使用的 Node.js 版本过高，不支持当前的 OpenSSL 版本，导致构建失败。解决这个问题的方法是在构建命令前设置 NODE_OPTIONS 环境变量，强制使用 OpenSSL 的旧版提供程序。 

报错提示


C:\Users\63002\Desktop\elctron29.0.0_node18.19.0_vuecli5.0.8_vue2>npm run electron:build

> elctron29.0.0_node18.19.0_vuecli5.0.8_vue2@0.1.0 electron:build
> vue-cli-service electron:build

 INFO  Bundling render process:
All browser targets in the browserslist configuration have supported ES module.
Therefore we don't build two separate bundles for differential loading.


-  Building for production...

 DONE  Compiled successfully in 4261ms                                                                                                              13:26:43
  File                                                  Size                                             Gzipped

  dist_electron\bundled\js\chunk-vendors.91055014.js    127.60 KiB                                       43.44 KiB
  dist_electron\bundled\js\app.60bf7bcd.js              15.53 KiB                                        9.52 KiB
  dist_electron\bundled\js\about.85649f72.js            0.50 KiB                                         0.32 KiB
  dist_electron\bundled\css\app.bc18c568.css            0.42 KiB                                         0.26 KiB

  Images and other types of assets omitted.
  Build at: 2024-03-02T05:26:43.958Z - Hash: 1ffa631b94053caa - Time: 4261ms

 DONE  Build complete. The dist_electron\bundled directory is ready to be deployed.
 INFO  Check out deployment instructions at https://cli.vuejs.org/guide/deployment.html

/  Bundling main process...

 ERROR  Failed to compile with 1 errors                                                                                                             13:26:45

 error

background.js from Terser
Error: error:0308010C:digital envelope routines::unsupported
    at new Hash (node:internal/crypto/hash:69:19)
    at Object.createHash (node:crypto:133:10)
    at C:\Users\63002\Desktop\elctron29.0.0_node18.19.0_vuecli5.0.8_vue2\node_modules\vue-cli-plugin-electron-builder\node_modules\webpack\node_modules\terser-webpack-plugin\dist\index.js:217:37
    at Array.forEach (<anonymous>)
    at TerserPlugin.optimizeFn (C:\Users\63002\Desktop\elctron29.0.0_node18.19.0_vuecli5.0.8_vue2\node_modules\vue-cli-plugin-electron-builder\node_modules\webpack\node_modules\terser-webpack-plugin\dist\index.js:160:259)
    at _next0 (eval at create (C:\Users\63002\Desktop\elctron29.0.0_node18.19.0_vuecli5.0.8_vue2\node_modules\vue-cli-plugin-electron-builder\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:8:1)
    at eval (eval at create (C:\Users\63002\Desktop\elctron29.0.0_node18.19.0_vuecli5.0.8_vue2\node_modules\vue-cli-plugin-electron-builder\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:23:1)
    at processTicksAndRejections (node:internal/process/task_queues:95:5)

C:\Users\63002\Desktop\elctron29.0.0_node18.19.0_vuecli5.0.8_vue2\node_modules\vue-cli-plugin-electron-builder\index.js:198
              throw new Error('Build failed with errors.')
                    ^

Error: Build failed with errors.
    at C:\Users\63002\Desktop\elctron29.0.0_node18.19.0_vuecli5.0.8_vue2\node_modules\vue-cli-plugin-electron-builder\index.js:198:21
    at finalCallback (C:\Users\63002\Desktop\elctron29.0.0_node18.19.0_vuecli5.0.8_vue2\node_modules\vue-cli-plugin-electron-builder\node_modules\webpack\lib\Compiler.js:257:39)
    at C:\Users\63002\Desktop\elctron29.0.0_node18.19.0_vuecli5.0.8_vue2\node_modules\vue-cli-plugin-electron-builder\node_modules\webpack\lib\Compiler.js:273:13
    at AsyncSeriesHook.eval [as callAsync] (eval at create (C:\Users\63002\Desktop\elctron29.0.0_node18.19.0_vuecli5.0.8_vue2\node_modules\vue-cli-plugin-electron-builder\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:15:1)
    at AsyncSeriesHook.lazyCompileHook (C:\Users\63002\Desktop\elctron29.0.0_node18.19.0_vuecli5.0.8_vue2\node_modules\vue-cli-plugin-electron-builder\node_modules\tapable\lib\Hook.js:154:20)
    at onCompiled (C:\Users\63002\Desktop\elctron29.0.0_node18.19.0_vuecli5.0.8_vue2\node_modules\vue-cli-plugin-electron-builder\node_modules\webpack\lib\Compiler.js:271:21)
    at C:\Users\63002\Desktop\elctron29.0.0_node18.19.0_vuecli5.0.8_vue2\node_modules\vue-cli-plugin-electron-builder\node_modules\webpack\lib\Compiler.js:681:15
    at AsyncSeriesHook.eval [as callAsync] (eval at create (C:\Users\63002\Desktop\elctron29.0.0_node18.19.0_vuecli5.0.8_vue2\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:6:1)
    at AsyncSeriesHook.lazyCompileHook (C:\Users\63002\Desktop\elctron29.0.0_node18.19.0_vuecli5.0.8_vue2\node_modules\vue-cli-plugin-electron-builder\node_modules\tapable\lib\Hook.js:154:20)
    at C:\Users\63002\Desktop\elctron29.0.0_node18.19.0_vuecli5.0.8_vue2\node_modules\vue-cli-plugin-electron-builder\node_modules\webpack\lib\Compiler.js:678:31
    at AsyncSeriesHook.eval [as callAsync] (eval at create (C:\Users\63002\Desktop\elctron29.0.0_node18.19.0_vuecli5.0.8_vue2\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:6:1)
    at AsyncSeriesHook.lazyCompileHook (C:\Users\63002\Desktop\elctron29.0.0_node18.19.0_vuecli5.0.8_vue2\node_modules\vue-cli-plugin-electron-builder\node_modules\tapable\lib\Hook.js:154:20)
    at C:\Users\63002\Desktop\elctron29.0.0_node18.19.0_vuecli5.0.8_vue2\node_modules\vue-cli-plugin-electron-builder\node_modules\webpack\lib\Compilation.js:1423:35
    at AsyncSeriesHook.eval [as callAsync] (eval at create (C:\Users\63002\Desktop\elctron29.0.0_node18.19.0_vuecli5.0.8_vue2\node_modules\vue-cli-plugin-electron-builder\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:6:1)
    at AsyncSeriesHook.lazyCompileHook (C:\Users\63002\Desktop\elctron29.0.0_node18.19.0_vuecli5.0.8_vue2\node_modules\vue-cli-plugin-electron-builder\node_modules\tapable\lib\Hook.js:154:20)
    at C:\Users\63002\Desktop\elctron29.0.0_node18.19.0_vuecli5.0.8_vue2\node_modules\vue-cli-plugin-electron-builder\node_modules\webpack\lib\Compilation.js:1414:32
    at eval (eval at create (C:\Users\63002\Desktop\elctron29.0.0_node18.19.0_vuecli5.0.8_vue2\node_modules\vue-cli-plugin-electron-builder\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:12:1)
    at C:\Users\63002\Desktop\elctron29.0.0_node18.19.0_vuecli5.0.8_vue2\node_modules\vue-cli-plugin-electron-builder\node_modules\webpack\node_modules\terser-webpack-plugin\dist\index.js:321:9
    at TaskRunner.run (C:\Users\63002\Desktop\elctron29.0.0_node18.19.0_vuecli5.0.8_vue2\node_modules\vue-cli-plugin-electron-builder\node_modules\webpack\node_modules\terser-webpack-plugin\dist\TaskRunner.js:48:7)
    at TerserPlugin.optimizeFn (C:\Users\63002\Desktop\elctron29.0.0_node18.19.0_vuecli5.0.8_vue2\node_modules\vue-cli-plugin-electron-builder\node_modules\webpack\node_modules\terser-webpack-plugin\dist\index.js:227:18)
    at _next0 (eval at create (C:\Users\63002\Desktop\elctron29.0.0_node18.19.0_vuecli5.0.8_vue2\node_modules\vue-cli-plugin-electron-builder\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:8:1)
    at eval (eval at create (C:\Users\63002\Desktop\elctron29.0.0_node18.19.0_vuecli5.0.8_vue2\node_modules\vue-cli-plugin-electron-builder\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:23:1)
    at processTicksAndRejections (node:internal/process/task_queues:95:5)

Node.js v18.19.0

C:\Users\63002\Desktop\elctron29.0.0_node18.19.0_vuecli5.0.8_vue2>

解决方案

打开package.json，找到

  "scripts": {
    "electron:build": "vue-cli-service electron:build",
  },

改为

  "scripts": {
    "electron:build": "set NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service electron:build",
  },

 通过设置 NODE_OPTIONS 环境变量为 --openssl-legacy-provider，可以强制使用旧版的 OpenSSL 提供程序，从而解决构建过程中的报错问题。

再次打包测试

 

可以正常打包，不报错了。 

注意：

1.打包windows桌面端软件要在windows系统的真机或者虚拟机上进行打包。同样打包Mac系统的桌面端软件要在Mac系统的真机或者虚拟机上进行打包。其他操作系统同理。

2.如果要打包发布到对应应用商店需要代码签名。https://www.electronjs.org/zh/docs/latest/tutorial/%E6%89%93%E5%8C%85%E6%95%99%E7%A8%8B

7.安装打包后的软件

源码：GitHub - 1t1824d/elctron29.0.0_node18.19.0_vuecli5.0.8_vue2 

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

【MySQL】：约束全解析

【MySQL】：约束全解析

&#x1f3a5; 屿小夏 &#xff1a; 个人主页 &#x1f525;个人专栏 &#xff1a; MySQL从入门到进阶 &#x1f304; 莫道桑榆晚&#xff0c;为霞尚满天&#xff01; 文章目录 &#x1f4d1;前言一. 约束概述二. 约束演示三. 外键约束3.1 介绍3.2 语法3.3 删除/更新行为 &…
阅读更多...
2024最新EasyRecovery数据恢复软件的优点介绍

2024最新EasyRecovery数据恢复软件的优点介绍

EasyRecovery数据恢复软件的优点主要包括&#xff1a; 强大的恢复能力&#xff1a;EasyRecovery采用先进的深度扫描技术&#xff0c;能够恢复因误删除、格式化、分区丢失或损坏等多种原因丢失的数据。它支持从各种存储设备中恢复数据&#xff0c;包括硬盘、U盘、SD卡等。广泛的…
阅读更多...
MyBatisPlus(SpringBoot版)的分页插件

MyBatisPlus(SpringBoot版)的分页插件

目录 一、前置工作: 1.整体项目目录结构 2.创建普通javamaven项目。 3.导入依赖&#xff0c;改造成springboot项目 4.配置启动类 5.创建service接口及其实现类 6.创建接口Mapper 7.配置数据源 8.创建数据库表 二、使用MP&#xff08;mybatisplus&#xff09;的分页插件 二、使…
阅读更多...
上限和下限之间的随机值

上限和下限之间的随机值

实验结果; 上限和下限之间的随机值 第一步&#xff1a;新建项目 第二步&#xff1a;找到相应的部件 第三步&#xff1a;实验结果验证
阅读更多...
【C++】STL学习之旅——初识STL，认识string类

【C++】STL学习之旅——初识STL，认识string类

string类 1 STL 简介2 STL怎么学习3 STL缺陷4 string4.1 初识 string4.2 初步使用构造函数成员函数 5 小试牛刀Thanks♪(&#xff65;ω&#xff65;)&#xff89;谢谢阅读&#xff01;&#xff01;&#xff01;下一篇文章见&#xff01;&#xff01;&#xff01; 1 STL 简介 …
阅读更多...
【深度学习笔记】计算机视觉——目标检测和边界框

【深度学习笔记】计算机视觉——目标检测和边界框

目标检测和边界框 前面的章节&#xff08;例如 sec_alexnet— sec_googlenet&#xff09;介绍了各种图像分类模型。 在图像分类任务中&#xff0c;我们假设图像中只有一个主要物体对象&#xff0c;我们只关注如何识别其类别。 然而&#xff0c;很多时候图像里有多个我们感兴趣…
阅读更多...
故障诊断 | 一文解决，XGBoost极限梯度提升树的故障诊断（Matlab）

故障诊断 | 一文解决，XGBoost极限梯度提升树的故障诊断（Matlab）

效果一览 文章概述 故障诊断 | 一文解决，XGBoost极限梯度提升树的故障诊断（Matlab） 模型描述 XGBoost通过集成多个决策树来建立一个强大的预测模型。它采用了一种特殊的梯度提升技术，称为极限梯度提升（Extreme Gradient Boosting），以提高模型的性能和鲁棒性。 极限梯度…
阅读更多...
Pygame教程01：初识pygame游戏模块

Pygame教程01：初识pygame游戏模块

Pygame是一个用于创建基本的2D游戏和图形应用程序。它提供了一套丰富的工具&#xff0c;让开发者能够轻松地创建游戏和其他图形应用程序。Pygame 支持许多功能&#xff0c;包括图像和声音处理、事件处理、碰撞检测、字体渲染等。 Pygame 是在 SDL&#xff08;Simple DirectMed…
阅读更多...
进制的转化

进制的转化

#include <bits/stdc.h> using namespace std; typedef long long ll;int main(){char ch[]{0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F};int n, m; // 记录进制的数cin >> n; // 原数的进制string str;cin >> str;string ans;vector<int> st(str.size()); // 存…
阅读更多...
ES向量功能实战：向量搜索

ES向量功能实战：向量搜索

1 缘起 项目需要&#xff0c;向量搜索使用ES&#xff0c;为了顺利使项目顺利交付&#xff0c;开始学习ES的稠密向量功能&#xff0c;本文即ES向量的实践&#xff1a;增删查改。ES从7.x版本支持向量功能&#xff0c;为测试ES向量功能&#xff0c;需要使用7.x及以上的版本。本文…
阅读更多...
【Java基础系列】时间戳

【Java基础系列】时间戳

&#x1f49d;&#x1f49d;&#x1f49d;欢迎来到我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 推荐:kwan 的首页,持续学…
阅读更多...
05-Linux部署MySQL

05-Linux部署MySQL

Linux部署MySQL 在今后的使用过程中&#xff0c;需要频繁使用Linux系统&#xff0c;所以在Linux上安装软是必不可少的操作 。 前置要求 需要学习前四章知识&#xff0c;初识Linux、Linux基础命令、Linux权限管理、Linux高阶技巧这4个章节。需要开启多态虚拟机&#xff0c;电…
阅读更多...
运筹学_1.3 单纯形法的原理

运筹学_1.3 单纯形法的原理

1.3 单纯形法的原理 一、构造初始可行基二、得到初始基可行解三、最优性检验&#xff08;解的判别定理&#xff09;四、基变换&#xff08;确定主元及主元列&#xff09;1、确定换入变量2、确定换出变量 五、迭代运算(矩阵的初等行变换) 一、构造初始可行基 构造初始可行基的方…
阅读更多...
基于springboot+vue的校园商铺管理系统

基于springboot+vue的校园商铺管理系统

博主主页&#xff1a;猫头鹰源码 博主简介&#xff1a;Java领域优质创作者、CSDN博客专家、阿里云专家博主、公司架构师、全网粉丝5万、专注Java技术领域和毕业设计项目实战&#xff0c;欢迎高校老师\讲师\同行交流合作 ​主要内容&#xff1a;毕业设计(Javaweb项目|小程序|Pyt…
阅读更多...
day09_商品管理订单管理SpringTaskEcharts

day09_商品管理订单管理SpringTaskEcharts

文章目录 1 商品管理1.1 添加功能1.1.1 需求说明1.1.2 核心概念SPUSKU 1.1.3 加载品牌数据CategoryBrandControllerCategoryBrandServiceCategoryBrandMapperCategoryBrandMapper.xml 1.1.4 加载商品单元数据ProductUnitProductUnitControllerProductUnitServiceProductUnitMap…
阅读更多...
python并发 map函数的妙用

python并发 map函数的妙用

1.map是什么&#xff1f; map函数是Python中的一个内置函数&#xff0c;用于将一个函数应用到一个或多个可迭代对象的每个元素上&#xff0c;生成一个新的可迭代对象。它的一般形式是&#xff1a; map(function, iterable1, iterable2, ...)其中&#xff0c;function是一个函…
阅读更多...
c++之旅——第三弹

c++之旅——第三弹

大家好啊&#xff0c;这里是c之旅第三弹&#xff0c;跟随我的步伐来开始这一篇的学习吧&#xff01; 如果有知识性错误&#xff0c;欢迎各位指正&#xff01;&#xff01;一起加油&#xff01;&#xff01; 创作不易&#xff0c;希望大家多多支持哦&#xff01; 一.命名空间;…
阅读更多...
OpenCV 4基础篇| OpenCV图像的裁切

OpenCV 4基础篇| OpenCV图像的裁切

目录 1. Numpy切片1.1 注意事项1.2 代码示例 2. cv2.selectROI()2.1 语法结构2.2 注意事项2.3 代码示例 3. Pillow.crop3.1 语法结构3.2 注意事项3.3 代码示例 4. 扩展示例&#xff1a;单张大图裁切成多张小图5. 总结 1. Numpy切片 语法结构&#xff1a; retval img[y:yh, x…
阅读更多...
单源最短路的综合应用

单源最短路的综合应用

1135. 新年好 - AcWing题库 单源最短路和暴搜的结合 import java.util.*;class PII implements Comparable<PII>{int num, distance;public PII(int num, int distance){this.num num;this.distance distance;}public int compareTo(PII o){return distance - o.dista…
阅读更多...
解读OWASP软件保障成熟度模型SAMM

解读OWASP软件保障成熟度模型SAMM

OWASP软件保证成熟度模型&#xff08;SAMM&#xff09;可为所有类型的组织分析和改进其软件安全态势提供有效和可衡量的方法。OWASP SAMM支持完整的软件生命周期&#xff0c;包括开发和获取&#xff0c;并且与技术和过程无关。 1. 简介 OWASP软件保证成熟度模型&#xff08;SA…
阅读更多...
最新文章

Copyright @ 2022~2023