当前位置： 首页 > news >正文

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

news 2026/2/9 23:35:57

问题

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

在这里插入图片描述

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

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

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

原因分析

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

在这里插入图片描述

解决办法

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

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

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

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

在这里插入图片描述

参考文章

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

相关文章：

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

问题 如果在 electron 里直接引入 vite 打包后的东西，那么有些资源是请求不到的 这是我的引入方式 根据报错，我们来到 vite 打包后的路径看一看 ，修改一下 dist 里的文件路径试了一试 修改后的样子，发现是可以的了 原因分析 …...

编程日记 2024/9/15 22:40:47

ZAB协议（算法）

一、ZAB（ZooKeeper Atomic Broadcast）介绍 ZAB 即 ZooKeeper Atomic Broadcast，是 ZooKeeper 实现分布式数据一致性的核心算法。它是一种原子广播协议，用于确保在分布式环境中，多个 ZooKeeper 服务器之间的数据一致性。…...

编程日记 2024/9/15 22:38:44

多个音频怎么合并？把多个音频合并在一起的方法推荐

多个音频怎么合并？无论是制作连贯的播客节目还是将音乐片段整合成专辑，音频合并已成为许多创作者的常见需求。通过有效合并音频，可以显著提升项目的整体质量，确保内容的连续性和一致性。然而，合并后的文件通常比原始单…...

编程日记 2024/9/15 22:37:43

【Django】Django Class-Based Views (CBV) 与 DRF APIView 的区别解析

Django Class-Based Views (CBV) 与 DRF APIView 的区别解析 在 Django 开发中，基于类的视图（Class-Based Views, CBV）是实现可重用性和代码结构化的利器。而 Django REST Framework (DRF) 提供的 APIView 是针对 API 开发的扩展。 一、CBV …...

编程日记 2024/9/15 22:36:42

如何增加Google收录量？

想增加Google收录量，首先自然是你的页面数量就要多，但这些页面的内容也绝对不能敷衍，你的网站都没多少页面，谷歌哪怕想收录都没办法，当然，这是一个过程，持续缓慢的增加页面，增加网站…...

编程日记 2024/9/15 22:35:40

leetcode练习 格雷编码

n 位格雷码序列 是一个由 2n 个整数组成的序列，其中： 每个整数都在范围 [0, 2n - 1] 内（含 0 和 2n - 1）第一个整数是 0一个整数在序列中出现 不超过一次每对 相邻 整数的二进制表示 恰好一位不同 ，且第一个 和 最后一…...

编程日记 2024/9/15 22:33:37

【LLM：Gemini】文本摘要、信息提取、验证和纠错、重新排列图表、视频理解、图像理解、模态组合

开始使用Gemini 目录 开始使用Gemini Gemini简介 Gemini实验结果 Gemini的多模态推理能力 文本摘要 信息提取 验证和纠错 重新排列图表 视频理解 图像理解 模态组合 Gemini多面手编程助理 库的使用 引用 本文概述了Gemini模型和如何有效地提示和使用这些模型。本…...

编程日记 2024/9/15 22:32:36

CMS之Wordpress建设

下载 https://cn.wordpress.org/ 宝塔安装Wordpress 创建网站 上传文件、并解压、剪切文件到项目根目录 安装 -> 数据库信息 -> 标题信息 http://wordpress.xxxxx.com 登录 http://wordpress.xxxxxxxxx.com/wp-admin/ 1. 主题（模板） wordpress-基本使用-02-在主题…...

编程日记 2024/9/15 22:30:35

使用Neo4j存储聊天记录的简单教程

引言 在当今的数据驱动世界中，关系型数据库有时难以处理复杂的、相互关联的数据集。Neo4j作为一款开源图数据库，以其高效管理高连接数据的能力而广受欢迎。本篇文章将详细介绍如何使用Neo4j来存储聊天信息历史，引导您在实际项目中利用其强大…...

编程日记 2024/9/15 22:29:34

前端面试常考算法

快速排序 #include<iostream> #include<cstdio> using namespace std; const int N 100005; int a[N];void quick_sort(int a[], int l, int r) {if (l > r) return;int x a[l r >> 1];int i l - 1, j r 1;while (i < j) {while (a[i] < x);…...

编程日记 2024/9/15 22:28:33

【机试准备】常用容器与函数

