使用 electron-vite-vue 构建 electron + vue3 项目并打包

news2024/11/17 3:27:24

文章目录

      • 一、使用 electron-vite-vue 构建 Vue3 项目
        • 1、创建项目并安装相关依赖
        • 2、安装依赖时报错 (operation not permitted)
      • 二、项目打包
        • 1、执行打包命令
        • 2、下载失败处理
        • 3、手动方式下载后,将文件放至指定路径下
        • 4、打包成功后
      • 参考资料

一、使用 electron-vite-vue 构建 Vue3 项目

1、创建项目并安装相关依赖

npm create electron-vite my-electron-app

安装相关依赖:

cd my-electron-app
yarn install

执行结果:

执行结果

项目目录结构:

项目目录结构

更多构建方法参见:https://electron-vite.github.io/guide/getting-started.html

2、安装依赖时报错 (operation not permitted)

报错详情:

Error: EPERM: operation not permitted, lstat 'C:\Users\asus\AppData\Local\Temp\electron-download-N1lOhL\electron-v30.0.2-win32-x64.zip'

尝试解决:

(1) 报错大概意思说的是没有权限,但是即便后续我使用管理员的方式运行依然出现该报错
(2) 修改 Temp 文件夹权限依然无效
(3) 按照网上的方法清除缓存 yarn cache clean,依然无效

解决方案:

后续查找相关资料,总结网友分享的经验,推测问题大概出在镜像源,尝试修改 .yarnrc 文件中的 electron_mirror 参数后成功下载相关依赖。

方法一:手动修改 .yarnrc 文件

.yarnrc 文件相关配置如下,应根据自身实际进行配置:

# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
# yarn lockfile v1

registry "https://registry.npmmirror.com"
"ELECTRON_MIRROR=https://registry.npmmirror.com/-/binary/electron/" true
cache-folder "D:\\Tools\\nvm\\Yarn\\yarn_cache"
disturl "https://registry.npmmirror.com/-/binary/node"
electron_mirror "https://registry.npmmirror.com/-/binary/electron/"
global-folder "D:\\Tools\\nvm\\Yarn\\yarn_dir"
lastUpdateCheck 1714810307218
prefix "D:\\Tools\\nvm\\Yarn\\yarn_bin"
strict-ssl true

注:该文件一般放在 C:\Users\用户名 下,并确保该文件未被隐藏。

方法二:命令行方式修改 .yarnrc 文件

配置镜像源:

yarn config set electron_mirror https://registry.npmmirror.com/-/binary/electron/

查看相关配置:

yarn config list

配置成功:

配置成功

注:如果命令行方式无效,可尝试方法一中的手动方式修改 .yarnrc 文件中的其他配置。

二、项目打包

1、执行打包命令

yarn run build

执行后将会下载多个文件,确保杀毒软件(如:火绒)、防火墙没有拦截相关下载请求。

下载出现报错:

下载出现报错

允许程序联网请求:

允许程序联网请求

2、下载失败处理

方法一:使用代理IP

国内大概率会因为网络问题出现下载失败的情况,此时使用代理IP可能可以解决网络相关问题。
(虽然不报错了,但是下载很慢≡(▔﹏▔)≡)

方法二:手动下载相关文件

执行打包命令后,控制台将会出现压缩包的下载地址,此时复制下载地址至浏览器进行下载,并将文件放至指定路径即可解决无法下载或下载速度慢的问题。

winCodeSign-2.6.0: https://github.com/electron-userland/electron-builder-binaries/releases/download/winCodeSign-2.6.0/winCodeSign-2.6.0.7z

nsis-3.0.4.1: https://github.com/electron-userland/electron-builder-binaries/releases/download/nsis-3.0.4.1/nsis-3.0.4.1.7z

nsis-resources-3.4.1: https://github.com/electron-userland/electron-builder-binaries/releases/download/nsis-resources-3.4.1/nsis-resources-3.4.1.7z

electron-v30.0.2-win32-x64: https://registry.npmmirror.com/-/binary/electron/30.0.2/electron-v30.0.2-win32-x64.zip

---------------

如若浏览器也无法下载,则使用网盘链接(30 day):https://pan.baidu.com/s/1hjmiNd-VnyZalfNKzgippg 提取码:9wwd

