Vite + Electron 时,Electron 渲染空白,静态资源加载错误等问题解决

问题

如果在 electron 里直接引入 vite 打包后的东西,那么有些资源是请求不到的

在这里插入图片描述

这是我的引入方式
在这里插入图片描述

根据报错,我们来到 vite 打包后的路径看一看 ,修改一下 dist 里的文件路径试了一试

在这里插入图片描述
修改后的样子,发现是可以的了
在这里插入图片描述

原因分析

vite 打包后的资源都是以 / 开头的,前导斜杠表示您要从根目录链接文件, 具体可以看这里

在这里插入图片描述

解决办法

知道问题所在,那么就有两个方向了,要么配置 vite,要么配置 electron

这里觉得配置vite 是最方便的,查到了 vite 如何配置,在 vite.config.ts 中指定 base

在这里插入图片描述
之后在打包,在 electron 里试试,嗯正常了~

在这里插入图片描述
因为打包后的文件都不是以/开头的了

在这里插入图片描述

参考文章

1. vue3+vite的项目如何将打包后的绝对路径改为相对路径

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

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

粒子群算法(PSO算法)求解实例---旅行商问题 (TSP)

目录 一、采用PSO求解 (TSP)二、 旅行商问题2.1 实际例子:求解 6 个城市的 TSP2.2 **求解该问题的代码**2.3 代码运行过程截屏2.4 代码运行结果截屏(后续和其他算法进行对比) 三、 如何修改代码?3.1 减少城市坐标,如下…

Porcupine - 语音关键词唤醒引擎

文章目录 一、关于 Porcupine特点用例尝试一下 语言支持性能 二、Demo1、Python Demo2、iOS DemoBackgroundService DemoForegroundApp Demo 3、网页 Demo3.1 Vanilla JavaScript 和 HTML3.2 Vue Demos 三、SDK - Python 一、关于 Porcupine Porcupine 是一个高度准确和轻量级…

【软件测试】--xswitch将请求代理到测试桩

背景 在做软件测试的过程中,经常会遇见需要后端返回特定的响应数据,这个时候就需要用到测试桩,进行mock测试。 测试工程师在本地模拟后端返回数据时,需要将前端请求数据代理到本地,本文介绍xswitch插件代理请求到flas…

基于环境音频和振动数据的人类活动识别

这篇论文的标题是《Recognition of human activities based on ambient audio and vibration data》,作者是 Marcel Koch 等人,发表在 IEEE Access 期刊上。论文提出了一种基于环境音频和振动数据的分布式多传感器系统,用于识别人类活动。以下…

Anaconda安装并配置Python环境

背景概述 Anaconda,中文大蟒蛇,是一个开源的Anaconda是专注于数据分析的Python发行版本,包含了conda、Python等190多个科学包及其依赖项。 Anaconda就是可以便捷获取包且对包能够进行管理,包括了python和很多常见的软件库和一个…

web基础之RCE

简介:RCE称为远程代码执行漏洞;是互联网的一种安全漏洞;攻击者可以直接向后台服务器远程注入操作系统命令;从而操控后台系统;也是CTF比较常考的一个方面 1、eval执行 (1)分析后端代码&#xf…

什么是API网关(API Gateway)?

1. 什么是API网关(API Gateway)? 在微服务体系结构中,客户端可能与多个前端服务进行交互。 API 网关位于客户端与服务之间。 它充当反向代理,将来自客户端的请求路由到服务。 它还可以执行各种横切任务,例…

机器学习 vs 深度学习:深入浅出解析两者的区别

在当今科技飞速发展的时代,**机器学习(Machine Learning)和深度学习(Deep Learning)**成为了人工智能(AI)领域的热门话题。无论你是技术专家、学生,还是对AI感兴趣的普通读者&#x…

Linux-mysql5.7-mysql8.0安装包下载及安装教程,二合一

一、安装包下载 1、手动下载 MySQL :: Download MySQL Community Server 2、wegt下载 wget https://dev.mysql.com/get/Downloads/MySQL-5.7/mysql-5.7.24-linux-glibc2.12-x86_64.tar.gz 登录自己的liunx ,复制上面的命令下载。 二、手动安装 1、上传压缩包到…

关于less的基本使用

