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 

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

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

相关文章

zotero | 多平台同步 ｜ 坚果云

zotero | 多平台同步 ｜ 坚果云

zotero注册登陆 打开zotero软件&#xff0c;mac电脑打开首选项&#xff0c;如下图所示&#xff1a; 然后点击同步选项&#xff0c;如下图所示&#xff0c;如果已经有账号&#xff0c;请登陆账号&#xff0c;无则注册账号之后再登陆&#xff1b; 注册坚果云账号 注册完坚果…
阅读更多...
求最短路径之BF算法

求最短路径之BF算法

介绍 全称Bellman-Ford算法&#xff0c;目的是求解有负权边的最短路径问题。 考虑环&#xff0c;根据环中边的边权之和的正负&#xff0c;将环分为零环、正环、负环。其中零环、正环不会影响最短路径的求解&#xff0c;而负环会影响最短路径的求解。 可用BF算法返回一个bool值…
阅读更多...
暗黑大气MT苹果CMS MT主题源码-PC版适用于苹果CMS V10

暗黑大气MT苹果CMS MT主题源码-PC版适用于苹果CMS V10

苹果CMS MT主题是一款多功能的主题&#xff0c;适用于苹果CMS V10的暗黑大气风格。 地 址 &#xff1a; runruncode.com/houtai/19704.html 初次使用说明&#xff1a; 在后台设置中&#xff0c;选择MT主题&#xff0c;并在模板目录中填写HTML。 后台地址为&#xff1a;MT主题…
阅读更多...
*JAVAWEB--maven*

*JAVAWEB--maven*

一:介绍: maven是一种专门管理以及构建JAVA项目的一个工具,maven屹立这么久也是因为其有三个非常好用的功能: 1.提供标准化的项目结构 比方说平时我们编写JAVA项目的时候,如果想把原本在eclipse当中编写的项目导入到IDEA当中进行使用,就会导致报错,因为这两个的项目结构并不一样…
阅读更多...
图神经网络实战——基于DeepWalk创建节点表示

图神经网络实战——基于DeepWalk创建节点表示

图神经网络实战——基于DeepWalk创建节点表示 0. 前言1. Word2Vec1.1 CBOW 与 skip-gram1.2 构建 skip-gram 模型1.3 skip-gram 模型1.4 实现 Word2Vec 模型 2. DeepWalk 和随机行走3. 实现 DeepWalk小结系列链接 0. 前言 DeepWalk 是机器学习 (machine learning, ML) 技术在图…
阅读更多...
[Angular 基础] - routing 路由(上)

[Angular 基础] - routing 路由(上)

[Angular 基础] - routing 路由(上) 之前部分 Angular 笔记&#xff1a; [Angular 基础] - 生命周期函数 [Angular 基础] - 自定义指令&#xff0c;深入学习 directive [Angular 基础] - service 服务 终于到 routing 了……这部分的内容比我想象的要复杂很多&#xff0c;果…
阅读更多...
LC打怪录 选择排序 215.Kth Largest Element in an Array

LC打怪录 选择排序 215.Kth Largest Element in an Array

题目链接&#xff1a;力扣 选择排序知识 设第一个元素为比较元素&#xff0c;依次和后面的元素比较&#xff0c;比较完所有元素并找到最小元素&#xff0c;记录最小元素下标&#xff0c;和第0个下表元素进行交换。在未排序区域中&#xff0c;重复上述操作&#xff0c;以此类推…
阅读更多...
力扣每日一题 用队列实现栈 模拟

力扣每日一题 用队列实现栈 模拟

Problem: 225. 用队列实现栈 文章目录 思路复杂度Code 思路 &#x1f468;‍&#x1f3eb; 力扣官解 辅助队列存栈顶元素主队列存逆序序列 复杂度 时间复杂度: 添加时间复杂度, 示例&#xff1a; O ( n ) O(n) O(n) 空间复杂度: 添加空间复杂度, 示例&#xff1a; O ( …
阅读更多...
js监听网页iframe里面元素变化其实就是监听iframe变化

js监听网页iframe里面元素变化其实就是监听iframe变化

想要监听网页里面iframe标签内容变化&#xff0c;需要通过监听网页dom元素变化&#xff0c;然后通过查询得到iframe标签&#xff0c;再通过iframe.contentWindow.document得到ifram内的document&#xff0c;然后再使用选择器得到body元素&#xff0c;有了body元素&#xff0c;就…
阅读更多...
2024年华为OD机试真题-贪吃的猴子-Python-OD统一考试（C卷）

2024年华为OD机试真题-贪吃的猴子-Python-OD统一考试（C卷）

题目描述： 一只贪吃的猴子，来到一个果园，发现许多串香蕉排成一行，每串香蕉上有若干根香蕉。每串香蕉的根数由数组numbers给出。猴子获取香蕉，每次都只能从行的开头或者末尾获取，并且只能获取N次，求猴子最多能获取多少根香蕉。 输入描述： 第一行为数组numbers的长度 第二…
阅读更多...
Java和JavaScript之间的主要区别与联系

