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

文章目录

      • 一、使用 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.mfbz.cn/a/597232.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

C++证道之路第十八章探讨C++新标准

一、复习前面介绍过的C11新功能 1、新类型 C11新增了类型long long 和unsigned long long 新增了类型char16_t 和char32_t 2、统一的初始化 C11扩大了用大括号括起的列表(初始化列表)的使用范围,使其可以用于所有内置类型和用户定义的类…

JavaScript练习

1.冒泡排序 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>Document</title> </head>…

设备树与/sys/bus/platform/devices与/sys/devices目录关系

设备树与sys/bus/platform/devices sysfs文件系统中/sys/bus/platform/devices下的设备是由设备树生成&#xff0c; 根节点下有compatible的子节点都会在/bus/platform/devices生成节点 总线 I2C、SPI 等控制器会在/bus/platform/devices生成节点 总线 I2C、SPI 节点下的子节点…

ESP8266做主机 手机网络助手为从机

ATCIFSR查看地址&#xff0c;一般ESP8266 为192.168.4.1 在手机上下载网络调试助手&#xff0c;打开TCP客户端 创建后192.168.4.1 端口8089然后连接ESP8266热点。 ESP向手机发数据前先发送要发几个数据ATCIPSEND0,8表示发8个&#xff0c;然后再发8个数 上面创建好热点后&…

多组间比较散点图+误差棒(自备)

目录 数据 计算四分位值 作图 数据 rm(list ls()) library(ggplot2) library(dplyr) library(ggpubr) library(reshape2) library(tidyverse)data <- iris##鸢尾花数据集 dat <- data[,c(5,1)]#单个数据进行分析 计算四分位值 #根据分组计算四分位及中位数 dat1 …

ubuntu 安装单节点HBase

下载HBase mkdir -p /home/ellis/HBase/ cd /home/ellis/HBase/ wget https://downloads.apache.org/hbase/2.5.8/hbase-2.5.8-bin.tar.gz tar -xvf hbase-2.5.8-bin.tar.gz安装java jdk sudo apt install openjdk-11-jdksudo vim /etc/profileexport JAVA_HOME/usr/lib/jvm/…

短信清空了!华为手机短信删除了怎么恢复?

“有没有人知道这是怎么回事呀&#xff0c;原先有一千多条未读一直放着没管&#xff0c;昨天根本没打开短信这个软件&#xff0c;今晚突然发现只剩一条了&#xff0c;是华为手机自动清理了吗&#xff01;到底该怎么恢复呀&#xff1f;我真崩溃&#xff01;” 在日常生活中&…

面试集中营—Redis架构篇

一、Redis到底是多线程还是单线程 1、redis6.0版本之前的单线程&#xff0c;是指网络请求I/O与数据的读写是由一个线程完成的&#xff1b; 2、redis6.0版本升级成了多线程&#xff0c;指的是在网络请求I/O阶段应用的多线程技术&#xff1b;而键值对的读写还是由单线程完成的。所…

Vitis HLS 学习笔记--AXI_STREAM_TO_MASTER

目录 1. 简介 2. 示例 2.1 示例功能介绍 2.2 示例代码 2.3 顶层函数解释 2.4 综合报告&#xff08;HW Interfaces&#xff09; 2.5 关于TKEEP和TSTRB 2.6 综合报告&#xff08;SW I/O Information&#xff09; 3. 总结 1. 简介 本文通过“<Examples>/Interface…

pandas入门

pandas入门 一、pandas简介1.1 pandas介绍1.2 pandas的基本功能 二、pandas快速入门2.1 读取数据2.2 验证数据2.3 建立索引2.4 数据抽取2.4.1 选择列2.4.2 选择行2.4.3 指定行和列 2.5 排序2.6 分组聚合2.7 数据转置2.8 增加列2.9 统计分析 一、pandas简介 1.1 pandas介绍 pa…

Qt QInputDialog详解

