Nuxt 动态资产未加载答案

【问题标题】：Nuxt dynamic asset not loadingNuxt 动态资产未加载
【发布时间】：2020-06-19 12:23:34
【问题描述】：

我正在尝试在nuxt 中加载动态资产。我听从了所有建议，说应该使用require，但我无法让它工作。

在我的模板中使用这个，

<v-img  :src="mimeTypeUrl()"></v-img>

以下结果为Error: "Cannot find module '~/assets/media/application-vnd-google-earth-kmz.png'"

methods: {
    mimeTypeUrl() {
      const f = '~/assets/media/application-vnd-google-earth-kmz.png';
      return require(f);
    }
  }

但这很好用：

methods: {
    mimeTypeUrl() {
      return require('~/assets/media/application-vnd-google-earth-kmz.png');
    }
  }

这里有什么问题，我该如何解决？

@nuxt/core version: 2.11.0

webpack version: 4.41.6

【问题讨论】：

标签： vue.js webpack nuxt.js

【解决方案1】：

虽然丑陋，但我发现的一种解决方法是创建一个对象，其中图标名称作为键，require() 作为值：

const MIME_ICONS_REQUIRE = {
  ...
  'application-msword':require('~/assets/media/mimetypes/application-msword.png'),
  'application-pdf':require('~/assets/media/mimetypes/application-pdf.png'),
  'application-vnd-google-earth-kml':require('~/assets/media/mimetypes/application-vnd-google-earth-kml.png'),
  ...
}

【讨论】：

【解决方案2】：

这总是一个棘手的情况。在您的情况下，您可以通过将 f 别名为图标名称并在路径中将其串联使用来解决此问题：

mimeTypeUrl(icon) {
  return require(`~/assets/media/${icon}`);
}

然后用图标作为参数调用它：

:src="mimeTypeUrl('application-vnd-google-earth-kmz.png')"

这是可行的，因为 webpack 将为您的 /assets/media 目录创建一个完整的上下文，其中将包含您的图像文件。

不推荐

你可以通过在你的路径前加上一个空字符串来为你的整个项目创建一个上下文来真正欺骗 webpack

mimeTypeUrl(icon) {
  return require('' + '~/assets/media/application-vnd-google-earth-kmz.png');
}

这是不希望的，因为它会为您的整个应用程序结构创建上下文，这会使包大小增加可测量的数量。如果文件和/或类的命名发生冲突，它还可能通过污染全局上下文并使其别名解析不正确而产生意想不到的后果。

【讨论】：

我试过这个：return require(`~/assets/media/${mimeName}`); 没用。