Vector详解 原文链接&#xff1a;【超详细】C vector 详解 例题&#xff0c;这一篇就够了-CSDN博客 向量&#xff08;Vector&#xff09;是一个封装了动态大小数组的顺序容器&#xff08;Sequence Container&#xff09;。跟任意其它类型容器一样&#xff0c;它能够存放各种…...

编程日记 2024/9/15 22:25:30

Base 社区见面会 | 新加坡站

活动信息 备受期待的 Base 社区见面会将于 Token2049 期间在新加坡举行&#xff0c;为 Base 爱好者和生态系统建设者提供一个独特的交流机会。本次活动由 DAOBase 组织&#xff0c;Base 和 Coinbase 提供支持&#xff0c;并得到了以下合作伙伴的大力支持&#xff1a; The Sand…...

编程日记 2024/9/15 22:24:28

麒麟操作系统搭建Nacos集群

Nacos 集群搭建 2.4.2 环境介绍 操作系统Kylin Linux Advanced Server V10 (Lance)Kylin Linux Advanced Server V10 (Lance)Kylin Linux Advanced Server V10 (Lance)内核版本Linux 4.19.90-52.22.v2207.ky10.aarch64Linux 4.19.90-52.22.v2207.ky10.aarch64Linux 4.19.90-52…...

编程日记 2024/9/15 22:23:27

Imagination推出性能最高且具有高等级功能安全性的汽车GPU IP

Imagination DXS GPU 进一步扩大其在汽车领域的领先地位 产品亮点 &#xff1a; 峰值性能比 Imagination 上一代汽车 GPU 提高了 50%&#xff0c;可扩展至 192GPixel/s、6 TFLOPS 和 24TOPS计算工作负载的性能提升多达十倍引入创新的分布式功能安全机制&#xff0c;以最小的…...

编程日记 2024/9/15 22:22:26

端口大全说明,HTTP,TCP,UDP常见端口对照表

HTTP,TCP,UDP常见端口对照表,下面罗列了包括在Linux 中的服务、守护进程、和程序所使用的最常见的通信端口小贴士&#xff1a;CtrlF 快速查找 Http端口号&#xff08;点标题可收缩或展开&#xff09; No1.最常用端口 端口号码/层名称注释1tcpmuxTCP端口服务多路复用5rje远程作…...

编程日记 2024/9/15 22:18:22

dplyr、tidyverse和ggplot2初探

dplyr、tidyverse 和 ggplot2 之间有紧密的联系&#xff0c;它们都是 R 语言中用于数据处理和可视化的工具&#xff0c;且都源于 Hadley Wickham 的工作。它们各自有不同的功能&#xff0c;但可以无缝协作&#xff0c;帮助用户完成从数据处理到数据可视化的工作流。以下是它们之…...

编程日记 2024/9/15 22:14:19

pandas:读取各类文件方法以及爬虫时json数据保存

文件的读取与写入 | 常用读文件方法 | 说明 | | -------------- | ---------------- | | read_csv | 读取CSV文件 | | read_excel | 读取Excel文件 | | read_html | 读取网页HTML文件 | | read_table | 通用读取方法 | | 常用写文…...

编程日记 2024/9/15 22:13:18

二、（JS）JS中常见的键盘事件

一、常见的键盘事件 onkeydown 某个键盘按键被按下onkeypress 某个键盘按键被按下onkeyup 某个键盘按键被松开 二、事件的执行顺序 onkeydown、onkeypress、onkeyup down 事件先发生&#xff1b;press 发生在文本被输入&#xff1b;up …...

编程日记 2024/9/15 22:10:15

【CSS】样式水平垂直居中

行内元素&#xff1a; 如果被设置元素为文本、图片等行内元素时&#xff0c;水平居中是通过给父元素设置 text-align:center <body> <div class"txtCenter">我想要在父容器中水平居中显示。</div> </body>div是文本元素的父元素 因此我们对…...

编程日记 2024/9/15 22:07:12

深入理解数据分析的使用流程：从数据准备到洞察挖掘

数据分析是企业和技术团队实现价值的核心。 5 秒内你能否让数据帮你做出决策&#xff1f; 通过本文&#xff0c;我们将深入探讨如何将原始数据转化为有意义的洞察&#xff0c;帮助你快速掌握数据分析的关键流程。 目录 数据分析的五个核心步骤1. 数据获取常用数据获取方式 2. 数…...

编程日记 2024/9/15 22:06:11

线程与协程

