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;果…
阅读更多...
力扣每日一题 用队列实现栈 模拟

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

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;就…
阅读更多...
Java和JavaScript之间的主要区别与联系

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

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

详解 JavaScript 中的数组

详解 JavaScript 中的数组 创建数组 注&#xff1a;在JS中的数组不要求元素的类型&#xff0c;元素类型可以一样&#xff0c;也可以不一样 1.使用 new 关键字创建 let array new Array()2.使用字面量方式创建(常用) let array1 [1,2,3,"4"]获取数组元素 使用下…
阅读更多...
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语言——指针的进阶——第1篇——（第26篇）

C语言——指针的进阶——第1篇——（第26篇）

坚持就是胜利 文章目录 一、字符指针1、面试题 二、指针数组三、数组指针1、数组指针的定义2、&数组名 VS 数组名3、数组指针的使用&#xff08;1&#xff09;二维数组传参&#xff0c;形参是 二维数组 的形式&#xff08;2&#xff09;二维数组传参&#xff0c;形参是 指针…
阅读更多...
【RT-Thread应用笔记】英飞凌PSoC 62 + CYW43012 WiFi延迟和带宽测试

【RT-Thread应用笔记】英飞凌PSoC 62 + CYW43012 WiFi延迟和带宽测试

文章目录 一、安装SDK二、创建项目三、编译下载3.1 编译代码3.2 下载程序 四、WiFi测试4.1 扫描测试4.2 连接测试 五、延迟测试5.1 ping百度5.2 ping路由器 六、带宽测试6.1 添加netutils软件包6.2 iperf命令参数6.3 PC端的iperf6.4 iperf测试准备工作6.5 进行iperf带宽测试6.6…
阅读更多...
Muduo库编译学习(1)

Muduo库编译学习(1)

1.muduo库简介 muduo是由Google大佬陈硕开发&#xff0c;是一个基于非阻塞IO和事件驱动的现代C网络库&#xff0c;原生支持one loop per thread这种IO模型&#xff0c;该库只支持Linux系统&#xff0c;网上大佬对其褒贬不一&#xff0c;作为小白用来学习就无可厚非了。 git仓库…
阅读更多...
b站小土堆pytorch学习记录——P14 torchvision中的数据集使用

b站小土堆pytorch学习记录——P14 torchvision中的数据集使用

文章目录 一、前置知识如何查看torchvision的数据集 二、代码&#xff08;附注释&#xff09;及运行结果 一、前置知识 如何查看torchvision的数据集 &#xff08;1&#xff09;打开官网 https://pytorch.org/ pytorch官网 &#xff08;2&#xff09;打开torchvision 在Do…
阅读更多...
Unity游戏输入系统（新版+旧版）

Unity游戏输入系统（新版+旧版）

使用新版还是旧版 旧版 using System.Collections; using System.Collections.Generic; using UnityEngine;public class c5 : MonoBehaviour {void Start(){}void Update(){// 注意要在游戏中 点鼠标键盘进行测试// 鼠标// 0左键 1右键 2滚轮if (Input.GetMouseButtonDown(0)…
阅读更多...
【javaSE-语法】lambda表达式

【javaSE-语法】lambda表达式

【javaSE-语法】lambda表达式 1. 先回忆一下&#xff1a;1.1 接口不能直接通过关键字new进行实例化1.2 函数式接口1.3 匿名内部类1.31 匿名内部类在代码中长啥样&#xff1f;1.32 构造一个新的对象与构造一个扩展了某类的匿名内部类的对象&#xff0c;两者有什么区别&#xff1…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023