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

news2024/11/14 12:02:47

问题

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

在这里插入图片描述

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

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

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

原因分析

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

在这里插入图片描述

解决办法

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

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

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

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

在这里插入图片描述

参考文章

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

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

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

相关文章

react 基础语法

前置知识 类的回顾 通过class关键字定义一个类 类名首字母大写 class类有constructor构造器 new 一个类得到一个实例 类还有方法,该方法也会在其原型上 static静态数据,访问静态属性通过 类名.id getter和setter getter:定义一个属性&…

渠道分析促增长,App如何靠渠道来源追踪构建评估体系

只要接触市场或运营工作,流量的投入产出细节就是必定要被追问的问题,碎片化的渠道营销和投入资源没有精细化管理的话,势必要面临以下诸多问题: 做了这么多地方的投放,哪个渠道效果最好?某个大主播确实给我…

猫鼠游戏: KaijiK病毒入侵溯源分析

1. 事件背景 近期,网宿平台某客户在使用云主机工作的时候突然出现主机卡顿,连接不稳定,网络断开的情况,并且收到了网宿主机入侵检测产品的告警信息。由于客户没有专职的安全人员,由运维人员兼任安全运营工作&#xff…

OA项目值用户登入首页展示

1.什么是OA 办公自动化(Office Automation,简称OA)是将现代化办公和计算机技术结合起来的一种新型的办公方式。办公自动化没有统一的定义,凡是在传统的办公室中采用各种新技术、新机器、新设备从事办公业务,都属于办公自动化的领域。通过实现办公自动化,或者说实现数字化…

微信小程序开发——比较两个数字大小

在这里我们使用的工具是 需要自行安装和配置。 在微信小程序中比较两个数字大小有以下几种方式: 一、普通条件判断 在小程序的.js 文件中,先定义两个数字,如let num1 5; let num2 3;。通过if - else if - else语句,根据num1与…

在VB.net中,DateTime类使用,举例说明

标题 在VB.net中,DateTime类使用,举例说明 前面学习相关 1.在VB.net中,如何把"20240906"转化成日期格式 2.在VB.net中 DateTime有什么属性与方法 3.在VB.net中,Stopwatch有什么属性与方法 正文 在VB.NET中,D…

vite + vue3 + ts 移动端开箱即用现代开发模板

中文 | English SouthernWind https://blog.csdn.net/nanchen_J?typeblog sw-template vite vue3 ts 移动端开箱即用现代开发模板 特点 🐶 Vite 的Vue3 的文件路由布局系统Mock 后续支持Api 自动引入组件自动引入VueUse 支持TypeScript 的Tailwind css 的暗…

优化算法(二)—粒子群优化算法(附MATLAB程序)

粒子群优化算法(Particle Swarm Optimization, PSO)是一种基于群体智能的优化算法,由James Kennedy和Russ Eberhart于1995年提出。它模仿鸟群觅食的行为,利用一组“粒子”在搜索空间中进行探索,以寻找最优解。每个粒子…

AI大模型知识点大梳理_ai大模型知识学习,零基础入门到精通,收藏这一篇就够了

文章目录 AI大模型是什么AI大模型发展历程AI大模型的底层原理AI大模型解决的问题大模型的优点和不足影响个人观点 AI大模型是什么 AI大模型是指具有巨大参数量的深度学习模型,通常包含数十亿甚至数万亿个参数。这些模型可以通过学习大量的数据来提高预测能力&…

尝试解决ubuntu中安装应用时出现依赖不满足的问题

在ubuntu或者其他linux环境中安装应用时,我们有时候会遇到以来不满足的问题,这时候就会导致目标应用无法被安装,比如: 怎么办呢? 第一种方式: 首先,尝试更新软件库。 先后执行以下两个命令 sudo…

输电线路在线监测摄像头:规格(一)

输电线路在线监测摄像头:规格(一) 1、设备具备前视高清变焦镜头,后视日夜一体高清镜头,整机一体化设计,不拆分。 2、采用工业级高清摄像头,像素≥1600万,可按现场需求设置。 3、支持…

【机器学习】--- 生成对抗网络 (GANs)

生成对抗网络 (GANs) —— 机器学习中的一个热点 生成对抗网络(GANs, Generative Adversarial Networks)近年来在机器学习领域成为一个热点话题。自从Ian Goodfellow及其团队在2014年提出这一模型架构以来,GANs 在图像生成、数据增强、风格转…

duilib 直接可编译运行的 实例DEMO

陆陆续续花时间精力做了几个DEMO,VS2013以上,编译即可运行,资源样式都带着。如果学习使用,或类似需求的话,可以参考下,有需要的,可以私信联系。 目录 1、duiliib 基本控件使用示例 2、文件选择对话框 3、登录界面例子 4、各种消息框的示例 5、时间工具条示例 6、透…

Web大学生网页作业成品——在线购物商城网页设计与实现(HTML+CSS+JS)(4个页面)

🎉🎉🎉 常见网页设计作业题材有**汽车、环保、明星、文化、国家、抗疫、景点、人物、体育、植物、公益、图书、节日、游戏、商城、旅游、家乡、学校、电影、动漫、非遗、动物、个人、企业、美食、婚纱、其他**等网页设计题目, 可满足大学生网…

重塑在线软件开发新纪元:集成高效安全特性,深度解析与评估支持浏览器在线编程的系统架构设计

目录 案例 【题目】 【问题 1】(13 分) 【问题 2】(12 分) 【答案】 【问题 1】解析 【问题 2】解析 相关推荐 案例 阅读以下关于软件架构设计与评估的叙述,回答问题1和问题2。 【题目】 某公司拟开发一套在线软件开发系统,支持用户通过浏览器…

Qt_自定义信号

目录 1、自定义信号的规定 2、创建自定义信号 3、带参数的信号与槽 4、一个信号连接多个槽 5、信号与槽的断开 结语 前言: 虽然Qt已经内置了大量的信号,并且这些信号能够满足大部分的开发场景,但是Qt仍然允许开发者自定义信号&#…

【Unity精品插件】NGUI:UI设计传奇工具

📂 Unity 开发资源汇总 | 插件 | 模型 | 源码 💓 欢迎访问 Unity 打怪升级大本营 在Unity3D的世界中,用户界面(UI)是玩家与游戏互动的重要桥梁。随着游戏和应用的复杂性不断增加,传统的UI解决方案已经难以满…

AgentRE:用智能体框架提升知识图谱构建效果,重点是开源!

发布时间:2024 年 09 月 13 日 Agent应用 AgentRE: An Agent-Based Framework for Navigating Complex Information Landscapes in Relation Extraction 在复杂场景中,关系抽取 (RE) 因关系类型多样和实体间关系模糊而挑战重重,影响了传统 “…

一种没有注释的语言

原文:Breck Yunits - 2024.09.05 JSON 是 PLDB(A Programming Language Database)中唯一不支持注释的流行语言。JSON 既不支持单行注释,也不支持多行注释。 JSON 最初是有注释的 Douglas Crockford 在 2012 年解释了他独特的设计…

稀有 Punk 10E 到手?「捡漏」的背后是一个已停止运营的 NFT 碎片化协议

撰文:Yangz,Techub News 今日凌晨,作为 24 个 Ape Punk 之一的 CryptoPunk #2386 以 10 ETH 的价格被 0x282 开头的地址购入。一时间,NFT 圈内尽是「羡慕」与「质疑」。 的确,即使是在如今尽显颓势的 NFT 市场&#xf…