时间戳

首页 > 解决方案 > Electron 在开发和构建的应用程序中伪造静态资产

webpack - Electron 在开发和构建的应用程序中伪造静态资产

问题描述

我有一个准备打包的电子锻造应用程序，但我的静态资产在构建版本中不起作用。例如，我正在尝试显示我们的徽标：

<img src='/assets/svgs/logo.svg' class='text'></img>

因为在 dev 中它启动了一个服务器，所以页面的 URL 是 http://localhost:3000/main_window。为了访问我的静态文件，我放了一个“/”，它在从基本域加载时工作，而不是在窗口名称之外：

http://localhost:3000/assets/svg/logo.svg

如果没有第一个“/”，它看起来在这里不起作用：

http://localhost:3000/main_window/assets/svgs/logo.svg

但是对于第一个“/”，构建的应用程序会解释路径不同，因为它不再位于开发服务器中：

file:///assets/svgs/logo.svg

如果我将我的 html 更改为以下，那么它可以在构建版本中使用，而不是在开发版本中：

<img src='assets/svgs/logo.svg' class='text'></img>

file:///C:/Users/<USER>/projects/<PROJECT>/out/App-win32-x64/resources/app/.webpack/renderer/main_window/assets/svgs/logo.svg

我正在使用 WebpackCopyPlugin 将这些资产复制到 .webpack 文件夹中

  new CopyWebpackPlugin({
    patterns: [
      { from: path.resolve(__dirname, 'src/renderer/assets/'), to: 'assets' },
    ],
  })

但是，这是在 .webpack 文件夹中的两个位置复制资产。我在这两个方面都看到了我的资产：

.webpack\renderer\assets
.webpack\renderer\main_window\assets

我不确定为什么要复制这些文件，但是使用 main_window 文件夹中的资产，我不明白为什么路径 http://localhost:3000/main_window/assets/svgs/logo.svg 在开发中无法解析环境。我还发现它在开发服务器中查看基本资产文件夹很奇怪，但在构建的应用程序中它查看 main_window\assets。

如何让这些静态资产同时在开发服务器和构建的应用程序中工作，而不必根据其运行的环境使用不同的路径？

编辑： 我确实找到了这个类似的帖子，但他们的答案是在生产中运行快速服务器，另一个解决方案是根据环境变量更改路径。在 prod all 中为一些图像运行 express 服务器听起来像是一种创可贴的解决方案，并且必须使用环境变量来设置路径在原始 HTML 中不起作用。可维护性不是很好，因为您需要记住使用该路径，如果没有经过良好测试，仍然很容易导致生产代码损坏。

不能在电子锻造中使用静态文件

标签： webpackelectron-forge

解决方案

我在发布到 webpack 的问题中找到了解决方案，不需要单独的服务器、文件协议处理程序或基于变量引用它：

在 CopyWebpackConfig 中，明确地为目标提供 .webpack/main_window 文件夹的路径：

  new CopyWebpackPlugin({
    patterns: [
      { 
        from: path.resolve(__dirname, 'src/renderer/assets/'), 
        to: path.resolve(__dirname, '.webpack/renderer/main_window/assets/') 
      },
    ]
  })

然后，您可以在没有基本“/”的情况下访问您的文件：

<img src='assets/svgs/logo.svg'></img>

我不确定是什么使这项工作有效 - 以前资产已经被复制到那里，因此从文件结构的角度来看它是相同的。它必须为 electron-forge 提供对该路径的引用，以使其可以从开发环境中的 Web 服务器访问。

推荐阅读