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

ops/2024/9/22 18:25:35/

问题

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

在这里插入图片描述

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

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

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

原因分析

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

在这里插入图片描述

解决办法

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

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

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

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

在这里插入图片描述

参考文章

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


http://www.ppmy.cn/ops/111918.html

相关文章

【可视化大屏系列】数据列表自动滚动效果

要实现列表的自动滚动效果,这里提供两种解决方案: 1.vue插件 官方文档:链接: vue-seamless-scroll (1)安装依赖 npm install vue-seamless-scroll --save(2)全局注册(main.js中&a…

新手教学系列——用Nginx将页面请求分发到不同后端模块

在当今的Web开发中,前后端分离架构已经成为主流,尤其是大型应用项目。前端可以通过Vue这样的框架来统一管理页面和用户交互,而后端则通常会拆分成多个微服务模块,以便应对不同业务需求和功能扩展。在这样的架构下,Nginx作为一个高效、灵活的Web服务器,能够帮助我们将前端…

R语言统计分析——散点图1(常规图)

参考资料:R语言实战【第2版】 R语言中创建散点图的基础函数是plot(x,y),其中,x和y是数值型向量,代表着图形中的(x,y)坐标点。 attach(mtcars) plot(wt,mpg,main"Basic Scatter plot of MPG vs. Weigh…

解码 OpenAI 的 o1 系列大型语言模型

OpenAI 表示,其 Strawberry 项目已升级为新的大型语言模型 (LLM) 系列,公司将其命名为 OpenAI o1。 该公司表示,新系列模型还包括一个 o1-mini 版本,以提高成本效益,可根据其推理能力与最新的GPT-4o 模型进行区分。 …

裸金属服务器与云服务器的区别有哪些?

随着云计算服务的快速发展,云服务器与裸金属服务器则称为各大企业基础设施的两大核心选择,会运用在不同的场景当中,本文就来介绍一下裸金属服务器与云服务器的区别都有哪些吧! 裸金属服务器相对于云服务器来说有着卓越的性能&…

回溯-重新安排行程

1.排序 Collections.sort(list,(o1, o2)-> o1.get(0).compareTo(o2.get(0))); 2.返回值 3.往集合添加元素 Arrays.asList(元素) List<List<String>> list new ArrayList<>();List<String> path new ArrayList<>();// 将[["JFK"…

编译 Android 11源码

参考小米6 lineageos官方编译文档&#xff1a;https://wiki.lineageos.org/devices/sagit/build 单独编译 framework 以LineageOS18.1&#xff08;Android 11&#xff09;为例&#xff1a; 1、在源码根目录执行&#xff1a; make framework-minus-apex 2、用生成的framewo…

第L6周:机器学习-随机森林(RF)

&#x1f368; 本文为&#x1f517;365天深度学习训练营 中的学习记录博客&#x1f356; 原作者&#xff1a;K同学啊 目标&#xff1a; 1.什么是随机森林&#xff08;RF&#xff09; 随机森林&#xff08;Random Forest, RF&#xff09;是一种由 决策树 构成的 集成算法 &#…