开发和构建的应用程序中的电子伪造静态资产
我有一个电子锻造应用，我已经准备好打包，但我的静态资产不能在构建的版本中工作。例如，我试图展示我们的徽标：
<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但是对于第一个"/"，构建的应用程序对路径的解释有所不同，因为它不再存在于dev服务器中：
file:///assets/svgs/logo.svg如果我将html更改为以下内容，那么它可以在构建的版本中工作，但不适用于dev版本：
<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路径不能在dev环境中解析。我还发现，在dev服务器中，它会查看基本资产文件夹，但在构建的应用程序中，它会查看main_window\assets。
如何使这些静态资产在dev服务器和构建的应用程序中都能工作，而不必使用不同的路径，这取决于它在哪个环境中运行？
编辑:我确实找到了类似的帖子，但他们的答案是在生产中运行一个快速服务器，另一个解决方案是根据环境变量更改路径。在prod中运行一个快递服务器，只需要几个图像，听起来就像一个创可贴解决方案，而且必须使用一个环境变量来设置您的路径，这在原始HTML中是行不通的。在这方面的可维护性不是很好，因为您需要记住使用该路径，如果测试不好，仍然很容易导致生产代码的中断。
回答 1
Stack Overflow用户
发布于 2021-03-22 21:18:30
我在向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>不过，我不知道是什么让这件事起作用的--以前，这些资产已经被复制到那里了，所以从文件结构的角度来看，它是相同的。它必须对该路径进行电子伪造引用，以便在开发环境中从他们的dev服务器访问该路径。
https://stackoverflow.com/questions/66753099
复制相似问题
腾讯云开发者
