在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有类似的东西吗？

---

Update:

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

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

因此，对于SCSS文件仍然存在问题。

Update 2:

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

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

现在它工作:)。

Answer 1

所以我找到了自己的答案。修复程序在更新中的答案本身。