禁用vue-cli中动态路径图像加载的“包括所有图像”

Question

我试图在Vue中动态加载图像，例如：

computed: {
  background () {
    return require('./bgs/' + process.env.VUE_APP_SOME_VAR + '.jpg')
  }
}

但是，根据这个网站（https://vuejs-templates.github.io/webpack/static.html的“在JavaScript中获取资产路径”），将发生以下情况：

请注意，上面的示例将包括最终版本中./bgs/下的每个图像。这是因为Webpack无法猜测它们将在运行时使用哪些，因此它包含了所有这些内容。

但是，对我来说，此变量仅在环境变量中设置一次。所以它永远不会改变整个应用程序。我不需要默认包含的图像。是否有可能通过任何机会改变这种行为？

Answer 1

由于https://stackoverflow.com/a/53603600/4349566，我使用别名找到了一个很好的答案。

我为我的vue.config.js添加了一个新的别名，如下所示：

module.exports = {
  // Some less important stuff

  configureWebpack: {
    resolve: {
      alias: {
        "~vendor": require("path").resolve(
          __dirname,
          "src/assets/" + process.env.VUE_APP_SOME_VAR
        )
      }
    }
  }
};

然后我可以像这样使用需求：require('~vendor/images/banner-large.jpg')。所以现在我正在构建时，它不包含不需要的图像。