vue2结合electron开发桌面端应用

一、Electron是什么?

Electron是一个使用 JavaScript、HTML 和 CSS 构建桌面应用程序的框架。 嵌入 Chromium 和 Node.js 到 二进制的 Electron 。允许您保持一个 JavaScript 代码代码库并创建可在Windows、macOS和Linux上运行的跨平台应用 。

Electron 经常与 Chromium 一起发布主版本。 本文档侧重于发布排期和版本支持政策。 要更深入地了解我们的git 分支和Electron如何使用语义版本, 请查看我们的 Electron 版本文档。 

安装Electron时注意要选择使用其支持的node版本的开发环境。

时间表​

ElectronAlpha测试版稳定版EOLChromeNode支持
29.0.02023-Dec-072024年3月24日2024年2月20日2024年8月20日M122v18.19
28.0.02023年11月10日2023年11月06日2023年12月5日2024年6月11日M120v18.18
27.0.02023年8月17日2023年9月13日2023年10月10日2024年4月16日M118v18.17
26.0.02023年6月01日2023年6月27日2023年8月15日2024年2月20日M116v18.16
25.0.02023年4月10日2023年5月02日2023年5月30日2023年12月5日M114v18.15🚫
24.0.02023年2月09日2023年3月07日2023年4月04日2023年10月10日M112v18.14🚫
23.0.02022年12月1日2023年3月10日2023年2月7日2023年8月15日M110v18.12🚫
22.0.02022年9月29日2022年10月25日2022年11月29日2023年10月10日M108v16.17🚫
21.0.02022年8月4日2022年8月30日2022年9月27日2023年4月04日M106v16.16🚫
20.0.02022年5月26日2022年6月21日2022年8月2日2023年2月7日M104v16.15🚫
19.0.02022年3月31日2022年4月26日2022年5月24日2022年11月29日M102v16.14🚫
18.0.02022年2月3日2022年3月3日2022年3月29日2022年9月27日M100v16.13🚫
17.0.02021年11月18日2022年1月6日2022年2月1日2022年8月2日M98v16.13🚫
16.0.02021年9月23日2021年10月20日2021年11月16日2022年5月24日M96v16.9🚫
15.0.02021年7月20日2021年9月01日2021年9月21日2022年5月24日M94v16.5🚫
14.0.0--2021年5月27日2021年8月31日2022年3月29日M93v14.17🚫
13.0.0--2021年3月4日2021年5月25日2022年2月1日M91v14.16🚫
12.0.0--2020年11月19日2021年3月2日2021年11月16日M89v14.16🚫
11.0.0--2020年8月27日2020年11月17日2021年8月31日M87v12.18🚫
10.0.0--2020年5月21日2020年8月25日2021年5月25日M85v12.16🚫
9.0.0--2020年2月6日2020年5月19日2021年3月2日M83v12.14🚫
8.0.0--2019年10月24日2020年2月4日2020年11月17日M80v12.13🚫
7.0.0--2019年8月1日2019年10月22日2020年8月25日M78v12.8🚫
6.0.0--2019年4月25日2019年7月30日2020年5月19日M76v12.14.0🚫
5.0.0--2019年3月22日2019年4月23日2020年2月4日M73v12.0🚫
4.0.0--2018年10月11日2018年2月1日2019年10月22日M69v10.11🚫
3.0.0--2018年6月21日2018年9月18日2019年7月30日M66v10.2🚫
2.0.0--2018年2月1日2018年5月01日2019年4月23日M61v8.9🚫

二、 解决npm淘宝镜像到期问题 

报错信息:
Could not retrieve https://npm.taobao.org/mirrors/node/latest/SHASUMS256.txt.
Get "https://npm.taobao.org/mirrors/node/latest/SHASUMS256.txt": x509: certificate has expired or is not yet valid:

解决方法: 

<1>.如果使用nvm做node的版本管理 ,则也需要更换nvm仓库镜像地址,更换方法如下:

node_mirror: https://npmmirror.com/mirrors/node/
npm_mirror: https://npmmirror.com/mirrors/npm/

 <2>.切换npm镜像仓库--如果你是将npm官方镜像改成了淘宝镜像,则需要按下面步骤去手动更新。

