电子在开发和构建应用程序中伪造静态资产

Question

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

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

因为在开发中它启动了一个服务器，页面的 URL 是 http://localhost:3000/main_window。为了访问我的静态文件，我放置了一个“/”，它在从基本域加载时工作，而不是在 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.

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

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

Answer 1

我在发布到 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 提供对该路径的引用，以便在开发环境中可以从他们的网络服务器访问它。

电子在开发和构建应用程序中伪造静态资产

Electron forge static assets in dev and built app

webpack

electron-forge