1. 线程与协程 1.1. “函数调用级别”的切换、上下文切换 1. 函数调用级别的切换 “函数调用级别的切换”是指&#xff1a;像函数调用/返回一样轻量地完成任务切换。 举例说明&#xff1a; 当你在程序中写一个函数调用&#xff1a; funcA() 然后 funcA 执行完后返回&…...

编程新知 2025/10/31 17:25:40

连锁超市冷库节能解决方案：如何实现超市降本增效

在连锁超市冷库运营中&#xff0c;高能耗、设备损耗快、人工管理低效等问题长期困扰企业。御控冷库节能解决方案通过智能控制化霜、按需化霜、实时监控、故障诊断、自动预警、远程控制开关六大核心技术&#xff0c;实现年省电费15%-60%&#xff0c;且不改动原有装备、安装快捷、…...

编程新知 2025/11/30 16:55:29

#Uniapp篇：chrome调试unapp适配

chrome调试设备----使用Android模拟机开发调试移动端页面 Chrome://inspect/#devices MuMu模拟器Edge浏览器&#xff1a;Android原生APP嵌入的H5页面元素定位 chrome://inspect/#devices uniapp单位适配 根路径下 postcss.config.js 需要装这些插件 “postcss”: “^8.5.…...

编程新知 2026/1/4 21:36:42

招商蛇口 | 执笔CID，启幕低密生活新境

作为中国城市生长的力量&#xff0c;招商蛇口以“美好生活承载者”为使命&#xff0c;深耕全球111座城市&#xff0c;以央企担当匠造时代理想人居。从深圳湾的开拓基因到西安高新CID的战略落子&#xff0c;招商蛇口始终与城市发展同频共振&#xff0c;以建筑诠释对土地与生活的…...

编程新知 2026/1/26 8:13:33

MFC 抛体运动模拟：常见问题解决与界面美化

在 MFC 中开发抛体运动模拟程序时，我们常遇到 轨迹残留、无效刷新、视觉单调、物理逻辑瑕疵 等问题。本文将针对这些痛点，详细解析原因并提供解决方案，同时兼顾界面美化，让模拟效果更专业、更高效。 问题一：历史轨迹与小球残影残留 现象 小球运动后，历史位置的 “残影”…...

编程新知 2026/1/29 12:12:12

在Mathematica中实现Newton-Raphson迭代的收敛时间算法（一般三次多项式）

考察一般的三次多项式&#xff0c;以r为参数&#xff1a; p[z_, r_] : z^3 (r - 1) z - r; roots[r_] : z /. Solve[p[z, r] 0, z]&#xff1b; 此多项式的根为&#xff1a; 尽管看起来这个多项式是特殊的&#xff0c;其实一般的三次多项式都是可以通过线性变换化为这个形式…...

编程新知 2026/1/30 3:24:00

多模态图像修复系统：基于深度学习的图片修复实现

多模态图像修复系统：基于深度学习的图片修复实现 1. 系统概述 本系统使用多模态大模型（Stable Diffusion Inpainting）实现图像修复功能，结合文本描述和图片输入，对指定区域进行内容修复。系统包含完整的数据处理、模型训练、推理部署流程。 import torch import numpy …...

编程新知 2025/9/9 21:28:16

PostgreSQL——环境搭建

一、Linux # 安装 PostgreSQL 15 仓库 sudo dnf install -y https://download.postgresql.org/pub/repos/yum/reporpms/EL-$(rpm -E %{rhel})-x86_64/pgdg-redhat-repo-latest.noarch.rpm# 安装之前先确认是否已经存在PostgreSQL rpm -qa | grep postgres# 如果存在&#xff0…...

编程新知 2025/11/26 20:46:42

GraphQL 实战篇：Apollo Client 配置与缓存

GraphQL 实战篇&#xff1a;Apollo Client 配置与缓存 上一篇&#xff1a;GraphQL 入门篇&#xff1a;基础查询语法 依旧和上一篇的笔记一样&#xff0c;主实操&#xff0c;没啥过多的细节讲解&#xff0c;代码具体在&#xff1a; https://github.com/GoldenaArcher/graphql…...

编程新知 2026/2/6 5:45:36

在Spring Boot中集成RabbitMQ的完整指南

前言 在现代微服务架构中&#xff0c;消息队列&#xff08;Message Queue&#xff09;是实现异步通信、解耦系统组件的重要工具。RabbitMQ 是一个流行的消息中间件&#xff0c;支持多种消息协议&#xff0c;具有高可靠性和可扩展性。 本博客将详细介绍如何在 Spring Boot 项目…...

编程新知 2025/7/27 20:49:33