1、介绍及概述 1.1、解释 less 是方便开发人员书写CSS的一门预处理语言。浏览器只认识html /css /js格式的文件,所以直接引入.less文件,没有任何的效果,需要把less文件转换成css文件 1.2、概述 CSS弊端: 没有逻辑性、变量、函…

php语言基本语法

HP&#xff08;Hypertext Preprocessor&#xff09;是一种广泛使用的开源服务器端脚本语言&#xff0c;特别适合于Web开发。 它能够嵌入到HTML中&#xff0c;执行动态网页内容。 PHP的一些基本语法元素&#xff1a; 1. 基本结构 PHP代码通常嵌入到HTML中&#xff0c;以<…

【三大运营商】大数据平台体系架构【顶层规划设计】

在国内运营商&#xff08;如中国移动、中国联通、中国电信&#xff09;的大数据平台建设中&#xff0c;顶层规划设计至关重要。以下是针对三大运营商为例【如电信】的大数据平台体系架构的顶层规划设计方案&#xff0c;涵盖整体架构、关键组件、数据管理、应用场景等方面。 1. …

Python 解析 JSON 数据

1、有如下 JSON 数据&#xff0c;存放在 data.json 文件&#xff1a; [{"id":1, "name": "小王", "gender": "male", "score": 96.8}, {"id":2, "name": "小婷", "gender&qu…

[网络]https的概念及加密过程

文章目录 一. HTTPS二. https加密过程 一. HTTPS https本质上就是http的基础上增加了一个加密层, 抛开加密之后, 剩下的就是个http是一样的 s > SSL HTTPS HTTP SSL 这个过程, 涉及到密码学的几个核心概念 明文 要传输的真正意思是啥 2)密文 加密之后得到的数据 这个密文…

使用knn算法对iris数据集进行分类

程序功能 使用 scikit-learn 库中的鸢尾花数据集&#xff08;Iris dataset&#xff09;&#xff0c;并基于 KNN&#xff08;K-Nearest Neighbors&#xff0c;K近邻&#xff09;算法进行分类&#xff0c;最后评估模型的准确率。 代码 from sklearn import datasets# 加载鸢尾…

SpringBoot+vue集成sm国密加密解密

文章目录 前言认识SM2后端工具类实现引入依赖代码实现工具类&#xff1a;SM2Util 单元测试案例1&#xff1a;生成服务端公钥、私钥&#xff0c;前端js公钥、私钥案例2&#xff1a;客户端加密&#xff0c;服务端完成解密案例3&#xff1a;服务端进行加密&#xff08;可用于后面前…

Modelsim SE-64 2020.4关闭优化

一、问题起源 本人由于之前一直使用AMD的板子&#xff0c;使用vivado自带仿真器进行功能仿真&#xff0c;由于自带的页面简洁和仿真时间自己还都可以接受就没有什么modelsim联合仿真&#xff0c;又因准备FPGA大赛的国产FPGA易灵思的题目&#xff0c;使用Efinity&#xff0b;Mod…

AI助力遥感影像智能分析计算,基于高精度YOLOv5全系列参数【n/s/m/l/x】模型开发构建卫星遥感拍摄场景下地面建筑物智能化分割检测识别系统

随着科技的飞速发展&#xff0c;卫星遥感技术已成为获取地球表面信息的重要手段之一。卫星遥感图像以其覆盖范围广、数据量大、信息丰富等特点&#xff0c;在环境监测、城市规划、灾害评估等多个领域发挥着不可替代的作用。然而&#xff0c;面对海量的卫星图像数据&#xff0c;…

磁盘写入缓存区太大,如何清理C盘缓存

针对“磁盘写入缓存区太大&#xff0c;如何清理C盘缓存”的问题&#xff0c;我们可以从多个角度进行专业解答。首先&#xff0c;需要明确的是&#xff0c;“磁盘写入缓存区太大”这一表述可能涉及硬盘缓存的设置或系统缓存管理&#xff0c;但通常用户面对的问题更多是关于C盘空…

Json和Http专栏

json 理论 什么是JSON? 规则 被大括号包括的是JSON对象,被中括号包括的是JSON数组. JSON数组JSON对象 实验 构建JSON 用代码实现如下json内容: //构建JSON void WirteJson() {QJsonObject rootObject;//1.插入name字段rootObject.insert("name","china&quo…