// 1. 清空缓存
npm cache clean --force// 2. 切换新源
npm config set registry https://registry.npmmirror.com// 3. 检测是否切换成功
npm config get registry

<3>.更换成cnpm淘宝命令工具cnpm的使用方式:

// 1. 安装cnpm
npm install -g cnpm --registry=https://registry.npmmirror.com// 2. 检测是否安装成功
cnpm -v

缓存位置

window下的缓存位置(npm全局位置):
user\xxx\AppData\Roaming\npm-cache当中的_cacache文件夹

清理缓存 

// 强制删除缓存
npm cache clean -f
// 无论在项目中执行命令,还是在全局执行命令
// 都会去删除当前npm的所有缓存内容,即是删除_cacache文件夹

 应用场景

// 有时npm install因为缓存导致的报错,需按如下步骤操作
1、删除node_module文件夹
2、npm cache clear -f
3、npm instaall

三、npm安装Electron 项目失败报错问题和解决办法 

在这一步就跟定住了一样,一动不动,时间长了就报错 

 解决办法

1、打开npm的配置文件

npm config edit

 2、在打开的配置文件空白处将下面几个配置添加上去,注意如果有原有的这几项配置,就修改

registry=https://registry.npmmirror.com
electron_mirror=https://cdn.npmmirror.com/binaries/electron/
electron_builder_binaries_mirror=https://npmmirror.com/mirrors/electron-builder-binaries/

或者

注:在安装 electron 的过程中会根据开发者的当前的操作系统去下载 electron 的二进制包,在下载过程中由于网络的原因会导致下载失败,对应的解决方案是指定国内的镜像,如淘宝镜像。
#指定 npm 仓库地址

 

 npm config set registry https://registry.np mmirror . com 

#指定 electron 二进制包的镜像地址
 

 npm config set ELECTRON _ MIRROR -"https://npmmirror.con/mirrors/electron/"

检测 npm 仓库和 electron 镜像地址是否设置成功
 

 npm config list 

# lotjol @ localhost in ~[12:14:17]
 npm config list 
" user " config from / Users / lotjol /. npmrc 
 ELECTRON _ MIRROR ="https://npmmirror.com/mirrors/electron/"
 home ="https://npm.taobao.org"
 registry ="https://registry.np mmirror . com /"

 

3、然后关闭该窗口,重启命令行,删除node_modules文件夹,并执行下面命令清除缓存,再重新安装依赖

npm cache clean --force

4.安装electron测试

四、安装 electron-builder报错解决办法

报错原因:

由于 vue add 之前使用的淘宝源,现在淘宝源证书到期,所以报错。

解决办法: 

修改 vue 的设置,在c盘用户目录下的 vue.rc 文件中修改为false,使得之后的vue add 不再走淘宝镜像即可。

五、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 

 参考:

1.解决npm淘宝镜像到期问题_npm淘宝镜像过期了怎么办-CSDN博客

2.npm---缓存_npm cache-CSDN博客 

3.nvm,nrm,npx的使用(淘宝源证书到期解决) - 知乎

4.vue_electron问题总结_vue add electron-builder electron 版本问题-CSDN博客

5.npm安装Electron 项目失败报错问题和解决办法_npm install electron报错-CSDN博客

6.【Electron+Vue】Error: error:0308010C:digital envelope routines::unsupported_background.js from terser error: error:0308010c:di-CSDN博客

7.解决electron+vue项目起始加载慢的问题_electron嵌入的网页加载太慢-CSDN博客 

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

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

相关文章

MySQL 常用优化方式

MySQL 常用优化方式 sql 书写顺序与执行顺序SQL设计优化使用索引避免索引失效分析慢查询合理使用子查询和临时表列相关使用 日常SQL优化场景limit语句隐式类型转换嵌套子查询混合排序查询重写 sql 书写顺序与执行顺序 (7) SELECT (8) DISTINCT <select_list> (1) FROM &…

CKKS EXPLAINED: PART 1, VANILLA ENCODING AND DECODING

CKKS EXPLAINED: PART 1, VANILLA ENCODING AND DECODING Introduction 同态加密是一个有前途的领域&#xff0c;它允许在加密数据上进行计算。一篇名为“同态加密是什么”的博文提供了广泛的解释&#xff0c;说明了同态加密的含义以及这一研究领域的重要性。 在本系列文章中…

