如何避免在使用 Vite 的生产版本中在 `{{style: url(...)}}` 中输入 `base` 路径

Question

因此，如果您使用 Vite 构建和部署 React 应用程序，则在内部您将使用导入在组件之间引入图像，因此 Vite 将负责简化您的 url 管理，对吗？

但在某些情况下（favicons 是最简单的示例），您最终会使用

public

目录并将资产文件放置在其中，这样它们就不会按照文档 here 中的说明进行处理，然后您只需链接到它们具有绝对路径（可以这么说，以公共文件夹为根）。

我就遇到过这样的案例。

我有一个组件，由于风格原因，为元素分配

mask

样式，这需要使用动态 url。因此，我诉诸于使用模板文字语法，但由于显而易见的原因，我无法引入（每个！）导入。

尝试过这段代码：

export default function myComp({urlForMask}) {
    return <div style={{ mask: `url(/base-path-here/${urlForMask}-smth.svg)` }}></div>
}

现在，上面的代码（经过各种不同的尝试）可以工作，但在我看来，它有一个很大的缺点，那就是如果将来 URL 发生变化，我必须记住至少在两次内更改它放置（

base

中的

vite.config.js

以及此处，在此组件中），否则它将损坏。 注意：我忘了提及，我必须按照文档中指定的

 更改 

base，因为它是基于存储库的 url。

我尝试使用

import.meta.url

 方式，也在文档中建议，在上面链接的同一页面中，但记录输出一些以 

data:image/svg+xml...

 开头的非常长的字符串，并且在生产中不会呈现任何内容。

尝试并尝试了

publicDir

，但它并没有改变我的用例中的任何内容。

尝试更改“package.json”中的“主页”，但没有发现任何变化。

我想要实现的是能够引用我的组件内

base

中配置的

vite.config.js

（在上面显示的模板文字中），以便构建此url，或者能够编写我的URL模板文字的方式不需要手动输入基本路径。为什么？

我的假设是它也会像 favicon 一样工作，因为它只是使用 html 中的

href="/favicon.svg"

，

dist

 文件夹包含 html 文件

和公共资产，而 js 包存在在dist/assets

里面，Vite文档声明你必须使用公共资产的绝对路径（所以我不能这样做

../blahblah

）。

希望我已经提供了足够的信息和背景，以便您可以指出我的错误假设或误解。但如果我没有，请给我一些我应该提到的其他内容的提示。最重要的是，我感谢您花时间给我任何见解或指导。

Answer 1

我也有类似的问题。据我了解，您的图像不是从公共目录提供的。就我而言，我托管在 vercel 上，他们有一个烦人的功能，即要在代码中导入图像，并将图像作为代码本身的一部分引用，您需要指定其在项目中的位置，就像使用普通图像一样文件。但是，当您将其指定为字符串时（例如在图像源中），您需要指定构建上的位置。所以你必须写类似

src="/image.png"

 的内容，而不指定它来自公共目录。但对于 Github Pages 可能会有所不同，所以我建议您查看其生成的版本，如果您在 GitHub 上找不到它，您可以随时在 DevTools 中搜索。

不过我不太明白

base

的问题。难道你不能只在 env 中指定 base，然后在任何地方使用它吗？