使用electron-builder构建React+Electron应用时图片资源无法加载

最新推荐文章于 2024-05-06 12:49:24 发布
最新推荐文章于 2024-05-06 12:49:24 发布
阅读量1.6k 收藏 1
点赞数 3
文章标签： react 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u010769267/article/details/112058255
版权

使用electron-builder构建React+Electron应用时遇到了一个问题，开发模式下一切正常，打包之后图片资源无法加载。
在这里插入图片描述
在调试工具中查看，发现是资源路径错误，图片路径为
在这里插入图片描述
正常electron-builder打包后的资源路径应该是file://my/app/path/resources/app.asar/build/static/media/antd.9bc8753a.svg这样的。
查找了半天，发现是react-router的问题，使用BrowserRouter就会导致路径不正常，推测是因为BrowserRouter会修改页面的根路径。

解决方案：
换HashRouter就好了。

washingtown_orz
关注
  • 3
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
vue 项目打包时样式及背景图片路径找不到的解决方式
10-16
今天小编就为大家分享一篇vue 项目打包时样式及背景图片路径找不到的解决方式，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
Electron 如何调用本地模块的方法
01-19
Electron 结合了 Chromium、Node.js 和用于调用操作系统本地功能的 API（如打开文件窗口、通知、图标等，基于 Electron 的开发，就好像开发一个网页一样，而且能够无缝地使用 Node。或者说：就好像构建一个 Node app，并通过 HTML 和 CSS 构建界面。 那么如何在页面中调用 Node API 呢？ 碰到了一些坑… 先从页面加载方式说起，Electron 中加载页面的方式有两种： 一种是直接加载本地文件，另一种是通过 http 网络请求页面。 //方法1 本地路径 win.loadURL(url.format({ pathname: path.
在electron打包出现无法载入本地视频与图片问题
qq_44824824的博客
03-27 475
在electron中的启动文件中(通常是background.js或main.js)找到BrowserWindow()在electron打包后出现无法载入本地视频与图片问题，是electron的跨域存在问题。添加webSecurity: false解决跨域限制。
vite-electron-builder：基于Vite 2.0的Electron应用程序模板
02-20
Vite电子生成器模板 Vite +电子= :fire: 这是用于电子应用的安全模板。 遵循最新的安全要求，建议和最佳实践编写。 在引擎盖下使用了超快速，下一代捆绑用于编译的。 默认情况下，该接口使用Vue框架，但是您可以轻松使用任何其他框架，例如React ， Preact ， Angular ， Svelte或其他任何框架。 Vite与框架无关 支持 此模板由维护。 你可以 继续开发此模板。 如果您有想法，问题或建议-欢迎进行。 :smiling_face_with_smiling_eyes: 特征 电子 模板使用最新的电子版以及所有最新的安全补丁。 应用程序的体系结构是根据安全建设和最佳实践。 的最新版本用于编译应用程序。 恶毒 用于捆绑所有源代码。 这是一款非常快速的打包机，具有许多强大的功能。 您可以在视频中了解有关其安排的更多信息。 Vite读取.env文件。 我的模板有一个单独的命令来生成带有环境变量类型定义的.d.ts
electron+vue加载本地wav音频资源失败
qq_24642909的博客
05-28 1772
解决electron+vue加载本地音频失败 1.下载electron-vue程序 vue init simulatedgreg/electron my-project cd my-project npm install npm run dev 2.建立一个Music音频加载组件 <template> <div v-show="false"> <audio :src="url" ref="audio"></audio> </div&g
Electron主进程渲染进程间通信的四种方式
老电影故事的博客
01-06 6049
在中进程使用和模块，通过开发人员定义的“通道”传递消息来进行通信。新的版本中推荐使用上下文隔离渲染器进程进行通信，这种方式的好处是无需在渲染进程中直接使用发送消息，这种在渲染进程中调用nodejs对象的方法对于渲染进程有侵入性。当我们使用或者其他前端框架开发界面时，上下文隔离方式使用起来更加方便，基本上感受不到对前端框架的影响。
Electron-builder打包vue项目后,背景图片不加载的问题
m0_63548381的博客
04-09 2447
打包后的项目启动之后，背景图片没有成功加载，只有一片空白。此时打开调试工具可以看到,electron自动把图片路径加上了/img/我们这时打开打包后的dist_electron文件夹，打开bundled\img目录,这就是上面报错的路径。
electron-vue中加载render文件夹下的图片资源在开发环境下加载失败解决方案(亲测有效！！！)
DLGDark的博客
04-09 1356
原有的正常项目中的写法(在开发环境下加载会失败)： <img :src="userInfo.companyLogo ? userInfo.companyLogo : '../../../assets/images/baseImg/companyLogo.png' " class="company-logo" /> 修改后的代码： <img :src="userInfo.companyLogo ? userInfo.companyLogo : img_companyLogo" class=
解决electron-vue打包后加载.node文件找不到资源的问题
weixin_43398820的博客
06-22 4065
背景 electron-vue加载 .node文件在开发环境可以正常运行，但是打包以后就出现了问题，提示加载不到资源。排查之后发现通过webpack把文件压缩成render.js之后，node文件的加载路径竟然写死成了工程所在的绝对路径。 修改 .electron-vue目录下webpack.renderer.config.js文件 module: { rules: [ { test: /\.node$/, use: 'node-loader'
使用electron-packager打包electron-vue项目的一些问题：打包后的应用程序空白、静态资源无法加载
fu_jian_ping的博客
09-30 5074
最近在使用electron-packager打包electron-vue项目时遇到了一些小问题，下面是我的解决方案： 1、打包后的应用程序打开后是空白的： 解决方法：在npm run packager之前先npm run build。 2、图片等静态资源无法加载的问题： 打包时一般会将静态资源文件放在“打包文件名\resources\app\dist\electron"路径下，若你的静态文件没有复制到这里，那么应用程序将无法找到，即应用程序会在这个文件夹中找静态资源。 解决方法： 先把静态资源放
解决vue electron-builder打包后fetch请求本地资源报错的问题
m0_63548381的博客
05-10 1053
在代码里，我们请求了public文件夹下的img.json文件。打包运行之后，发现控制台报错Fetch API cannot load app://./img.json. URL scheme "app" is not supported.
vite-electron-react-builder:基于Vite的电子应用样板。 TypeScript + React
04-11
Vite Electron React Builder样板v2 Vite +电子= :fire: 这是制作的的叉子。 继续开发他的模板。 这是用于电子应用的安全模板。 遵循最新的安全要求，建议和最佳实践编写。 引擎盖下使用-超快，NextGen的捆绑，...
vite-electron-react-starter:Vite 2 + Electron 11.x + React 17.x + Typescript模板。 @ cawa-93vite-electron-builder的fork进行React
05-07
带有React的Vite Electron Builder :atom_symbol: 模板Vite +电子= :fire: 这是令人惊叹的的一个分支。 对于使用React在文件结构和文件方面的使用，此Fore尚未精炼。 但是，只要有React，一切都很好。 我保留作者的...
react-electron：react-electron应用程序骨架
02-27
使用npx create-react-app react-electron来构建react应用程序。 使用npm install electron --save-dev实施的电子npm install electron --save-dev而npm install electron-builder --save-dev 。 不要忘了/ build和...
electron-react-quick-start:使用电子并做出React以快速入门的模板
05-23
react + electron + ant 的脚手架项目。 包含调用本地DLL和activex控件的示例。 项目基于. 快速开始 需要安装 和 (示例使用32位dll文件，nodejs需使用32位版本)。 打开命令窗口: npm config set registry ...
【Web】CTFSHOW 中期测评刷题记录(1)
uuzeray的博客
05-02 1525
访问./cache/6a992d5529f459a44fee58c733255e86.php，命令执行拿flag。login.php是在./templates下的，而./flag.php与./templates均为web目录。注意到用./template/error.php中存在{{username}}，可以用其cache来写马。这时候重开下靶机再去读./templates/index.php，发现是给了提示的。访问./config/settings.php，命令执行拿到flag。
前端调用WebSocket协议接口获取数据
m0_56023096的博客
04-29 488
createWs("测试数据", (res) => {
菜鸡学习netty源码（三）—— Reactor 模型
u013127325的博客
05-03 586
我们先进行理解一下Reactor模型，知道什么是Reactor模型，它有什么特别之处。我们先来简单介绍一下这个Reactor模型。Reactor模型的核心思想：就是将所关注的I/O事件进行注册到一个多路复用器上，一旦有I/O事件的发生，将事件进行分发到对应的事件处理器中，执行I/O事件对应的函数。Rector模型有3中模型的实现：单Reactor单线程模型，单Reactor多线程模型，多Reactor多线程模型。
前端 | iframe框架标签应用（二）| 外部页面导入
最新发布
因为健忘，所以记点有的没的〒▽〒
05-06 959
点击右上角喇叭，弹出iframe页面框，链接bilibili白噪音视频页面；点击关闭按钮，关闭弹出框。
react + electron electron-builder 打包教程
05-28
好的，下面是基于 React 和 Electron 并使用 electron-builder 进行打包的教程： 1. 创建 React 应用 首先，我们需要使用 create-react-app 工具创建一个 React 应用。在命令行中运行以下命令： ``` npx create-react-app my-electron-app ``` 这会在当前目录下创建一个名为 `my-electron-app` 的新应用。 2. 添加 Electron 接下来，我们需要在项目中添加 Electron。我们可以使用 `electron` 和 `electron-builder` 库来实现这一点。 在命令行中运行以下命令： ``` cd my-electron-app npm install --save-dev electron electron-builder ``` 3. 添加 Electron 入口文件 我们需要创建一个新文件 `public/electron.js`，这是 Electron 的入口文件。在这个文件中，我们需要引入 `electron` 模块并创建一个新的 Electron 窗口。 ```js const { app, BrowserWindow } = require('electron') function createWindow () { const win = new BrowserWindow({ width: 800, height: 600, webPreferences: { nodeIntegration: true } }) win.loadURL('http://localhost:3000') } app.whenReady().then(() => { createWindow() app.on('activate', function () { if (BrowserWindow.getAllWindows().length === 0) createWindow() }) }) app.on('window-all-closed', function () { if (process.platform !== 'darwin') app.quit() }) ``` 这个文件创建了一个新的 Electron 窗口，并在窗口中加载了 React 应用的 `http://localhost:3000` 页面。 4. 修改 package.json 文件 我们需要修改 `package.json` 文件中的一些字段，以便 electron-builder 能够正确地打包我们的应用。 ```json { "name": "my-electron-app", "version": "0.1.0", "homepage": "./", "main": "public/electron.js", "build": { "appId": "com.example.my-electron-app", "productName": "My Electron App", "directories": { "output": "build" }, "files": [ "build/**/*", "node_modules/**/*", "public/**/*" ], "mac": { "category": "public.app-category.developer-tools", "icon": "public/icon.icns" }, "win": { "icon": "public/icon.ico" } } } ``` 这个文件中的 `main` 字段告诉 electron-builder 我们的 Electron 入口文件在 `public/electron.js`。`build` 字段中的其他字段指定了打包的一些设置，例如应用的 ID、名称、输出目录、文件列表和图标。 5. 添加打包脚本 最后，我们需要在 `package.json` 文件中添加一个打包脚本。 ```json { "scripts": { "start": "react-scripts start", "build": "react-scripts build", "pack": "electron-builder --dir", "dist": "electron-builder" } } ``` 这些脚本中的 `pack` 脚本会在开发模式下打包应用程序，而 `dist` 脚本会在生产模式下打包应用程序。 6. 运行应用 现在，我们可以运行应用程序。在命令行中运行以下命令： ``` npm start ``` 这将启动 React 应用程序。 然后，在另一个命令行窗口中运行以下命令： ``` npm run pack ``` 这将使用 `electron-builder` 打包应用程序，并在输出目录中生成一个可执行文件。 如果您想要构建一个安装程序，您可以运行以下命令： ``` npm run dist ``` 这将打包应用程序，并在输出目录中生成一个安装程序。 这就是使用 React 和 Electron 并使用 electron-builder 进行打包的教程。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值