一、Electron是什么?
Electron是一个使用 JavaScript、HTML 和 CSS 构建桌面应用程序的框架。 嵌入 Chromium 和 Node.js 到 二进制的 Electron 。允许您保持一个 JavaScript 代码代码库并创建可在Windows、macOS和Linux上运行的跨平台应用 。
Electron 经常与 Chromium 一起发布主版本。 本文档侧重于发布排期和版本支持政策。 要更深入地了解我们的git 分支和Electron如何使用语义版本, 请查看我们的 Electron 版本文档。
时间表
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淘宝镜像到期问题
解决方法:
<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 项目失败报错问题和解决办法
在这一步就跟定住了一样,一动不动,时间长了就报错
四、安装 electron-builder报错解决办法
五、vue2结合electron开发跨平台应用(桌面端应用)
1.确定nodejs和electron的版本号
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
再次启动测试
很快就启动成功了!
6.打包electron项目
npm run electron:build
报错提示
解决方案
打开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 提供程序,从而解决构建过程中的报错问题。
再次打包测试
可以正常打包,不报错了。
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博客