Nuxt 生成带有最终随机哈希的 img

Question

我有两个运行问题

npm run generate

第一个问题：[已解决]

我在 dist 文件夹中有两个重复的 img 文件夹：

一个在：

 dist/img 

另一个在里面

dist/_nuxt/img

在 dist/img 文件夹中维护子文件夹，在 dist/_nuxt/img 中没有。

所有站点 img src 都指向 dist/_nuxt/img 但我想使用 dist/img/../ 文件夹。

[解决方案] 从 src 中删除 @/asset

第二个问题： （尚未解决）

也许可以解决，解决第一个问题，所有图片都用一个最终的哈希重命名，我不喜欢这样，例如：

imganame.2354ur2bur2.jpg

我该如何解决这个问题？

Answer 1

首先，让我们快速总结一下您的问题：当您引用这样的图像时：

<img src="~/assets/your_image.png" />

会被翻译成

<img src="/_nuxt/img/your_image.0c61159.png" />

在构建过程之后使用nuxt generate。

这是Webpack Assets 的默认行为。它解析引用，使用版本哈希重命名文件以获得更好的缓存，并将文件复制并粘贴到指定位置，在本例中为 /_nuxt/img。

如果这不是您想要的功能，只需将您的图片放在static/ 下，然后您可以像这样引用它们：

<img src="/path/to/your_image.png" />

当路径不包含@或~时，Webpack不会接触到路径和数据本身。

否则，您可以使用 build.extend 配置 Webpack，这样它就不会使用哈希重命名文件。不过这种做法是not recommended。