vue.js - 在 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";

wherevendor_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`);

现在它可以工作了:)。

标签： vue.jsvuejs2vue-cli-3

Answer 1

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