在 vue-cli 中禁用动态路径图像加载时的"include all images"

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').所以现在当我构建时，它不包括不需要的图像。