3、手动方式下载后,将文件放至指定路径下

(1) 将 electron-v30.0.2-win32-x64 压缩包放至 C:\Users\asus\AppData\Local\electron\Cache 路径下:

压缩包放入指定路径

(2) 在 C:\Users\asus\AppData\Local\electron-builder\Cache 路径下创建一个 winCodeSign 文件夹,将 winCodeSign-2.6.0 压缩包解压后放入。再创建一个 nsis 文件夹,将 nsis-3.0.4.1nsis-resources-3.4.1 压缩包解压后放入。

压缩包解压后放入指定路径

4、打包成功后

打包成功后


参考资料

  • https://www.jianshu.com/p/c5d48a58eeb3

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Google Chrome浏览器便携增强版 v124.0.6367.61

01 软件介绍 Google Chrome v124.0.6367.61,这一版本经过精心设计,集成了一系列的功能增强和关键补丁,旨在提升用户体验。其中,Chrome引入了便携性数据保存选项,优化了标签页及标签栏的操作机制。此外,它还…

【Linux 性能详解】CPU性能篇

目录 平均负载(Load Average) CPU上下文切换 进程上下文切换 线程上下文切换 中断上下文切换 中断 硬中断 软中断 CPU使用率 性能分析工具 平均负载(Load Average) 平均负载?这个词对很多人来说&#xff0c…

参数化建模系列-cityengine篇之:如何基于GIS数据快速构建道路三维建模模型

结合上期介绍的基于GIS数据自动化构建城市三维建筑模型,本期在上期的知识点上继续介绍道路模型的自动化构建方法。 数据获取 本期道路自动化建模从获取道路数据开始。 首先打开“QuickOSM”插件,在“Key”中选择“highway”;其次选择数据范…

AI智能化逐渐趋于成熟后,预测今后最吃香的开发职业

AI智能化正在成熟的路途中,这中间会有波折,但终有一天会来的,我相信等到了这一天,我们的开发效率和代码质量,将会大大不同,而我们的团队与个人,也会面临着很棒的体验。 那么在AI智能化真正趋于成…

正点原子[第二期]Linux之ARM(MX6U)裸机篇学习笔记-15-GPIO中断控制实验

前言: 本文是根据哔哩哔哩网站上“正点原子[第二期]Linux之ARM(MX6U)裸机篇”视频的学习笔记,在这里会记录下正点原子 I.MX6ULL 开发板的配套视频教程所作的实验和学习笔记内容。本文大量引用了正点原子教学视频和链接中的内容。…

Failed to build flash-attn:ERROR: Could not build wheels for flash-attn

安装 FlashAttention 的时候遇到报错: Failed to build flash-attn ERROR: Could not build wheels for flash-attn, which is required to install pyproject.toml-based projects可能是安装的版本与环境存在冲突吧,我的环境是: python 3.1…

域控安全 ----> Ntds.dit文件抓取

大家还记得内网渗透的初衷吗??? 找到域馆,拿下域控!! 拿下了域控就是拿下了整个域!! 但是大家知道拿下域环境之后应该怎么操作吗(灵魂拷问)??? …

【WEEK11】 【DAY3】员工管理系统第四部分【中文版】

2024.5.8 Wednesday 接上文【WEEK11】 【DAY2】员工管理系统第三部分【中文版】 目录 10.5.展示员工列表10.5.1.修改dashboard.html10.5.2.新建EmployeeController.java10.5.3.新建emp文件夹,将list.html移动至该文件夹10.5.4.重启并检查10.5.5.提取公共页面&#x…

钉钉开放平台创建企业内部H5微应用或者小程序

前言: 在当今企业数字化转型的浪潮中,创建企业内部H5微应用或小程序已成为提升工作效率和促进内部沟通的重要举措。发话不多说本文将介绍如何利用钉钉平台快速创建这些应用,让企业内部的工作更加便捷高效。 步骤 1.在浏览器打开链接…

旧物回收小程序开发:打造绿色生活,共筑美好未来

随着环保意识的逐渐增强,我们越来越意识到旧物回收的重要性。为了响应这一趋势,我们精心研发了一款旧物回收小程序,旨在通过科技的力量,让每个人都能够轻松参与到旧物回收的行动中来,共同为地球环保贡献一份力量。 一…

