vue2结合electron开发桌面端应用

一、Electron是什么?

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

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

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

时间表

Electron Alpha 测试版 稳定版 EOL Chrome Node 支持
29.0.0 2023-Dec-07 2024年3月24日 2024年2月20日 2024年8月20日 M122 v18.19
28.0.0 2023年11月10日 2023年11月06日 2023年12月5日 2024年6月11日 M120 v18.18
27.0.0 2023年8月17日 2023年9月13日 2023年10月10日 2024年4月16日 M118 v18.17
26.0.0 2023年6月01日 2023年6月27日 2023年8月15日 2024年2月20日 M116 v18.16
25.0.0 2023年4月10日 2023年5月02日 2023年5月30日 2023年12月5日 M114 v18.15 🚫
24.0.0 2023年2月09日 2023年3月07日 2023年4月04日 2023年10月10日 M112 v18.14 🚫
23.0.0 2022年12月1日 2023年3月10日 2023年2月7日 2023年8月15日 M110 v18.12 🚫
22.0.0 2022年9月29日 2022年10月25日 2022年11月29日 2023年10月10日 M108 v16.17 🚫
21.0.0 2022年8月4日 2022年8月30日 2022年9月27日 2023年4月04日 M106 v16.16 🚫
20.0.0 2022年5月26日 2022年6月21日 2022年8月2日 2023年2月7日 M104 v16.15 🚫
19.0.0 2022年3月31日 2022年4月26日 2022年5月24日 2022年11月29日 M102 v16.14 🚫
18.0.0 2022年2月3日 2022年3月3日 2022年3月29日 2022年9月27日 M100 v16.13 🚫
17.0.0 2021年11月18日 2022年1月6日 2022年2月1日 2022年8月2日 M98 v16.13 🚫
16.0.0 2021年9月23日 2021年10月20日 2021年11月16日 2022年5月24日 M96 v16.9 🚫
15.0.0 2021年7月20日 2021年9月01日 2021年9月21日 2022年5月24日 M94 v16.5 🚫
14.0.0 -- 2021年5月27日 2021年8月31日 2022年3月29日 M93 v14.17 🚫
13.0.0 -- 2021年3月4日 2021年5月25日 2022年2月1日 M91 v14.16 🚫
12.0.0 -- 2020年11月19日 2021年3月2日 2021年11月16日 M89 v14.16 🚫
11.0.0 -- 2020年8月27日 2020年11月17日 2021年8月31日 M87 v12.18 🚫
10.0.0 -- 2020年5月21日 2020年8月25日 2021年5月25日 M85 v12.16 🚫
9.0.0 -- 2020年2月6日 2020年5月19日 2021年3月2日 M83 v12.14 🚫
8.0.0 -- 2019年10月24日 2020年2月4日 2020年11月17日 M80 v12.13 🚫
7.0.0 -- 2019年8月1日 2019年10月22日 2020年8月25日 M78 v12.8 🚫
6.0.0 -- 2019年4月25日 2019年7月30日 2020年5月19日 M76 v12.14.0 🚫
5.0.0 -- 2019年3月22日 2019年4月23日 2020年2月4日 M73 v12.0 🚫
4.0.0 -- 2018年10月11日 2018年2月1日 2019年10月22日 M69 v10.11 🚫
3.0.0 -- 2018年6月21日 2018年9月18日 2019年7月30日 M66 v10.2 🚫
2.0.0 -- 2018年2月1日 2018年5月01日 2019年4月23日 M61 v8.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仓库镜像地址,更换方法如下:

javascript 复制代码
node_mirror: https://npmmirror.com/mirrors/node/
npm_mirror: https://npmmirror.com/mirrors/npm/

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

javascript 复制代码
// 1. 清空缓存
npm cache clean --force

// 2. 切换新源
npm config set registry https://registry.npmmirror.com

// 3. 检测是否切换成功
npm config get registry

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

javascript 复制代码
// 1. 安装cnpm
npm install -g cnpm --registry=https://registry.npmmirror.com

// 2. 检测是否安装成功
cnpm -v

缓存位置

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

清理缓存

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

应用场景

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

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

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

解决办法

1、打开npm的配置文件

javascript 复制代码
npm config edit

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

javascript 复制代码
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 仓库地址

javascript 复制代码
 npm config set registry https://registry.np mmirror . com 

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

javascript 复制代码
 npm config set ELECTRON _ MIRROR -"https://npmmirror.con/mirrors/electron/"

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

javascript 复制代码
 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文件夹,并执行下面命令清除缓存,再重新安装依赖

javascript 复制代码
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项目

javascript 复制代码
vue create elctron29.0.0_node18.19.0_vuecli5.0.8_vue2

3.安装electron

javascript 复制代码
npm install electron@29.0.0 --save-dev

4.安装electron-builder

javascript 复制代码
vue add electron-builder

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

5.启动electron项目

javascript 复制代码
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项目

javascript 复制代码
 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,找到

javascript 复制代码
  "scripts": {
    "electron:build": "vue-cli-service electron:build",
  },

改为

javascript 复制代码
  "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博客

相关推荐
bysking19 分钟前
【前端-组件】定义行分组的表格表单实现-bysking
前端·react.js
王哲晓35 分钟前
第三十章 章节练习商品列表组件封装
前端·javascript·vue.js
fg_41138 分钟前
无网络安装ionic和运行
前端·npm
理想不理想v39 分钟前
‌Vue 3相比Vue 2的主要改进‌?
前端·javascript·vue.js·面试
酷酷的阿云1 小时前
不用ECharts!从0到1徒手撸一个Vue3柱状图
前端·javascript·vue.js
微信:137971205871 小时前
web端手机录音
前端
齐 飞1 小时前
MongoDB笔记01-概念与安装
前端·数据库·笔记·后端·mongodb
神仙别闹1 小时前
基于tensorflow和flask的本地图片库web图片搜索引擎
前端·flask·tensorflow
aPurpleBerry2 小时前
JS常用数组方法 reduce filter find forEach
javascript
GIS程序媛—椰子2 小时前
【Vue 全家桶】7、Vue UI组件库(更新中)
前端·vue.js