0
点赞
收藏
分享

微信扫一扫

VUE从0到1创建项目及基本路由、页面配置

爱做梦的老巫婆 03-03 08:30 阅读 5

一、Electron是什么?

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

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

时间表​

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淘宝镜像到期问题 

解决方法: 

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

举报

相关推荐

0 条评论