vue2结合electron开发桌面端应用

一、Electron是什么？

Electron是一个使用 JavaScript、HTML 和 CSS 构建桌面应用程序的框架。 嵌入 Chromium 和 Node.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仓库镜像地址，更换方法如下：

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博客