Java和JavaScript之间的主要区别与联系

目录 概况 主要区别 联系 总结 概况 Java和JavaScript&#xff0c;尽管名字相似&#xff0c;但它们在编程世界中却扮演着截然不同的角色。Java&#xff0c;一种强类型、面向对象的编程语言&#xff0c;广泛应用于企业级应用和安卓应用开发。它的设计理念是一次编写&#x…
阅读更多...
使用协程库httpx并发请求

使用协程库httpx并发请求

httpx和aiohttp都是比较常用的异步请求库&#xff0c;当然requests多线程或requestsgevent也是不错的选择。 一个使用httpx进行并发请求的脚本如下&#xff1a; import functools import sys import timeimport anyio import httpxasync def fetch(client, results, index) -…
阅读更多...
详解 JavaScript 中的数组

详解 JavaScript 中的数组

详解 JavaScript 中的数组 创建数组 注&#xff1a;在JS中的数组不要求元素的类型&#xff0c;元素类型可以一样&#xff0c;也可以不一样 1.使用 new 关键字创建 let array new Array()2.使用字面量方式创建(常用) let array1 [1,2,3,"4"]获取数组元素 使用下…
阅读更多...
西安-腾讯云-Python面试经验--一面凉经

西安-腾讯云-Python面试经验--一面凉经

自我介绍手撕链表排序操作系统 a. 线程和进程区别 b. 线程安全 c. 如何保证线程安全 d. 线程崩溃&#xff0c;会不会影响所在的进程 e. 什么是守护进程&#xff0c;僵尸进程&#xff0c;孤儿进程 f. 如何产生一个守护进程 g. 如何避免僵尸进程或者孤儿进程redis a. 持久化方式有…
阅读更多...
【STK】手把手教你利用STK进行仿真-STK软件简介05 STK部分第三方分析模块介绍

【STK】手把手教你利用STK进行仿真-STK软件简介05 STK部分第三方分析模块介绍

1.导弹建模工具MMT 导弹建模工具MMT(Missile Modeling Tools)是STK在导弹分析领域的扩展分析应用，它是由四个独立的应用程序组成的相互支持与关联的系统，由第三方研究机构开发，能够与STK基本航天分析环境进行联合仿真分析。MMT主要用于导弹总体设计（包括弹道导弹、巡航导弹…
阅读更多...
python进阶：可迭代对象和迭代器

python进阶：可迭代对象和迭代器

一、Iterable&#xff08;可迭代对象&#xff09; 1、可迭代对象&#xff1a;能够进行迭代操作的对象。 可以理解为&#xff1a;能够使用for循环遍历的都是可迭代对象&#xff1b;**所有的可迭代对象&#xff0c;偶可以用内置函数iter转换为迭代器** 2、可迭代对象包括&…
阅读更多...
蓝桥杯题练习：平地起高楼

蓝桥杯题练习：平地起高楼

题目要求 function convertToTree(regions, rootId "0") {// TODO: 在这里写入具体的实现逻辑// 将平铺的结构转化为树状结构&#xff0c;并将 rootId 下的所有子节点数组返回// 如果不存在 rootId 下的子节点&#xff0c;则返回一个空数组}module.exports convert…
阅读更多...
网络防御保护——课堂笔记

网络防御保护——课堂笔记

一.内容安全 攻击可能只是一个点&#xff0c;防御需要全方面进行 IAE引擎 DFI和DPI技术 --- 深度检测技术 DPI ---深度包检测技术 ---主要针对完整的数据包&#xff08;数据包分片&#xff0c;分段需要重组&#xff09;&#xff0c;之后对数据包的内容进行识别。&#xff08;应…
阅读更多...
ifcplusplus 示例 函数中英文 对照分析以及流程图

ifcplusplus 示例 函数中英文 对照分析以及流程图

有需求&#xff0c;需要分析 ifc c渲染&#xff0c;分析完&#xff0c;有 230个函数&#xff0c;才能完成一个加载&#xff0c;3d加载真的是大工程&#xff01; 示例代码流程图 函数中英文对照表&#xff0c;方便 日后开发&#xff0c;整理思路顺畅&#xff01;&#xff01;&am…
阅读更多...
C++三级专项 digit函数

C++三级专项 digit函数

在程序中定义一函数dight(n,k),他能分离出整数n从右边数第k个数字。 输入 正整数n和k。 输出 一个数字。 输入样例 31859 3 输出样例 8解析&#xff1a;递归&#xff0c;详情看code. 不准直接抄&#xff01;&#xff01;&#xff01; #include <iostream> usin…
阅读更多...
最新文章

Copyright @ 2022~2023