webpack - 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 <img src="@/static/img/ => <img src="/img/ 中删除 @/asset

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

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

imganame.2354ur2bur2.jpg

我该如何解决这个问题？

标签： webpacknuxt.js

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" />

当路径不包含@or~时，Webpack 不会触及路径和数据本身。

否则，您可以配置 Webpack 使用build.extend，这样它就不会使用哈希重命名文件。但是，不推荐这种方法。