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

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

news 2026/1/12 0:40:50

问题

如果在 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

Leetcode 3576. Transform Array to All Equal Elements

Leetcode 3576. Transform Array to All Equal Elements 1. 解题思路2. 代码实现 题目链接&#xff1a;3576. Transform Array to All Equal Elements 1. 解题思路 这一题思路上就是分别考察一下是否能将其转化为全1或者全-1数组即可。 至于每一种情况是否可以达到&#xf…...

编程新知 2025/9/17 7:25:07

LeetCode - 394. 字符串解码

题目 394. 字符串解码 - 力扣&#xff08;LeetCode&#xff09; 思路 使用两个栈&#xff1a;一个存储重复次数&#xff0c;一个存储字符串 遍历输入字符串&#xff1a; 数字处理&#xff1a;遇到数字时&#xff0c;累积计算重复次数左括号处理&#xff1a;保存当前状态&a…...

编程新知 2026/1/6 22:16:14

解决本地部署 SmolVLM2 大语言模型运行 flash-attn 报错

出现的问题 安装 flash-attn 会一直卡在 build 那一步或者运行报错 解决办法 是因为你安装的 flash-attn 版本没有对应上&#xff0c;所以报错&#xff0c;到 https://github.com/Dao-AILab/flash-attention/releases 下载对应版本&#xff0c;cu、torch、cp 的版本一定要对…...

编程新知 2025/11/3 2:11:24

Linux-07 ubuntu 的 chrome 启动不了

文章目录 问题原因解决步骤一、卸载旧版chrome二、重新安装chorme三、启动不了&#xff0c;报错如下四、启动不了&#xff0c;解决如下 总结 问题原因 在应用中可以看到chrome&#xff0c;但是打不开(说明&#xff1a;原来的ubuntu系统出问题了&#xff0c;这个是备用的硬盘&a…...

编程新知 2026/1/1 7:07:29

Angular微前端架构：Module Federation + ngx-build-plus (Webpack)

以下是一个完整的 Angular 微前端示例&#xff0c;其中使用的是 Module Federation 和 npx-build-plus 实现了主应用&#xff08;Shell&#xff09;与子应用&#xff08;Remote&#xff09;的集成。 &#x1f6e0;️ 项目结构 angular-mf/ ├── shell-app/ # 主应用&…...

编程新知 2025/12/3 10:52:37

根目录0xa0属性对应的Ntfs!_SCB中的FileObject是什么时候被建立的----NTFS源代码分析--重要

根目录0xa0属性对应的Ntfs!_SCB中的FileObject是什么时候被建立的 第一部分&#xff1a; 0: kd> g Breakpoint 9 hit Ntfs!ReadIndexBuffer: f7173886 55 push ebp 0: kd> kc # 00 Ntfs!ReadIndexBuffer 01 Ntfs!FindFirstIndexEntry 02 Ntfs!NtfsUpda…...

编程新知 2025/8/27 0:09:05

OD 算法题 B卷【正整数到Excel编号之间的转换】

文章目录 正整数到Excel编号之间的转换 正整数到Excel编号之间的转换 excel的列编号是这样的&#xff1a;a b c … z aa ab ac… az ba bb bc…yz za zb zc …zz aaa aab aac…; 分别代表以下的编号1 2 3 … 26 27 28 29… 52 53 54 55… 676 677 678 679 … 702 703 704 705;…...

编程新知 2025/8/31 2:33:30

uniapp 小程序 学习（一）

利用Hbuilder 创建项目 运行到内置浏览器看效果 下载微信小程序 安装到Hbuilder 下载地址 &#xff1a;开发者工具默认安装 设置服务端口号 在Hbuilder中设置微信小程序 配置 找到运行设置&#xff0c;将微信开发者工具放入到Hbuilder中&#xff0c; 打开后出现 如下 bug 解…...

编程新知 2026/1/9 8:21:52

AI语音助手的Python实现

引言 语音助手（如小爱同学、Siri）通过语音识别、自然语言处理（NLP）和语音合成技术，为用户提供直观、高效的交互体验。随着人工智能的普及，Python开发者可以利用开源库和AI模型，快速构建自定义语音助手。本文由浅入深，详细介绍如何使用Python开发AI语音助手，涵盖基础功…...

编程新知 2026/1/11 17:47:29

在 Visual Studio Code 中使用驭码 CodeRider 提升开发效率：以冒泡排序为例

目录 前言1 插件安装与配置1.1 安装驭码 CodeRider1.2 初始配置建议 2 示例代码&#xff1a;冒泡排序3 驭码 CodeRider 功能详解3.1 功能概览3.2 代码解释功能3.3 自动注释生成3.4 逻辑修改功能3.5 单元测试自动生成3.6 代码优化建议 4 驭码的实际应用建议5 常见问题与解决建议…...

编程新知 2026/1/11 20:17:37