1.简介 QInputDialog是一个对话框类&#xff0c;用于从用户那里获取一个单一的值。这个值可以是字符串、数字、或者一个列表中的选项。QInputDialog提供了一个方便的方式来快速创建一个输入对话框&#xff0c;无需自己从头开始构建。 QInputDialog支持多种输入类型&#xff1…

【备战蓝桥杯】第十四届蓝桥杯省赛C/C++ B组真题及题解

参加了两届蓝桥杯以及做过了往年的真题我的直观感受是蓝桥杯不再那么“暴力”了&#xff0c;而是逐渐趋向DP和搜素图论方面了。下面是第十四届蓝桥杯省赛C/C B组真题及题解&#xff0c;希望对阅读的你有所帮助。 目录 题目试题A&#xff1a;日期统计试题B&#xff1a;01 串的熵…

Redis学习3——Redis应用之缓存

引言 缓存的意义 Redis作为一个NoSql数据库&#xff0c;被广泛的当作缓存数据库使用&#xff0c;所谓缓存&#xff0c;就是数据交换的缓冲区。使用缓存的具体原因有&#xff1a; 缓存数据存储于代码中&#xff0c;而代码运行在内存中&#xff0c;内存的读写性能远高于磁盘&a…

前后端功能实现——查询所有

目录 1、需求 2、步骤 1&#xff09;创建模块 引入坐标 2&#xff09;创建结构 实现三层架构 3&#xff09;创建表 brand 4&#xff09;创建实体类 Brand 5&#xff09;创建MyBatis配置文件 6&#xff09;创建映射文件 7&#xff09;创建工具类 SqlSessionFactoryUti…

基于FPGA的数字信号处理(9)--定点数据的两种溢出处理模式:饱和(Saturate)和绕回(Wrap)

1、前言 在逻辑设计中&#xff0c;为了保证运算结果的正确性&#xff0c;常常需要对结果的位宽进行扩展。比如2个3bits的无符号数相加&#xff0c;只有将结果设定为4bits&#xff0c;才能保证结果一定是正确的。不然&#xff0c;某些情况如77 14(1110)&#xff0c;如果结果只…

部署YUM仓库以及NFS共享服务

YUM仓库部署 一.YUM概述 YUM仓库源是一种软件包管理工具&#xff0c;用于在Linux系统上安装、更新和删除软件包。YUM仓库源包含了软件包的元数据信息和实际的软件包文件。用户可以通过配置YUM仓库源&#xff0c;从中下载和安装软件包。 常见的YUM仓库源包括&#xff1a; 本…

【一起深度吧!】24/05/03

池化层 最大池化和平均层化&#xff1a;最大池化&#xff1a;平均池化&#xff1a; 从零实现池化层&#xff1a; 最大池化和平均层化&#xff1a; 池化的作用: 1、可以降维&#xff0c;减少要 训练的参数。 2、提取特征&#xff0c;也就是保留主要的特征&#xff0c;过滤掉不重…

7-zip下载、安装

7-Zip 官方中文网站 (sparanoid.com) 7-Zip - 程序下载 (sparanoid.com)

Unity 性能优化之图片优化(八)

提示&#xff1a;仅供参考&#xff0c;有误之处&#xff0c;麻烦大佬指出&#xff0c;不胜感激&#xff01; 文章目录 前言一、可以提前和美术商量的事1.避免内存浪费&#xff08;UI图片&#xff0c;不是贴图&#xff09;2.提升图片性能 二、图片优化1.图片Max Size修改&#x…

Eayswoole 报错 crontab info is abnormal

在执行一个指定的定时任务时 如 php easyswoole crontab show 报错 crontab info is abnormal 如下图所示&#xff1a; 查询了半天 修改了如下配置&#xff1a; 旧的 // 创建定时任务实例 $crontab new \EasySwoole\Crontab\Crontab($crontabConfig); 修改后&#…
最新文章