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

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

1 个答案: