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

【问题标题】：Disable "include all images" on dynamic path image load in vue-cli在 vue-cli 中禁用动态路径图像加载的“包含所有图像”
【发布时间】：2019-04-18 13:11:59
【问题描述】：

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

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

但是，根据本网站（https://vuejs-templates.github.io/webpack/static.html at "Getting Asset Paths in JavaScript"），将会发生以下情况：

请注意，上面的示例将在最终构建中包含 ./bgs/ 下的每个图像。这是因为 Webpack 无法猜测它们中的哪一个会在运行时被使用，所以它包含了它们。

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

【问题讨论】：

标签： vue.js vue-cli-3

【解决方案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：require('~vendor/images/banner-large.jpg')。所以现在当我构建时，它不包含不需要的图像。

【讨论】：