如何避免在Vite的生产构建中在`{style:url(…)}}`中键入`base`路径

因此,如果你使用Vite构建和部署React应用程序,在内部你将使用导入在组件之间传递图像,因此Vite将负责简化你的网址管理,对吧?

但在某些情况下(favicons是最简单的例子),你最终会使用 public dir并将您的资产文件放置在那里,这样它们就不会像文档中解释的那样被处理 here 然后,您只需使用绝对路径链接到它们(可以说,以公用文件夹为根)。

我偶然发现了这样一个案例。

我有一个组件,由于风格原因,分配了一个 mask 对元素进行样式设置,这需要使用动态url。因此,我采用了模板文字语法,但由于显而易见的原因,我无法引入(each!)导入。

尝试了以下代码:

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

现在,上面的代码(经过各种各样的尝试)是有效的,但在我看来,它有一个很大的缺点,那就是如果URL在未来发生变化,我必须记住至少在两个地方进行更改( base 在里面 vite.config.js 在这里,在这个组件中)否则它会断裂。 注意:我忘了提及,我必须更改 基础 按规定 in the docs 因为它是一个基于repo的url。

我试着用 import.meta.url 方式,也在文档中建议,在上面链接的同一页面中,但日志会输出一些以以下开头的疯狂长字符串 data:image/svg+xml... 这并不会在生产中一无所获。

尝试和实验 publicDir 但这并没有改变我的用例。

尝试更改“package.json”中的“主页”,但未发现任何更改。

我想实现的是能够参考 基础 配置在 vite.config.js 在我的组件中(在上面显示的模板文本中),为了构建这个url,或者能够以不需要手动键入基路径的方式编写我的url模板文本。为什么?

我的假设是,它也会像favicon一样工作,因为它只是使用一个 href="/favicon.svg" 从html中,事情是 dist 文件夹包含html文件 和 公共资产,而js包则位于其中 dist/assets ,Vite文档规定,您必须使用公共资产的绝对路径(所以我不能这样做 ../blahblah ).

希望我已经提供了足够的信息和背景,这样你就可以指出我有什么错误的假设或误解。但如果我没有,请给我一点我应该提及的其他事情的提示。最重要的是,我感谢你花时间给我提供任何见解或建议。