Mac下，Electron的extraResources无法将静态资源打入程序

最新推荐文章于 2025-04-21 19:58:04 发布
最新推荐文章于 2025-04-21 19:58:04 发布
阅读量1.9k 收藏 1
点赞数 1
CC 4.0 BY-SA版权
分类专栏： # Electron 文章标签： electron extraResources Mac
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/itlsq/article/details/126410303
本文讲述了开发者在使用Electron开发桌面应用时，如何解决从静态资源文件夹中正确打包Windows和Mac安装包的问题，重点在于`extraResources`配置的调整和跨平台兼容性问题的解决。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

之前用Electron开发桌面端应用，有一个文件夹需要打入到安装程序里，用extraResources，打包windows包时一直用的是

"extraResources": [
   "./static/**"
 ],

在windows下正常，后来需要兼容mac平台，结果发现在mac下却没有打进去，最后是改成如下：去掉前面的./

"extraResources": [
   "static/**"
 ],

这次成功打进了mac安装包下

vue3+electron开发桌面应用，静态资源处理方式及路径问题总结
autumngold的专栏
02-27 3043
的引用解析为相应模块的路径，并且，如果项目配置了相应的loader，Webpack 还会处理文件内容，可能会转换这些静态资源为 base64 URI，或者将其复制到输出目录，并修改为最终路径。当你的网站或应用需要在多个子路径或不同的环境中部署，而没有固定的根路径时，设置。目录下的静态资源时，例如图片或样式文件，Webpack 会使用相应的加载器(loader)来处理它们。这里的静态路径是指直接写死的字符串，动态路径是指vue中的响应式数据生成的路径。静态路径没什么好说的，写相对路径，vue会自动处理好。
【亲测免费】 探索 `electron-serve`：优雅地构建Electron应用的静态资源服务器
gitblog_00046的博客
04-20 1369
探索 electron-serve：优雅地构建Electron应用的静态资源服务器 在开发基于Electron的应用时，快速迭代和实时预览是必不可少的需求。 是一个简洁而强大的库，它为Electron应用提供了本地HTTP服务器功能，使得动态加载和更新文件变得极其简便。本文将深入探讨这个项目的背后原理、应用场景及其独特的特性。 项目简介 electron-serve 由知名开发者Sindre So...
electron的extraFiles和extraResources的配置和使用（附：动态路径拼接问题）
qq_44741577的博客
03-19 5940
也就是说无论什么环境，都可以精准无误的访问到根目录。在打包时会将指定文件夹复制到打包后应用程序的。在打包时会将指定文件夹复制到打包后应用程序的。文件夹会被复制到打包后应用程序的。文件夹会被复制到打包后应用程序的。文件夹，这里用来存放你的资源。文件夹，这里用来存放你的资源。是打包额外文件配置项，配置。进程当前的工作目录，也就是。是打包额外资源配置项，配置。可以将多个路径拼接到一起。(Windows)，或者。(Windows)，或者。进程当前的工作目录，文件夹所在目录，那么。的目录路径地址就是，
Electron打包后引用文件没被打包进去解决
weixin_45628304的博客
03-23 1071
Electrion打包问题
使用electron-packager打包electron-vue项目的一些问题：打包后的应用程序空白、静态资源无法加载
fu_jian_ping的博客
09-30 5790
最近在使用electron-packager打包electron-vue项目时遇到了一些小问题，下面是我的解决方案： 1、打包后的应用程序打开后是空白的： 解决方法：在npm run packager之前先npm run build。 2、图片等静态资源无法加载的问题： 打包时一般会将静态资源文件放在“打包文件名\resources\app\dist\electron"路径下，若你的静态文件没有复制到这里，那么应用程序将无法找到，即应用程序会在这个文件夹中找静态资源。 解决方法： 先把静态资源放
SinF的Electron系列之三---electron-packager加载第三方资源
weixin_34388207的博客
01-02 1131
在上篇SinF的Electron系列之二里我提到了，用--extra-resource字段来加载第三方资源。 在项目开始的时候，我把第三方资源放到了根目录的static文件夹里，发现并没有起到加载第三方资源的效果。通用查询，发现electron-packager提供--extra-resource字段。 核心方法，用 --extra-r...
electron 如何将任意资源打包的方法步骤
11-20
在 Electron 开发中，有时我们需要将额外的资源如 Java 的 JAR 包、Python 脚本或其他文件打包进应用程序，以便在运行时能够访问。本文将详细介绍如何使用 Electron 将任意资源打包，并在程序中正确引用这些资源。 ...
使用electron将网页打包为桌面可执行程序，包括绿色免安装和安装版本，支持Windows，mac_pack.zip
09-22
在软件开发领域，将网页打包成桌面应用程序是一个常见的需求，尤其是对于那些基于Web技术构建的应用。Electron是一个非常流行的框架，允许开发者使用JavaScript, HTML 和 CSS等网页技术来构建跨平台的桌面应用程序。...
electron开发桌面程序windows+mac操作系统安装，集成前端react+ant design UI
11-03
在电子（Electron）框架下开发桌面应用程序，可以利用Web技术如HTML、CSS和JavaScript，同时支持Windows和macOS操作系统。本教程将详细介绍如何在这些平台上安装和配置Electron环境，以及如何集成React和Ant Design ...
Node.js-electron-serve为Electronapps提供静态文件服务
08-10
这个库是Node.js开发中的一个实用工具，特别是在构建Electron应用时，极大地简化了静态资源的管理，提高了开发效率。 总的来说，`electron-serve`是Node.js和Electron结合开发时的一个重要辅助工具，它使得静态文件...
Electron Forge + Vite 项目 Electron 静态资源处理
腊肉的博客
05-21 2496
在 Vite 打包时，它只会包括那些被静态分析到的资源文件（例如 JavaScript、CSS、图片文件等），这些文件通常是通过相对路径或模块解析方式引用的。 Electron 中使用的大多都是系统路径（例如通过 __dirname 或 process.resourcesPath 生成的路径），这些路径在 Vite 的打包过程中是无法被正确识别的。 在 Vite 不支持指定将某个目录打包至指定编译目录的情况下，问题逐渐变得复杂化（Forge 也没找到相关的功能）。
electron打包桌面版.exe之vue项目踩坑(vue3+electron 解决打包后首页打开空白，打包后路由不跳转及请求不到后端数据等问题)
qq_21280835的博客
03-27 3487
electron打包桌面版.exe之vue项目踩坑(vue3+electron 解决打包后首页打开空白，打包后路由不跳转及请求不到后端数据等问题)
使用 Electron 打包可执行文件和资源：完整实战教程
最新发布
qq_59002866的博客
04-21 1389
通过的配置，我们可以轻松地将自定义的.exe程序、.json配置文件、本地库一并打包，并通过 Node.js 的路径处理函数在运行时加载它们。这不仅能保持项目结构清晰，也让部署和运行更简单稳定。
关于 electron-vue打包后静态资源路径失效的解决方案
热门推荐
aa661020的博客
03-30 2万+
关于 electron-vue打包后静态资源路径失效的解决方案 1.静态资源如css,img，js,请放在根目录的static文件夹里， 因为electron打包后会复制一份static文件夹到dist文件夹中 这样项目引入的静态资源就不会报路径错误了。 2.字体文件比较特殊，如果引入的是前端框架文件，引入的字体 路径不是我们能控制的。所以我们需要修改下C:\Users...
Vite + Electron 时，Electron 渲染空白，静态资源加载错误等问题解决
Lovely Ruby 的手账
09-12 1558
如果在electron里直接引入vite打包后的东西，那么有些资源是请求不到的这是我的引入方式根据报错，我们来到vite打包后的路径看一看 ，修改一下dist里的文件路径试了一试修改后的样子，发现是可以的了。
electron-builder 配置
Tom__cy的博客
12-03 3290
"build": { "productName":"xxxx", //项目名 这也是生成的exe文件的前缀名 "appId": "com.xxx.xxxxx", //包名 "copyright":"xxxx", //版权信息 "directories": { //输出文件夹 "output": "build" }, "nsis": { //nsis相关配置，打包方式为nsis时生效 "oneClick": false,
Electron：资源
Cynhard的专栏
10-30 626
.col-sm-4 .col-sm-4 .col-sm-4
Electron中的关于静态资源加载问题解决方案
weixin_47234912的博客
12-19 954
探讨Electron应用中静态资源加载难题，介绍electron-serve作为高效解决方案，解决生产环境中资源路径错误及前端路由历史模式支持问题
Electron-vue
Growing up Or Growing old
01-15 1万+
Electron 是一个使用 JavaScript、HTML 和 CSS 构建桌面应用程序的框架。通过将Chromium和Node.js嵌入到其二进制文件中，Electron 允许您维护一个 JavaScript 代码库并创建可在 Windows、macOS 和 Linux 上运行的跨平台应用程序——无需原生开发经验。......
electron静态资源
08-29
在electron项目中，静态资源一般需要放在特定的文件夹中才能正常加载。根据引用，一般情况下，静态资源文件应该放在“打包文件名\resources\app\dist\electron"路径下。这样，应用程序在运行时就能够找到并加载这些静态资源。另外，引用中提到，可以将静态资源放在根目录下的static文件夹中，因为electron打包后会复制一份static文件夹到dist文件夹中，这样项目引入的静态资源就不会报路径错误了。所以，在开发过程中，需要将静态资源放置在合适的文件夹中，以确保应用程序能够正确加载这些资源。接着，根据引用，还需要在项目根目录下的.electron-vue文件夹下的webpack.renderer.config.js文件中修改对应的路径，将静态资源的源路径修改为目标路径。这样，在打包过程中，CopyWebpackPlugin插件会自动复制静态资源到目标路径中。通过以上的操作，应用程序在运行时就能够正常加载静态资源了。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *3* [使用electron-packager打包electron-vue项目的一些问题：打包后的应用程序空白、静态资源无法加载](https://blog.youkuaiyun.com/fu_jian_ping/article/details/120560694)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *2* [关于 electron-vue打包后静态资源路径失效的解决方案](https://blog.youkuaiyun.com/aa661020/article/details/79757859)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值