排序(3)——直接选择排序

目录 直接选择排序 基本思想 整体思路&#xff08;升序&#xff09; 单趟 多趟 代码实现 特性总结 直接选择排序 基本思想 每一次从待排序的数据元素中选出最小&#xff08;或最大&#xff09;的一个元素&#xff0c;存放在序列的起始位置&#xff0c;直到全部待排序的…

使用OpenCV和mediapipe实现手部信息抓取

目录 运行效果 挨行解读 &#xff08;1&#xff09;初始化MediaPipe Hand模块 &#xff08;2&#xff09;打开摄像头 &#xff08;3&#xff09;初始化计时器 &#xff08;4&#xff09;开始程序主题部分 &#xff08;5&#xff09;读取视频帧 &#xff08;6&#xff09…

美团分布式 ID 框架 Leaf 介绍和使用

一、Leaf 在当今日益数字化的世界里&#xff0c;软件系统的开发已经成为了几乎所有行业的核心。然而&#xff0c;随着应用程序的规模不断扩大&#xff0c;以及对性能和可扩展性的需求不断增加&#xff0c;传统的软件架构和设计模式也在不断地面临挑战。其中一个主要挑战就是如…

LeetCode---386周赛

题目列表 3046. 分割数组 3047. 求交集区域内的最大正方形面积 3048. 标记所有下标的最早秒数 I 3049. 标记所有下标的最早秒数 II 一、分割数组 这题简单的思维题&#xff0c;要想将数组分为两个数组&#xff0c;且分出的两个数组中数字不会重复&#xff0c;很显然一个数…

2024第二次培训:win11系统下使用nginx、JDK、mysql搭建基于vue2、java前后端分离的web应用运行环境

一.背景 公司安排了带徒弟的任务&#xff0c;给培训写点材料。前面分开介绍了mysql、jdk、nginx的安装&#xff0c;都只是零星的介绍&#xff0c;只能算零散的学习。学习了有什么用呢&#xff1f;能解决什么问题&#xff1f;能完成什么工作&#xff1f; 今天我们要用之前的几篇…

高中数学:分式函数值域的求法

一、求值域的两种基本思路 1、根据函数图像和定义域求出值域。 难点&#xff1a;画出函数图像 2、研究函数单调性和定义域求出值域。 本篇主要讲一下&#xff0c;画图法求值域 二、函数图像画法 高中所学的分式函数&#xff0c;基本由反比例函数平移得到。 复杂分式函数图…

web漏洞与规避

文章目录 一、XSS 跨站脚本攻击1.1 XSS攻击的主要类型反射型XSS存储型XSSDOM型XSS 1.2 前端开发如何应对XSS 二、CSRF 跨站请求伪造2.1 CSRF例子2.2 前端开发如何应对CSRF 三、SQL 注入3.1 前端如何防御SQL注入 四、前端如何使用CSP 一、XSS 跨站脚本攻击 攻击者通过在受害者的…

Day12:信息打点-Web应用源码泄漏开源闭源指纹识别GITSVNDS备份

目录 开源-CMS指纹识别源码获取方式 闭源-习惯&配置&特性等获取方式 闭源-托管资产平台资源搜索监控 思维导图 章节点 Web&#xff1a;语言/CMS/中间件/数据库/系统/WAF等 系统&#xff1a;操作系统/端口服务/网络环境/防火墙等 应用&#xff1a;APP对象/API接口/微…

【Python】进阶学习:pandas--如何根据指定条件筛选数据

【Python】进阶学习&#xff1a;pandas–如何根据指定条件筛选数据 &#x1f308; 个人主页&#xff1a;高斯小哥 &#x1f525; 高质量专栏&#xff1a;Matplotlib之旅&#xff1a;零基础精通数据可视化、Python基础【高质量合集】、PyTorch零基础入门教程&#x1f448; 希望…

synchrosized 的可重入特性、死锁、哲学家就餐问题以及解决死锁的方法等干货

文章目录 &#x1f490;synchrosized的可重入特性关于死锁&#xff1a;哲学家就餐问题&#x1f4a1;如何避免/解决死锁 &#x1f490;synchrosized的可重入特性 可重入特性&#xff1a;当一个线程针对一个对象同时加锁多次&#xff0c;不会构成死锁&#xff0c;这样的特性称为…