在Vue中使用具有相同代码库的不同供应商

Question

我正在使用Vue cli 3生成的Vue项目。我想在同一代码库中使用不同的供应商。

我需要一些可以基于变量加载不同图像/样式的东西。例如：

<!-- In HTML templates -->
<img :src="`@/assets/vendor_name_here/banner.jpg`" />

/* In SCSS */
@import "assets/vendor_name_here/style/bootstrap";

vendor_name_here是可以在环境中设置的变量。请注意，以上操作无效。

来自Angular背景，只需将应用程序或项目添加到配置中，就可以实现类似的目的。但是，（我能找到的）在Vue文档中没有记录。

那么Vue中有类似的东西吗？

---

更新：

我刚刚发现以下内容适用于HTML图像：

<img :src="require(`@/assets/${VUE_APP_VENDOR}/banner-large.jpg`)" />

因此SCSS文件的问题仍然存在。

更新2：

因此，显然，相同的方法也适用于SCSS文件。我在脚本块中添加了以下内容：

require(`./assets/${process.env.VUE_APP_VENDOR}/style/bootstrap.scss`);

现在它可以工作了：）。

Answer 1

So I found my own answer to this. The fixes are in the answer itself in the updates.