【C++】Visual Studio 2019 给 C++ 文件添加头部注释说明

使用代码片段管理器&#xff0c;添加快捷插入代码文件说明 1. 效果 2. header.snippet 新建 header.snippet 文件&#xff0c;存放到某个文件夹 内容&#xff0c;自行更新 快捷名称&#xff0c;修改 Header 里面内容注释内容&#xff0c;修改 Code 里面内容 <?xml ver…

利用函数视图实现精细化管控:DolphinDB 非标权限管理指南

1. 前言 DolphinDB 提供的用户权限管理功能管控的最小粒度是表级别&#xff0c;无法设置小于表粒度的数据访问权限管控&#xff0c;如限制用户仅能访问表中某些行或某些列的数据。为了满足客户更精细的权限管控需求&#xff0c;我们编写了本教程。 2. 概述 函数视图是封装了…

vue打包报错:CALL_AND_RETRY_LAST Allocation failed - JavaScript heap out of memory

前言&#xff1a; vue项目&#xff0c;打包报错&#xff1a;CALL_AND_RETRY_LAST Allocation failed - JavaScript heap out of memory 报错现象&#xff1a; 报错原因&#xff1a; 这个错误是由Node.js在尝试分配内存时因为系统的可用内存不足而发生的。"JavaScript heap…

远动屏柜作用

远动屏柜作用 远动屏柜是电力系统中的重要设备&#xff0c;主要用于实现远方监控和遥控功能&#xff0c;确保电力系统的安全运行。它主要由远动装置、通讯管理机、交换机、调制解调器、GPS对时装置、数字通道防雷器、模拟通道防雷器、插线板、空气开关、屏柜及附件等组成。 远…

英语学习笔记7——Are you a teacher?

Are you a teacher? 你是教师吗&#xff1f; 词汇 Vocabulary name /neɪm/ n. 名字&#xff0c;名声 英文名字构成&#xff1a; 名 字 姓      given name family name  也叫做&#xff1a;first name last name      例&#xff1a;Yanyan Gao 例句&#xff1…

【prometheus】Pushgateway安装和使用

目录 一、Pushgateway概述 1.1 Pushgateway简介 1.2 Pushgateway优点 1.3 pushgateway缺点 二、测试环境 三、安装测试 3.1 pushgateway安装 3.2 prometheus添加pushgateway 3.3 推送指定的数据格式到pushgateway 1.添加单条数据 2.添加复杂数据 3.SDk-prometheus-…

CISCN 2023 初赛

Web unzip 文件上传页面 upload.php页面源码显示了出来 <?php error_reporting(0); highlight_file(__FILE__);$finfo finfo_open(FILEINFO_MIME_TYPE); if (finfo_file($finfo, $_FILES["file"]["tmp_name"]) application/zip){exec(cd /tmp &am…

致力于双碳减排服务——安科瑞推出碳电表

1. 概述 全球首个“碳关税”——欧盟碳边境调节机制于2023年10月启动试运行。自此&#xff0c;首批纳入欧盟碳边境调节机制的6个行业相关产品在出口至欧盟国家时需提供碳排放数据&#xff0c;这会倒逼国内制造业企业加快开展产品碳足迹核查的步伐。以钢铁行业为例&#xff0c;…

进口家装水管十大品牌哪家好,弗锐德为您推荐进口家装水管领先十大品牌

水管作为家装隐蔽工程之一&#xff0c;选对一款优质的水管是至关重要的&#xff0c;毕竟好的水管能够保证家庭后续几十年的用水安全和健康。今天&#xff0c;小编就和大家说说进口家装水管十大品牌哪家好&#xff1f; 目前国内进口家装水管具有知名度和消费者认可的品牌有&…

Linux网络编程(三)IO复用三 epoll系统调用

三、epoll系统调用 epoll是Linux特有的I/O复用函数。它在实现和使用上与select、poll有很大差异。 epoll使用一组函数来完成任务&#xff0c;而不是单个函数epoll把用户关心的文件描述符上的事件放在内核里的一个事件表中&#xff0c;从而无须像select和poll那样每次调用都要…